/**
 * Inventory app — presentation.
 *
 * One DOM for every viewport: the item table becomes a stack of cards below
 * --hr-breakpoint-mobile by re-rendering the same cells as flex rows, not by
 * swapping in a second markup tree. All colour comes from hr-tokens.css.
 */

/* --------------------------------------------------------------------- */
/* Shell                                                                  */
/* --------------------------------------------------------------------- */

.inv-app {
    color: var(--hr-text);
    font-size: var(--hr-font-md);
}

.inv-app *,
.inv-app *::before,
.inv-app *::after {
    box-sizing: border-box;
}

.inv-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.inv-muted { color: var(--hr-text-muted); }

/* The host theme styles bare <button> elements — including a filled :focus
   state, which turned the selected tab into blue text on a blue fill. Pin every
   interactive state of our own controls and supply a focus ring of our own.
   Scoped under .inv-app so these win on specificity without !important. */
.inv-app .inv-tab,
.inv-app .inv-tab:hover,
.inv-app .inv-tab:focus,
.inv-app .inv-tab:active,
.inv-app .inv-scope__btn:focus,
.inv-app .inv-scope__btn:active,
.inv-app .inv-chip:focus,
.inv-app .inv-chip:active,
.inv-app .inv-segmented__btn:focus,
.inv-app .inv-segmented__btn:active,
.inv-app .inv-item-open,
.inv-app .inv-item-open:hover,
.inv-app .inv-item-open:focus,
.inv-app .inv-item-open:active {
    background: transparent;
    box-shadow: none;
    text-shadow: none;
}

/* The item name is a bare <button> so it stays keyboard-reachable; themes then
   give it their own border and colour, which drew a stray rule across each
   card on mobile. */
.inv-app .inv-item-open {
    border: 0;
    color: inherit;
    text-decoration: none;
}

.inv-app .inv-scope__btn.is-active,
.inv-app .inv-scope__btn.is-active:focus,
.inv-app .inv-segmented__btn.is-active,
.inv-app .inv-segmented__btn.is-active:focus {
    background: var(--hr-bg);
    color: var(--hr-text);
    box-shadow: var(--hr-shadow-sm);
}

.inv-app .inv-chip.is-active,
.inv-app .inv-chip.is-active:focus {
    background: var(--hr-text);
    color: #fff;
}

/* Themes commonly set a min-width, generous padding and a large line-height on
   buttons, which turned the modal close control into an oversized block with the
   glyph pushed off-centre. Pin its box explicitly and centre by flex. */
.inv-app .inv-drawer__close,
.inv-app .inv-drawer__close:hover,
.inv-app .inv-drawer__close:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--hr-radius);
    background: var(--hr-bg-muted);
    color: var(--hr-text);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-shadow: none;
    box-shadow: none;
    flex-shrink: 0;
}

.inv-app .inv-drawer__close:hover { background: var(--hr-border); }

/* Likewise for number inputs: a theme `width: 100%` stretched the order
   quantity field across its whole column. */
.inv-app input[type="number"].inv-order-qty,
.inv-app input.inv-count-input {
    max-width: 100%;
    min-width: 0;
}

/* Keep a visible ring for keyboard users without painting it on every click. */
.inv-app button:focus:not(:focus-visible) { outline: none; }

.inv-app button:focus-visible {
    outline: 2px solid var(--hr-primary);
    outline-offset: 2px;
}

/* The legacy partials embedded in Ordering/Counts carry .tab-content and ship
   with an inline `display: none` from their old tab layout. Inside the app the
   enclosing .inv-panel owns visibility, so these must always lay out — hence
   !important, which is the only way to beat those inline styles. */
.inv-app .tab-content { display: block !important; }

/* Their inner Products/Supplies toggle is replaced by the global scope switch. */
.inv-app .check-type-toggle { display: none; }

/* Stock, transfers and reorder have their own tabs now, so the supplies module's
   equivalents are suppressed here. Its script toggles these inline, so the
   override has to be !important too. */
.inv-app #inv-items-supplies .supplies-sub-tab[data-subtab="stock-overview"],
.inv-app #inv-items-supplies .supplies-sub-tab[data-subtab="transfer-needs"],
.inv-app #inv-items-supplies .supplies-sub-tab[data-subtab="reorder-needs"],
.inv-app #inv-items-supplies #supplies-stock-overview,
.inv-app #inv-items-supplies #supplies-transfer-needs,
.inv-app #inv-items-supplies #supplies-reorder-needs {
    display: none !important;
}

/* --------------------------------------------------------------------- */
/* Top bar and scope switch                                               */
/* --------------------------------------------------------------------- */

.inv-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hr-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--hr-space-4);
}

.inv-scope {
    display: inline-flex;
    background: var(--hr-bg-muted);
    border-radius: var(--hr-radius-pill);
    padding: 3px;
    gap: 2px;
}

.inv-scope.is-hidden { visibility: hidden; }

.inv-scope__btn {
    border: 0;
    background: transparent;
    color: var(--hr-text-muted);
    font-size: var(--hr-font-base);
    font-weight: 600;
    padding: 7px 16px;
    border-radius: var(--hr-radius-pill);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.inv-scope__btn:hover { color: var(--hr-text); }

.inv-scope__btn.is-active {
    background: var(--hr-bg);
    color: var(--hr-text);
    box-shadow: var(--hr-shadow-sm);
}

.inv-scope__hint {
    margin: 0;
    font-size: var(--hr-font-sm);
    color: var(--hr-text-muted);
}

/* --------------------------------------------------------------------- */
/* Tabs                                                                   */
/* --------------------------------------------------------------------- */

/* The strip scrolls horizontally when the tabs outgrow it. `overflow-x: auto`
   computes the *other* axis from `visible` to `auto` as well, so the strip clips
   vertically too — which is what swallowed the active tab's underline, since it
   was pulled below the content box by a negative margin to overlap the baseline
   rule. Draw that rule as an inset shadow instead: it occupies no box space, so
   the 2px indicator can sit flush inside the scroll box and still cover it. */
.inv-tabs {
    display: flex;
    gap: var(--hr-space-1);
    box-shadow: inset 0 -1px 0 var(--hr-border);
    margin-bottom: var(--hr-space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.inv-tabs::-webkit-scrollbar { display: none; }

.inv-tab {
    border: 0;
    background: transparent;
    padding: 10px 14px;
    font-size: var(--hr-font-base);
    font-weight: 600;
    color: var(--hr-text-muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.inv-tab:hover { color: var(--hr-text); }

.inv-tab.is-active {
    color: var(--hr-primary-strong);
    border-bottom-color: var(--hr-primary);
}

.inv-panel[hidden] { display: none; }

.inv-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hr-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--hr-space-4);
}

.inv-panel__head h2 {
    margin: 0 0 2px;
    font-size: var(--hr-font-lg);
    font-weight: 600;
}

.inv-panel__head p {
    margin: 0;
    font-size: var(--hr-font-base);
    color: var(--hr-text-muted);
}

/* --------------------------------------------------------------------- */
/* Buttons, chips, inputs                                                 */
/* --------------------------------------------------------------------- */

.inv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--hr-border-strong);
    background: var(--hr-bg);
    color: var(--hr-text-secondary);
    font-size: var(--hr-font-base);
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--hr-radius);
    cursor: pointer;
    white-space: nowrap;
}

.inv-btn:hover { background: var(--hr-bg-subtle); }

.inv-btn--primary {
    background: var(--hr-primary);
    border-color: var(--hr-primary);
    color: #fff;
}

.inv-btn--primary:hover { background: var(--hr-primary-strong); }

.inv-btn--ghost {
    border-color: transparent;
    background: var(--hr-bg-muted);
}

.inv-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 420px;
}

.inv-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--hr-font-base);
    pointer-events: none;
}

#inv-search {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--hr-border-strong);
    border-radius: var(--hr-radius);
    font-size: var(--hr-font-md);
    background: var(--hr-bg);
}

.inv-select {
    padding: 7px 10px;
    border: 1px solid var(--hr-border-strong);
    border-radius: var(--hr-radius);
    font-size: var(--hr-font-base);
    background: var(--hr-bg);
    max-width: 220px;
}

.inv-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hr-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--hr-space-3);
}

.inv-filters__right {
    display: flex;
    align-items: center;
    gap: var(--hr-space-3);
    flex-wrap: wrap;
}

.inv-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.inv-chip {
    border: 1px solid var(--hr-border);
    background: var(--hr-bg);
    border-radius: var(--hr-radius-pill);
    padding: 5px 12px;
    font-size: var(--hr-font-sm);
    font-weight: 600;
    color: var(--hr-text-secondary);
    cursor: pointer;
}

.inv-chip:hover { background: var(--hr-bg-subtle); }

.inv-chip.is-active {
    background: var(--hr-text);
    border-color: var(--hr-text);
    color: #fff;
}

.inv-chip__count {
    opacity: 0.6;
    margin-left: 2px;
}

.inv-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--hr-font-sm);
    color: var(--hr-text-muted);
    cursor: pointer;
}

.inv-segmented {
    display: inline-flex;
    background: var(--hr-bg-muted);
    border-radius: var(--hr-radius);
    padding: 3px;
    gap: 2px;
    margin-bottom: var(--hr-space-4);
}

.inv-segmented__btn {
    border: 0;
    background: transparent;
    padding: 7px 14px;
    border-radius: var(--hr-radius-sm);
    font-size: var(--hr-font-base);
    font-weight: 600;
    color: var(--hr-text-muted);
    cursor: pointer;
}

.inv-segmented__btn.is-active {
    background: var(--hr-bg);
    color: var(--hr-text);
    box-shadow: var(--hr-shadow-sm);
}

/* --------------------------------------------------------------------- */
/* Status badge — colour is never the only signal                         */
/* --------------------------------------------------------------------- */

.inv-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--hr-radius-pill);
    font-size: var(--hr-font-sm);
    font-weight: 700;
    white-space: nowrap;
}

.inv-badge__icon { font-size: var(--hr-font-xs); }

.inv-badge--ok      { background: var(--hr-status-ok-soft);      color: var(--hr-status-ok); }
.inv-badge--low     { background: var(--hr-status-low-soft);     color: var(--hr-warning); }
.inv-badge--reorder { background: var(--hr-status-reorder-soft); color: var(--hr-status-reorder); }
.inv-badge--out     { background: var(--hr-status-out-soft);     color: var(--hr-status-out); }

/* --------------------------------------------------------------------- */
/* Item list                                                              */
/* --------------------------------------------------------------------- */

.inv-table-wrap { width: 100%; }

.inv-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--hr-bg);
}

.inv-th {
    text-align: left;
    font-size: var(--hr-font-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hr-text-muted);
    font-weight: 700;
    padding: 8px 12px;
    border-bottom: 1px solid var(--hr-border);
    white-space: nowrap;
}

.inv-sortable { cursor: pointer; }
.inv-sortable:hover { color: var(--hr-text); }
.inv-sort { margin-left: 4px; font-size: 9px; }

.inv-row { border-bottom: 1px solid var(--hr-border); cursor: pointer; }
.inv-row:hover { background: var(--hr-bg-subtle); }
.inv-row.is-inactive { opacity: 0.55; }

.inv-cell { padding: 10px 12px; vertical-align: middle; }

/* Tabular figures so the decimal points line up down the column. */
.inv-th--price,
.inv-cell--price { white-space: nowrap; }
.inv-price { font-variant-numeric: tabular-nums; }

/* Both are mobile-only affordances. On desktop the row highlights on hover and
   the actions column is narrow, so neither earns its space. */
.inv-row__details,
.inv-btn__more { display: none; }

.inv-item-open {
    display: flex;
    align-items: center;
    gap: var(--hr-space-3);
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    color: inherit;
}

.inv-thumb {
    width: 38px;
    height: 38px;
    border-radius: var(--hr-radius);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--hr-bg-muted);
}

.inv-thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hr-font-lg);
}

.inv-item-text { display: flex; flex-direction: column; min-width: 0; }

.inv-item-name {
    font-weight: 600;
    font-size: var(--hr-font-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-item-sub {
    font-size: var(--hr-font-sm);
    color: var(--hr-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-th--brand { white-space: nowrap; }

.inv-cell--brand {
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--hr-text-secondary);
}

/* Group headers: a band across the table, not a row pretending to be data. */
.inv-group + .inv-group .inv-group-row td { border-top: 1px solid var(--hr-border); }

.inv-group-row td {
    background: var(--hr-bg-subtle);
    padding: 8px 12px;
    border-bottom: 1px solid var(--hr-border);
}

.inv-group-row__name {
    font-weight: 700;
    font-size: var(--hr-font-md);
    margin-right: var(--hr-space-2);
}

.inv-group-row__meta {
    font-size: var(--hr-font-sm);
    color: var(--hr-text-muted);
}

.inv-group-row__flag { color: var(--hr-status-reorder); font-weight: 700; }

.inv-cell--stock { white-space: nowrap; }

.inv-total {
    font-weight: 700;
    font-size: var(--hr-font-lg);
    margin-right: var(--hr-space-2);
}

.inv-locs { display: inline-flex; gap: 4px; }

/* Every rule below is scoped under `.inv-app` on purpose. A theme rule such as
   `.entry-content button { color: #fff }` scores 0,1,1 and beats a bare
   `.inv-loc` at 0,1,0 — which is exactly what happened: `.inv-loc__meta` sets
   its own colour so the shop name stayed readable, while `.inv-loc__qty`
   inherited white-on-near-white and the quantity vanished from every chip that
   wasn't out/reorder/low. Two-class selectors put us back in front. */
.inv-app .inv-loc {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 46px;
    padding: 3px 6px;
    border-radius: var(--hr-radius-sm);
    border: 1px solid var(--hr-border);
    background: var(--hr-bg-subtle);
    color: var(--hr-text);
    font-size: var(--hr-font-sm);
    line-height: 1.2;
    cursor: default;
    opacity: 1;
    text-decoration: none;
    box-shadow: none;
    text-shadow: none;
}

.inv-app .inv-loc.is-editable { cursor: pointer; border-style: dashed; }

.inv-app .inv-loc.is-editable:hover,
.inv-app .inv-loc.is-editable:focus {
    border-color: var(--hr-primary);
    background: var(--hr-primary-soft);
}

.inv-loc__qty { font-weight: 700; color: inherit; }
.inv-loc__meta { font-size: 9px; color: var(--hr-text-muted); }

.inv-app .inv-loc--out     { background: var(--hr-status-out-soft);     border-color: var(--hr-status-out);     color: var(--hr-status-out); }
.inv-app .inv-loc--reorder { background: var(--hr-status-reorder-soft); border-color: var(--hr-status-reorder); color: var(--hr-status-reorder); }
.inv-app .inv-loc--low     { background: var(--hr-status-low-soft);     border-color: var(--hr-warning);        color: var(--hr-warning); }

.inv-loc__input {
    width: 44px;
    border: 0;
    background: transparent;
    font-size: var(--hr-font-base);
    font-weight: 700;
    text-align: center;
    padding: 0;
}

.inv-velocity { font-weight: 600; }
.inv-forecast { display: block; font-size: var(--hr-font-sm); }

/* Supplies: par and weekly use per shop, then the business total. */
.inv-plan {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    gap: 0 var(--hr-space-2);
    font-size: var(--hr-font-sm);
    text-align: right;
    white-space: nowrap;
}

.inv-plan__row { display: contents; }
.inv-plan__loc { text-align: left; color: var(--hr-text-muted); }
.inv-plan__par { color: var(--hr-text-muted); }
.inv-plan__use { font-variant-numeric: tabular-nums; }
.inv-plan__row--total > span { font-weight: 600; color: inherit; }

.inv-plan-tiles { margin-bottom: var(--hr-space-2); }

.inv-plan-note {
    margin: 0 0 var(--hr-space-4);
    font-size: var(--hr-font-sm);
    color: var(--hr-text-muted);
}

.inv-th--actions { text-align: right; width: 1%; }
.inv-cell--actions { text-align: right; white-space: nowrap; }
.inv-cell--actions .inv-btn { padding: 5px 12px; font-size: var(--hr-font-sm); }

.inv-result-count {
    margin: var(--hr-space-3) 0 0;
    font-size: var(--hr-font-sm);
    color: var(--hr-text-muted);
}

/* --------------------------------------------------------------------- */
/* Overview                                                               */
/* --------------------------------------------------------------------- */

.inv-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--hr-space-3);
    margin-bottom: var(--hr-space-5);
}

.inv-tile {
    background: var(--hr-bg);
    border: 1px solid var(--hr-border);
    border-left: 3px solid var(--hr-border-strong);
    border-radius: var(--hr-radius);
    padding: var(--hr-space-3) var(--hr-space-4);
}

.inv-tile__count { display: block; font-size: var(--hr-font-xl); font-weight: 700; line-height: 1.1; }
.inv-tile__label { display: block; font-size: var(--hr-font-sm); color: var(--hr-text-muted); }

.inv-tile--out     { border-left-color: var(--hr-status-out); }
.inv-tile--out .inv-tile__count { color: var(--hr-status-out); }
.inv-tile--reorder { border-left-color: var(--hr-status-reorder); }
.inv-tile--reorder .inv-tile__count { color: var(--hr-status-reorder); }
.inv-tile--low     { border-left-color: var(--hr-warning); }
.inv-tile--low .inv-tile__count { color: var(--hr-warning); }

.inv-queues { display: grid; gap: var(--hr-space-4); }

.inv-queue {
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    overflow: hidden;
    background: var(--hr-bg);
}

.inv-queue__head {
    padding: var(--hr-space-3) var(--hr-space-4);
    background: var(--hr-bg-subtle);
    border-bottom: 1px solid var(--hr-border);
}

.inv-queue__head h3 { margin: 0; font-size: var(--hr-font-md); font-weight: 700; }
.inv-queue__head p { margin: 2px 0 0; font-size: var(--hr-font-sm); color: var(--hr-text-muted); }

.inv-queue__count {
    display: inline-block;
    background: var(--hr-text);
    color: #fff;
    border-radius: var(--hr-radius-pill);
    font-size: var(--hr-font-xs);
    padding: 1px 8px;
    margin-left: 4px;
    vertical-align: middle;
}

.inv-queue--out .inv-queue__count     { background: var(--hr-status-out); }
.inv-queue--reorder .inv-queue__count { background: var(--hr-status-reorder); }
.inv-queue--low .inv-queue__count     { background: var(--hr-warning); }

.inv-queue__list { list-style: none; margin: 0; padding: 0; }
.inv-queue__item + .inv-queue__item { border-top: 1px solid var(--hr-border); }

.inv-queue__open {
    display: flex;
    align-items: center;
    gap: var(--hr-space-3);
    width: 100%;
    border: 0;
    background: transparent;
    padding: 10px var(--hr-space-4);
    cursor: pointer;
    text-align: left;
    color: inherit;
}

.inv-queue__open:hover { background: var(--hr-bg-subtle); }
.inv-queue__name { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.inv-queue__meta { display: flex; align-items: center; gap: 6px; font-size: var(--hr-font-sm); color: var(--hr-text-muted); }
.inv-queue__qty { font-weight: 700; font-size: var(--hr-font-base); white-space: nowrap; }

.inv-queue__more {
    margin: 0;
    padding: 8px var(--hr-space-4);
    font-size: var(--hr-font-sm);
    color: var(--hr-text-muted);
    background: var(--hr-bg-subtle);
}

.inv-pill {
    border-radius: var(--hr-radius-pill);
    padding: 1px 7px;
    font-size: var(--hr-font-xs);
    font-weight: 700;
    background: var(--hr-bg-muted);
    color: var(--hr-text-muted);
}

.inv-pill--products { background: var(--hr-primary-soft); color: var(--hr-primary-strong); }
.inv-pill--supplies { background: var(--hr-status-ok-soft); color: var(--hr-status-ok); }

.inv-allclear {
    text-align: center;
    padding: var(--hr-space-6) var(--hr-space-4);
    border: 1px dashed var(--hr-border-strong);
    border-radius: var(--hr-radius-lg);
    color: var(--hr-text-muted);
}

.inv-allclear span { font-size: 32px; }
.inv-allclear h3 { margin: var(--hr-space-2) 0 4px; color: var(--hr-text); font-size: var(--hr-font-lg); }
.inv-allclear p { margin: 0; font-size: var(--hr-font-base); }

/* --------------------------------------------------------------------- */
/* Ordering                                                               */
/* --------------------------------------------------------------------- */

.inv-order {
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    margin-bottom: var(--hr-space-4);
    overflow: hidden;
}

.inv-order__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hr-space-3);
    flex-wrap: wrap;
    padding: var(--hr-space-3) var(--hr-space-4);
    background: var(--hr-bg-subtle);
    border-bottom: 1px solid var(--hr-border);
}

.inv-order__head h3 { margin: 0; font-size: var(--hr-font-md); }
.inv-order__head-actions { display: flex; gap: var(--hr-space-2); }
.inv-order__list { list-style: none; margin: 0; padding: 0; }

.inv-order__row {
    display: flex;
    align-items: center;
    gap: var(--hr-space-3);
    padding: 8px var(--hr-space-4);
    font-size: var(--hr-font-base);
}

.inv-order__row + .inv-order__row { border-top: 1px solid var(--hr-border); }
.inv-order__name { flex: 1 1 auto; font-weight: 600; }
.inv-order__have { color: var(--hr-text-muted); }
.inv-order__qty { font-weight: 700; color: var(--hr-status-reorder); white-space: nowrap; }

.inv-order__badge {
    font-size: var(--hr-font-sm);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--hr-radius-pill);
    white-space: nowrap;
}

.inv-order__badge.is-ready { background: var(--hr-status-ok-soft); color: var(--hr-status-ok); }
.inv-order__badge.is-short { background: var(--hr-status-low-soft); color: var(--hr-warning); }
.inv-order__badge.is-none  { background: var(--hr-bg-muted); color: var(--hr-text-muted); }

/* Vendor cards — one card for product brands and supply vendors alike */

.inv-order-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--hr-space-3);
}

.inv-order-card {
    border: 1px solid var(--hr-border);
    border-left: 3px solid var(--hr-border-strong);
    border-radius: var(--hr-radius-lg);
    background: var(--hr-bg);
    padding: var(--hr-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--hr-space-3);
}

.inv-order-card.is-ready { border-left-color: var(--hr-status-ok); }

.inv-order-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hr-space-2);
    cursor: pointer;
}

.inv-order-card__head h3 { margin: 0; font-size: var(--hr-font-md); font-weight: 700; }
.inv-order-card__head p { margin: 2px 0 0; font-size: var(--hr-font-sm); }

.inv-order-card__stats { display: flex; gap: var(--hr-space-5); }
.inv-order-card__value { display: block; font-size: var(--hr-font-lg); font-weight: 700; }
.inv-order-card__label { display: block; font-size: var(--hr-font-sm); color: var(--hr-text-muted); }

.inv-order-card__foot { display: flex; gap: var(--hr-space-2); margin-top: auto; }
.inv-order-card__foot .inv-btn { flex: 1 1 auto; justify-content: center; }

/* Progress toward a vendor minimum */

.inv-order__progress { display: grid; gap: 4px; }

.inv-order__progress-head {
    display: flex;
    justify-content: space-between;
    gap: var(--hr-space-2);
    font-size: var(--hr-font-sm);
    color: var(--hr-text-muted);
}

.inv-order__progress-bar {
    height: 8px;
    background: var(--hr-bg-muted);
    border-radius: var(--hr-radius-pill);
    overflow: hidden;
}

.inv-order__progress-bar span {
    display: block;
    height: 100%;
    transition: width 0.2s ease;
}

.inv-order__progress-bar .is-low      { background: var(--hr-status-out); }
.inv-order__progress-bar .is-medium   { background: var(--hr-warning); }
.inv-order__progress-bar .is-high     { background: var(--hr-primary); }
.inv-order__progress-bar .is-complete { background: var(--hr-status-ok); }

/* Order detail modal */

.inv-modal__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    width: min(920px, calc(100% - 32px));
    max-height: 88vh;
    overflow-y: auto;
    background: var(--hr-bg);
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-shadow-lg);
    padding: var(--hr-space-4);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.inv-modal.is-open .inv-modal__panel { opacity: 1; transform: translate(-50%, -50%); }

.inv-modal__foot {
    display: flex;
    gap: var(--hr-space-2);
    justify-content: flex-end;
    padding-top: var(--hr-space-3);
    border-top: 1px solid var(--hr-border);
    margin-top: var(--hr-space-4);
}

.inv-order-detail__contact {
    margin: 0 0 var(--hr-space-3);
    font-size: var(--hr-font-base);
}

.inv-linkbtn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--hr-primary-strong);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.inv-order-detail__wrap { overflow-x: auto; }

.inv-order-detail {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--hr-font-base);
}

.inv-order-detail th {
    text-align: left;
    font-size: var(--hr-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hr-text-muted);
    font-weight: 700;
    padding: 6px 10px;
    border-bottom: 1px solid var(--hr-border);
    white-space: nowrap;
}

.inv-order-detail td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--hr-border);
    vertical-align: middle;
}

.inv-order-detail tbody tr:hover { background: var(--hr-bg-subtle); }

/* Numbers line up on the right so magnitudes are comparable down a column. */
.inv-order-detail .inv-num { text-align: right; white-space: nowrap; }
.inv-order-detail th.inv-num { text-align: right; }

/* The item column absorbs the slack; everything else stays at its content width. */
.inv-order-detail__itemcol { width: 100%; }
.inv-order-detail__ordercol { text-align: center; width: 1%; }
.inv-order-detail__order { text-align: center; width: 1%; }

.inv-order-detail__name { display: block; font-weight: 600; }

.inv-order-detail__sub {
    display: block;
    font-size: var(--hr-font-sm);
    color: var(--hr-text-muted);
}

.inv-order-qty {
    width: 88px;
    padding: 6px 8px;
    border: 1px solid var(--hr-border-strong);
    border-radius: var(--hr-radius);
    font-size: var(--hr-font-md);
    font-weight: 700;
    text-align: right;
    background: var(--hr-bg);
}

.inv-order-qty:focus {
    border-color: var(--hr-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--hr-primary-soft);
}

.inv-order-qty.is-invalid {
    border-color: var(--hr-status-out);
    background: var(--hr-status-out-soft);
}

.inv-order-detail__hint {
    display: block;
    font-size: var(--hr-font-xs);
    color: var(--hr-text-muted);
    margin-top: 2px;
}

.inv-order-detail__coverage { font-weight: 600; white-space: nowrap; }
.inv-order-detail__coverage.is-good     { color: var(--hr-status-ok); }
.inv-order-detail__coverage.is-warning  { color: var(--hr-warning); }
.inv-order-detail__coverage.is-critical { color: var(--hr-status-out); }

.inv-order-detail__line { font-weight: 600; }

.inv-order-detail tfoot td {
    border-bottom: 0;
    border-top: 2px solid var(--hr-border-strong);
    background: var(--hr-bg-subtle);
    padding-top: 10px;
    padding-bottom: 10px;
}

.inv-order-detail__totallabel {
    text-align: right;
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--hr-font-xs);
    letter-spacing: 0.04em;
    color: var(--hr-text-muted);
}

.inv-order-detail__total {
    font-weight: 700;
    font-size: var(--hr-font-lg);
    color: var(--hr-success);
    white-space: nowrap;
    text-align: right;
}

.inv-order-detail__notes {
    margin-top: var(--hr-space-4);
    padding: var(--hr-space-3);
    background: var(--hr-status-low-soft);
    border-radius: var(--hr-radius);
}

.inv-order-detail__notes h4 { margin: 0 0 4px; font-size: var(--hr-font-base); }
.inv-order-detail__notes p { margin: 0; font-size: var(--hr-font-base); }

.inv-panel__head-actions {
    display: flex;
    align-items: center;
    gap: var(--hr-space-2);
    flex-wrap: wrap;
}

#inv-sales-period-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--hr-space-2);
    font-size: var(--hr-font-sm);
}

/* --------------------------------------------------------------------- */
/* Counts — built for a phone in a stockroom                              */
/* --------------------------------------------------------------------- */

.inv-count-setup {
    display: flex;
    align-items: flex-end;
    gap: var(--hr-space-3);
    flex-wrap: wrap;
    padding: var(--hr-space-4);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    background: var(--hr-bg-subtle);
    margin-bottom: var(--hr-space-4);
}

.inv-count-setup .inv-form__field { margin-bottom: 0; min-width: 200px; }

/* How-to guide: closed by default so it never pushes the count list down. */
.inv-count-guide {
    background: var(--hr-bg);
    border: 1px solid var(--hr-border);
    border-left: 3px solid var(--hr-primary-strong);
    border-radius: var(--hr-radius);
    padding: var(--hr-space-3) var(--hr-space-4);
    margin-bottom: var(--hr-space-4);
    font-size: var(--hr-font-base);
}

.inv-count-guide summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--hr-primary-strong);
}

.inv-count-guide__body { margin-top: var(--hr-space-3); max-width: 72ch; }
.inv-count-guide__body section + section { margin-top: var(--hr-space-4); }
.inv-count-guide__body h4 { margin: 0 0 var(--hr-space-2); font-size: var(--hr-font-base); }
.inv-count-guide__body p { margin: var(--hr-space-2) 0 0; }
.inv-count-guide__body ul,
.inv-count-guide__body ol { margin: 0; padding-left: 1.4em; }
.inv-count-guide__body li { margin-bottom: 6px; line-height: 1.45; }
.inv-count-guide__body li ul { margin-top: 6px; }

.inv-count-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hr-space-3);
    margin-bottom: var(--hr-space-3);
}

.inv-count-head h3 { margin: 0; font-size: var(--hr-font-lg); }
.inv-count-head p { margin: 2px 0 0; font-size: var(--hr-font-sm); }

.inv-count-progress {
    display: flex;
    align-items: center;
    gap: var(--hr-space-3);
    margin-bottom: var(--hr-space-4);
    position: sticky;
    top: 0;
    background: var(--hr-bg);
    padding: var(--hr-space-2) 0;
    z-index: 2;
}

.inv-count-progress__bar {
    flex: 1 1 auto;
    height: 8px;
    background: var(--hr-bg-muted);
    border-radius: var(--hr-radius-pill);
    overflow: hidden;
}

.inv-count-progress__bar span {
    display: block;
    height: 100%;
    background: var(--hr-primary);
    transition: width 0.2s ease;
}

.inv-count-progress__text {
    font-size: var(--hr-font-sm);
    font-weight: 600;
    color: var(--hr-text-muted);
    white-space: nowrap;
}

.inv-count-list { list-style: none; margin: 0 0 var(--hr-space-4); padding: 0; }

.inv-count-row {
    display: flex;
    align-items: center;
    gap: var(--hr-space-3);
    padding: var(--hr-space-3);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    margin-bottom: var(--hr-space-2);
    border-left-width: 3px;
    border-left-color: var(--hr-border);
}

.inv-count-row.is-counted { border-left-color: var(--hr-status-ok); background: var(--hr-bg-subtle); }
.inv-count-row.is-over { border-left-color: var(--hr-primary); }
.inv-count-row.is-short { border-left-color: var(--hr-status-out); }

.inv-count-row__main { flex: 1 1 auto; min-width: 0; }
.inv-count-row__name { display: block; font-weight: 600; }
.inv-count-row__meta { display: block; font-size: var(--hr-font-sm); color: var(--hr-text-muted); }

.inv-count-row__input {
    display: flex;
    align-items: center;
    gap: var(--hr-space-2);
    flex-shrink: 0;
}

.inv-count-input {
    width: 84px;
    padding: 10px;
    font-size: var(--hr-font-lg);
    font-weight: 700;
    text-align: center;
    border: 1px solid var(--hr-border-strong);
    border-radius: var(--hr-radius);
    background: var(--hr-bg);
}

.inv-count-row__diff { font-weight: 700; font-size: var(--hr-font-sm); min-width: 38px; }
.inv-count-row.is-over .inv-count-row__diff { color: var(--hr-primary-strong); }
.inv-count-row.is-short .inv-count-row__diff { color: var(--hr-status-out); }

.inv-count-actions {
    display: flex;
    gap: var(--hr-space-2);
    position: sticky;
    bottom: 0;
    background: var(--hr-bg);
    padding: var(--hr-space-3) 0;
    border-top: 1px solid var(--hr-border);
}

.inv-count-actions .inv-btn { flex: 1 1 0; justify-content: center; }
.inv-count-actions .inv-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.inv-count-history { list-style: none; margin: 0; padding: 0; }

.inv-count-history__row {
    display: flex;
    align-items: baseline;
    gap: var(--hr-space-3);
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid var(--hr-border);
    font-size: var(--hr-font-base);
}

.inv-count-history__open {
    display: flex;
    align-items: baseline;
    gap: var(--hr-space-3);
    flex-wrap: wrap;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 4px 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.inv-count-history__open:hover { color: var(--hr-primary-strong); }
.inv-count-history__where { font-weight: 600; flex: 1 1 auto; }
.inv-count-history__stats { color: var(--hr-text-muted); }
.inv-count-history__meta { font-size: var(--hr-font-sm); color: var(--hr-text-faint); }
.inv-count-off { color: var(--hr-status-out); }

.inv-count-detail__filter { margin: 0 0 var(--hr-space-3); }

.inv-count-detail tbody tr.is-over td { background: var(--hr-primary-soft); }
.inv-count-detail tbody tr.is-short td { background: var(--hr-status-out-soft); }

.inv-count-detail__diff { font-weight: 700; }
.inv-count-detail tr.is-over .inv-count-detail__diff { color: var(--hr-primary-strong); }
.inv-count-detail tr.is-short .inv-count-detail__diff { color: var(--hr-status-out); }

/* --------------------------------------------------------------------- */
/* Items & Settings cards                                                 */
/* --------------------------------------------------------------------- */

.inv-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--hr-space-3);
}

.inv-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    padding: var(--hr-space-4);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    background: var(--hr-bg);
    cursor: pointer;
    color: inherit;
}

.inv-card:hover { border-color: var(--hr-primary); background: var(--hr-primary-soft); }
.inv-card--static { cursor: default; }
.inv-card--static:hover { border-color: var(--hr-border); background: var(--hr-bg); }
.inv-card__icon { font-size: var(--hr-font-xl); }
.inv-card__title { font-weight: 700; font-size: var(--hr-font-md); }
.inv-card__body { font-size: var(--hr-font-base); color: var(--hr-text-muted); }

/* --------------------------------------------------------------------- */
/* Detail drawer                                                          */
/* --------------------------------------------------------------------- */

/* Overlays are re-parented to <body> at boot — see portalOverlays() in
   inventory-app.js — because `position: fixed` silently degrades to
   page-anchored under any transformed ancestor. This wrapper holds them there
   and must stay layout-neutral. */
.inv-app--overlays { display: contents; }

.inv-drawer { position: fixed; inset: 0; z-index: 99998; pointer-events: none; }
.inv-drawer.is-open { pointer-events: auto; }

.inv-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.inv-drawer.is-open .inv-drawer__scrim { opacity: 1; }

.inv-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(420px, 100%);
    background: var(--hr-bg);
    box-shadow: var(--hr-shadow-lg);
    padding: var(--hr-space-4);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.2s ease;
}

.inv-drawer.is-open .inv-drawer__panel { transform: translateX(0); }

/* Lock both: whichever element is the scroll container varies by theme, and
   locking only <body> leaves the page scrolling under an open overlay. */
html.inv-drawer-open,
body.inv-drawer-open { overflow: hidden; }

.inv-drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hr-space-3);
    margin-bottom: var(--hr-space-3);
}

.inv-drawer__title h3 { margin: 0; font-size: var(--hr-font-lg); }
.inv-drawer__title p { margin: 2px 0 0; font-size: var(--hr-font-base); color: var(--hr-text-muted); }

.inv-drawer__close {
    border: 0;
    background: var(--hr-bg-muted);
    width: 30px;
    height: 30px;
    border-radius: var(--hr-radius);
    font-size: var(--hr-font-lg);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.inv-drawer__summary {
    display: flex;
    align-items: center;
    gap: var(--hr-space-3);
    margin-bottom: var(--hr-space-3);
}

.inv-drawer__total { font-weight: 700; }

.inv-drawer__locs { list-style: none; margin: 0 0 var(--hr-space-4); padding: 0; }

.inv-drawer__loc {
    display: flex;
    align-items: baseline;
    gap: var(--hr-space-2);
    padding: 8px 0;
    border-bottom: 1px solid var(--hr-border);
    font-size: var(--hr-font-base);
}

.inv-drawer__loc-name { font-weight: 600; flex: 1 1 auto; }
.inv-drawer__loc-qty { font-weight: 700; }
.inv-drawer__target { font-size: var(--hr-font-sm); color: var(--hr-text-muted); width: 100%; }

.inv-drawer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hr-space-2);
    margin-bottom: var(--hr-space-4);
}

.inv-drawer__readonly { font-size: var(--hr-font-sm); margin: 0 0 var(--hr-space-4); }

/* Inline action form inside the drawer */
.inv-form {
    background: var(--hr-bg-subtle);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    padding: var(--hr-space-3);
    margin-bottom: var(--hr-space-4);
}

.inv-form__title {
    margin: 0 0 var(--hr-space-3);
    font-size: var(--hr-font-base);
    font-weight: 700;
}

.inv-form__field {
    display: block;
    margin-bottom: var(--hr-space-3);
    font-size: var(--hr-font-sm);
    color: var(--hr-text-secondary);
}

.inv-form__field > span { display: block; font-weight: 600; margin-bottom: 4px; }

.inv-form__field input,
.inv-form__field select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--hr-border-strong);
    border-radius: var(--hr-radius);
    font-size: var(--hr-font-md);
    background: var(--hr-bg);
}

.inv-form__field small { display: block; margin-top: 3px; color: var(--hr-text-muted); }

.inv-form__error {
    margin: 0 0 var(--hr-space-2);
    font-size: var(--hr-font-sm);
    color: var(--hr-danger);
    font-weight: 600;
}

.inv-form__actions { display: flex; gap: var(--hr-space-2); }
.inv-form__actions .inv-btn { flex: 1 1 auto; justify-content: center; }

.inv-drawer__heading {
    margin: 0 0 var(--hr-space-2);
    font-size: var(--hr-font-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hr-text-muted);
}

.inv-fields { margin: 0 0 var(--hr-space-4); }

.inv-field {
    display: flex;
    justify-content: space-between;
    gap: var(--hr-space-3);
    padding: 6px 0;
    border-bottom: 1px solid var(--hr-border);
    font-size: var(--hr-font-base);
}

.inv-field dt { color: var(--hr-text-muted); margin: 0; }
.inv-field dd { margin: 0; font-weight: 600; text-align: right; }

.inv-history { list-style: none; margin: 0; padding: 0; }

.inv-history__row {
    padding: 8px 0;
    border-bottom: 1px solid var(--hr-border);
    font-size: var(--hr-font-base);
}

.inv-history__what { font-weight: 600; text-transform: capitalize; }
.inv-history__detail { float: right; font-weight: 700; }
.inv-history__meta { display: block; font-size: var(--hr-font-sm); color: var(--hr-text-muted); }

/* --------------------------------------------------------------------- */
/* Loading / empty / error                                                */
/* --------------------------------------------------------------------- */

.inv-loading,
.inv-empty,
.inv-error {
    text-align: center;
    padding: var(--hr-space-6) var(--hr-space-4);
    color: var(--hr-text-muted);
    font-size: var(--hr-font-base);
}

.inv-loading--sm { padding: var(--hr-space-3); }
.inv-empty__icon { font-size: 28px; display: block; margin-bottom: var(--hr-space-2); }
.inv-error { color: var(--hr-danger); display: grid; gap: var(--hr-space-2); justify-items: center; }

/* --------------------------------------------------------------------- */
/* Mobile — same DOM, different shape                                     */
/* --------------------------------------------------------------------- */

@media (max-width: 768px) {
    .inv-topbar { flex-direction: column; align-items: stretch; }
    .inv-scope { width: 100%; }
    .inv-scope__btn { flex: 1 1 0; }
    .inv-scope__hint { display: none; }

    /* There are only five tabs, so wrap them onto a second row rather than
       hiding some behind a scrollbar we deliberately don't draw. Dropping the
       scroll container also restores unclipped overflow on both axes. */
    .inv-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .inv-tab { padding: 10px 12px; }

    .inv-panel__head { flex-direction: column; align-items: stretch; }
    .inv-search { max-width: none; }

    /* The table becomes a card stack. Each row is a small grid rather than a
       pile of full-width blocks: stacking every cell gave each card five lines
       of mostly-empty width, and the theme's `td` border drew a rule across all
       of them. The grid pairs the short fields up instead.

           [thumb] Ace High - Beard Balm      [ Low ]
                   Regular
           7  [Birm 4] [Fern 3]        Price: $22.00
           Brand: Ace High            0.5/wk · 14 wks
           Details                      [ ✎ Count stock ]
     */
    .inv-table,
    .inv-table tbody,
    .inv-cell {
        display: block;
        width: 100%;
    }

    .inv-table thead { display: none; }

    .inv-app .inv-row {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "item   status"
            "stock  price"
            "brand  meta"
            "act    act";
        gap: var(--hr-space-2) var(--hr-space-3);
        align-items: center;
        border: 1px solid var(--hr-border);
        border-radius: var(--hr-radius-lg);
        margin-bottom: var(--hr-space-3);
        padding: var(--hr-space-3);
    }

    /* Themes routinely give every `td` a bottom border. Harmless in a table,
       but in card mode each cell is full width, so it ruled off every line. */
    .inv-app .inv-cell { border: 0; padding: 0; }

    .inv-app .inv-cell--item { grid-area: item; min-width: 0; }
    .inv-app .inv-cell--status { grid-area: status; justify-self: end; }
    .inv-app .inv-cell--brand { grid-area: brand; }

    /* Labelled, because "Price" and "Est. cost" are not the same claim and the
       column header that told them apart is gone in card mode. */
    .inv-app .inv-cell--price {
        grid-area: price;
        justify-self: end;
        text-align: right;
        font-size: var(--hr-font-sm);
        font-weight: 600;
    }

    .inv-cell--price::before {
        content: attr(data-label) ": ";
        font-weight: 400;
        color: var(--hr-text-muted);
    }

    .inv-app .inv-cell--stock {
        grid-area: stock;
        display: flex;
        align-items: center;
        gap: var(--hr-space-2);
        flex-wrap: wrap;
    }

    .inv-app .inv-cell--velocity {
        grid-area: meta;
        justify-self: end;
        text-align: right;
        font-size: var(--hr-font-sm);
        color: var(--hr-text-muted);
    }

    .inv-forecast { display: inline; margin-left: 6px; }

    /* Card mode: label the brand inline rather than losing it with the header. */
    .inv-app .inv-cell--brand {
        max-width: none;
        font-size: var(--hr-font-sm);
        color: var(--hr-text-muted);
    }

    .inv-cell--brand::before {
        content: attr(data-label) ": ";
        font-weight: 600;
    }

    /* Group headers stay full-width bands between the card stacks. */
    .inv-group, .inv-group-row, .inv-group-row td { display: block; width: 100%; }

    .inv-app .inv-group-row td {
        border: 0;
        border-radius: var(--hr-radius);
        margin-bottom: var(--hr-space-2);
    }

    .inv-app .inv-cell--actions {
        grid-area: act;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--hr-space-2);
        border-top: 1px solid var(--hr-border);
        margin-top: var(--hr-space-1);
        padding-top: var(--hr-space-2);
    }

    /* No hover on a touch screen, so the card has to say it opens. */
    .inv-app .inv-row__details {
        display: inline-block;
        font-size: var(--hr-font-sm);
        font-weight: 600;
        color: var(--hr-primary-strong);
    }

    .inv-btn__more { display: inline; }

    /* Comfortable thumb targets: 44px minimum on anything tappable. */
    .inv-app .inv-cell--actions .inv-btn { padding: 10px 16px; min-height: 44px; }
    .inv-app .inv-loc { min-width: 56px; padding: 6px 8px; }
    .inv-app .inv-loc.is-editable { min-height: 44px; justify-content: center; }
    .inv-loc__meta { font-size: 10px; }

    .inv-queue__open { flex-wrap: wrap; }
    .inv-queue__name { flex-basis: 100%; }

    .inv-drawer__panel { width: 100%; }

    /* The order table becomes labelled rows rather than a horizontal scroll. */
    .inv-modal__panel {
        width: 100%;
        height: 100%;
        max-height: none;
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
    }

    .inv-modal.is-open .inv-modal__panel { transform: none; }

    .inv-order-detail thead { display: none; }
    .inv-order-detail,
    .inv-order-detail tbody,
    .inv-order-detail tfoot,
    .inv-order-detail tr,
    .inv-order-detail td { display: block; width: 100%; }

    .inv-order-detail tr {
        border: 1px solid var(--hr-border);
        border-radius: var(--hr-radius);
        padding: var(--hr-space-2);
        margin-bottom: var(--hr-space-2);
    }

    .inv-order-detail td {
        border: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--hr-space-2);
        padding: 4px 0;
    }

    .inv-order-detail td::before {
        content: attr(data-label);
        font-size: var(--hr-font-sm);
        color: var(--hr-text-muted);
    }

    .inv-order-detail td[data-label="Item"] { font-weight: 600; }
    .inv-order-detail td[data-label="Item"]::before { content: none; }

    .inv-order-detail__totallabel { display: none; }
    .inv-order-cards { grid-template-columns: 1fr; }

    /* Counting happens one-handed: bigger targets, nothing side by side. */
    .inv-count-setup { flex-direction: column; align-items: stretch; }
    .inv-count-setup .inv-btn { justify-content: center; }
    .inv-count-input { width: 92px; padding: 12px; font-size: var(--hr-font-xl); }
    .inv-count-row { padding: var(--hr-space-3) var(--hr-space-2); }
    .inv-count-history__row { flex-direction: column; gap: 2px; }
}

/* =========================================================================
   Transfers — the weekly warehouse run
   ========================================================================= */

.inv-transfer-group { margin-bottom: var(--hr-space-5); }

.inv-transfer-group--to_birmingham {
    border-top: 2px dashed var(--hr-border-strong);
    padding-top: var(--hr-space-4);
}

.inv-transfer-category {
    margin: var(--hr-space-4) 0 var(--hr-space-2);
    font-size: var(--hr-font-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hr-text-muted);
}

.inv-transfer-cards {
    display: flex;
    flex-direction: column;
    gap: var(--hr-space-2);
}

.inv-transfer-card {
    display: flex;
    align-items: center;
    gap: var(--hr-space-3);
    padding: var(--hr-space-3);
    background: var(--hr-bg);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-shadow-sm);
}

.inv-transfer-card.is-carted {
    border-color: var(--hr-status-ok);
    background: var(--hr-status-ok-soft);
}

.inv-transfer-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inv-transfer-card__storage {
    font-size: var(--hr-font-sm);
    color: var(--hr-text-muted);
}

.inv-transfer-card__stock {
    font-size: var(--hr-font-base);
    color: var(--hr-text-secondary);
}

.inv-transfer-card__side {
    display: flex;
    align-items: center;
    gap: var(--hr-space-3);
    flex-shrink: 0;
}

.inv-transfer-card__toggle.is-carted {
    border-color: var(--hr-status-ok);
    color: var(--hr-status-ok);
    font-weight: 600;
}

/* Stepper — shared by the cards and the review lines */

.inv-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--hr-border-strong);
    border-radius: var(--hr-radius);
    overflow: hidden;
    background: var(--hr-bg);
}

.inv-stepper__btn {
    border: 0;
    background: var(--hr-bg-subtle);
    width: 36px;
    font-size: var(--hr-font-lg);
    color: var(--hr-text-secondary);
    cursor: pointer;
}

.inv-stepper__btn:hover { background: var(--hr-bg-muted); }

.inv-stepper__input {
    width: 58px;
    border: 0;
    border-left: 1px solid var(--hr-border);
    border-right: 1px solid var(--hr-border);
    text-align: center;
    font-size: var(--hr-font-md);
    font-weight: 600;
    padding: 8px 4px;
    -moz-appearance: textfield;
}

.inv-stepper__input::-webkit-outer-spin-button,
.inv-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Cart bar — fixed so it stays put while walking the basement list */

.inv-app .inv-cartbar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 9800;
    display: flex;
    align-items: center;
    gap: var(--hr-space-4);
    width: min(560px, calc(100% - 24px));
    padding: var(--hr-space-3) var(--hr-space-4);
    background: var(--hr-text);
    color: #fff;
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-shadow-lg);
}

.inv-app .inv-cartbar[hidden] { display: none; }

.inv-cartbar__summary {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--hr-space-2);
    font-size: var(--hr-font-md);
    font-weight: 600;
}

.inv-cartbar__actions {
    display: flex;
    gap: var(--hr-space-2);
}

.inv-app .inv-cartbar .inv-btn--ghost {
    color: #fff;
    border-color: transparent;
    background: transparent;
}

/* Review modal lines */

.inv-transfer-review__line {
    display: flex;
    align-items: center;
    gap: var(--hr-space-3);
    padding: var(--hr-space-2) 0;
    border-bottom: 1px solid var(--hr-border);
}

.inv-transfer-review__line.has-error {
    background: var(--hr-status-out-soft);
    border-radius: var(--hr-radius);
    padding: var(--hr-space-2);
}

.inv-transfer-review__name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inv-transfer-review__error {
    font-size: var(--hr-font-sm);
    color: var(--hr-danger);
}

.inv-app .inv-transfer-review__qty {
    width: 72px;
    border: 1px solid var(--hr-border-strong);
    border-radius: var(--hr-radius);
    padding: 8px 4px;
}

.inv-transfer-review__remove {
    border: 0;
    background: none;
    color: var(--hr-text-faint);
    font-size: var(--hr-font-md);
    cursor: pointer;
    padding: var(--hr-space-2);
}

.inv-transfer-review__remove:hover { color: var(--hr-danger); }

.inv-transfer-review__notelabel {
    display: block;
    margin: var(--hr-space-4) 0 4px;
    font-size: var(--hr-font-sm);
    color: var(--hr-text-muted);
}

.inv-app .inv-transfer-review__note {
    width: 100%;
    border: 1px solid var(--hr-border-strong);
    border-radius: var(--hr-radius);
    padding: 10px 12px;
    font-size: var(--hr-font-base);
}

@media (max-width: 768px) {
    /* Picking happens on a phone: stack the card, keep targets 44px. */
    .inv-transfer-card { flex-wrap: wrap; }
    .inv-transfer-card__info { flex-basis: calc(100% - 52px); }
    .inv-transfer-card__side {
        flex-basis: 100%;
        justify-content: space-between;
    }
    .inv-app .inv-transfer-card__toggle { min-height: 44px; }
    .inv-stepper__btn { width: 44px; }
    .inv-stepper__input { width: 64px; font-size: var(--hr-font-lg); }

    .inv-app .inv-cartbar { bottom: 8px; }
    .inv-cartbar__summary { font-size: var(--hr-font-base); }
}

/* Storage areas — editable chip and walk-order modal */

.inv-app button.inv-transfer-card__storage {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    font-size: var(--hr-font-sm);
    color: var(--hr-text-muted);
    cursor: pointer;
    align-self: flex-start;
}

.inv-app button.inv-transfer-card__storage:hover { color: var(--hr-primary-strong); }

.inv-transfer-card__pencil { color: var(--hr-text-faint); }

.inv-modal__panel--narrow { width: min(480px, calc(100% - 32px)); }

.inv-areas-hint { margin: 0 0 var(--hr-space-3); font-size: var(--hr-font-sm); }

.inv-area-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hr-space-3);
    padding: var(--hr-space-2) 0;
    border-bottom: 1px solid var(--hr-border);
}

.inv-area-row__name {
    font-size: var(--hr-font-md);
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.inv-area-row__btns { display: flex; gap: var(--hr-space-1); flex-shrink: 0; }

.inv-app .inv-area-move { min-width: 44px; min-height: 40px; justify-content: center; }