/* ============================================================================
   S5 — Inventory & purchasing.
   Served as _content/ClientSharedLibrary/css/inventory.css.
   Depends on tokens.css; expects bootstrap-bridge.css to load before it.

   Covers /stock, /Purchase, /addpurchase, /retailer-purchase, /retailers and
   /retailer, plus StockCorrection, AddIngredient, RetailerEdit, TokenAdd,
   TokenAssignModal and RetailerOrderHistory.

   SPECIFICITY — same strategy as every segment since S2. Rules are prefixed
   .mp-inv, added to each page's root, which reaches (0,2,0) and beats a
   component style block at equal weight without a blanket !important. Roots
   carry `class="mp-ui mp-inv"`; .mp-ui pulls in the shared Bootstrap layer.

   WHAT THIS SEGMENT IS FOR
   Counting things and paying for them. Two jobs with different rhythms:

     · /stock is a *reconciliation* screen — someone stands at a shelf with a
       phone, compares a number on screen to a number in front of them, and
       corrects it. Every row is quantity, consumed, balance, days remaining.
       Figures must be comparable down a column, and a balance that has gone
       negative must be impossible to miss.
     · /Purchase and the retailer pages are *money out*. They are read at a
       desk, filtered by date, and reconciled against invoices.

   DENSITY: `compact` on the stock and purchase tables, default elsewhere.

   PRINT IS NOT TOUCHED. `RetailersPage` and `TokenAdd` build a complete invoice
   HTML document as a C# interpolated string, with its own `<style>` (note the
   doubled `{{` braces — that is C# escaping, not CSS). Those are print
   documents on white paper; their literal colours are correct and tokens would
   be wrong on them.
   ========================================================================= */

/* ============================================================================
   1. Page frame
   ========================================================================= */
/* --mp-inv-font carries the business's own UI-size preference
   (_home.fontsize -> 12/16/20/24px), which /stock used to stamp inline on 33
   separate elements — where it also beat this stylesheet, so a sticky column
   heading that wanted 12px rendered at 16px. Set once on the root; everything
   inherits. Same pattern S6 used for the report toolbar. */
.mp-inv {
  font-family: var(--mp-font);
  font-size: var(--mp-inv-font, var(--mp-text-ui));
  color: var(--mp-ink);
}

.mp-inv h2, .mp-inv h4, .mp-inv h5 {
  color: var(--mp-ink);
  font-weight: var(--mp-weight-bold);
  line-height: var(--mp-leading-tight);
}
.mp-inv h2 { font-size: var(--mp-text-xl); }
.mp-inv h4 { font-size: var(--mp-text-lg); }
.mp-inv h5 { font-size: var(--mp-text-md); }

.mp-inv .stock-page-container,
.mp-inv .purchase-page-container {
  padding: 0;
  max-width: none;
}

/* The toolbar above each list (Desktop & Mobile). */
.mp-inv .stock-controls,
.mp-inv .stock-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-2);
  margin-bottom: var(--mp-gap);
  width: 100%;
}

.mp-inv .stock-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mp-space-2);
  width: 100%;
}

.mp-inv .stock-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
  flex-wrap: wrap;
}

.mp-inv .stock-shop-group {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
}

.mp-inv .stock-shop-group .ViewButton {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--mp-control-h);
  font-weight: 600;
  margin: 0;
}

.mp-inv .stock-shop-select-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mp-inv .stock-shop-select-wrap select {
  min-width: 140px;
  height: var(--mp-control-h);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-surface);
  color: var(--mp-ink);
  font-size: var(--mp-text-ui);
  padding: 0 var(--mp-space-2);
}

.mp-inv .stock-action-btns {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
}

.mp-inv .stock-action-btns .btn {
  height: var(--mp-control-h);
  white-space: nowrap;
  padding: 0 var(--mp-space-3);
  font-size: var(--mp-text-ui);
  border-radius: var(--mp-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mp-inv .stock-mode-segmented-wrap {
  display: flex;
  align-items: center;
}

.mp-inv .stock-mode-group {
  display: inline-flex;
  border-radius: var(--mp-radius-sm);
  overflow: hidden;
}

.mp-inv .stock-mode-group .btn {
  height: var(--mp-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0 var(--mp-space-3);
  font-size: var(--mp-text-ui);
}

.mp-inv .stock-search-filter-row {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
  flex-wrap: wrap;
  width: 100%;
}

.mp-inv .stock-search-wrap-mobile {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
  flex: 1 1 240px;
  min-width: 200px;
}

.mp-inv .stock-search-box {
  flex: 1;
  min-width: 0;
}

.mp-inv .stock-search-box .enhanced-search-container {
  margin-bottom: 0;
}

.mp-inv .stock-status-filter-group {
  display: inline-flex;
  border-radius: var(--mp-radius-sm);
  overflow: hidden;
}

.mp-inv .stock-status-filter-group .btn {
  height: var(--mp-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mp-text-ui);
  font-weight: 600;
  white-space: nowrap;
  padding: 0 var(--mp-space-2);
}

.mp-inv .stock-sync-btn {
  height: var(--mp-control-h);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--mp-space-3);
}

/* ============================================================================
   2. The stock table

   `.stock-container` is a div-tree faking a table: display: table /
   table-row / table-cell, with `table-layout: fixed` and `word-break:
   break-word` on every cell. Fixed layout divides the width evenly no matter
   what a column holds, and the break-word then chops whatever does not fit —
   so an ingredient name and a date both get shredded rather than the table
   being allowed to be wider than the screen. It is the same anti-pattern S6
   found on the report table, and it has the same fix: give the thing a real
   scroll box and let the columns size to their content.

   That also removes the reason for the manual "Desktop View / Mobile View"
   button at the top of the page. The button is left alone — it switches more
   than layout — but the table no longer depends on it to be readable.
   ========================================================================= */
.mp-inv .stock-table-scroll {
  overflow: auto;
  max-height: calc(100dvh - 260px);
  overscroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  background: var(--mp-surface);
  margin-bottom: var(--mp-gap);
}

.mp-inv .stock-container {
  display: table;
  width: 100%;
  min-width: 860px;
  margin: 0;
  border-collapse: collapse;
  table-layout: auto;              /* was `fixed` — see the note above */
  /* inherit, not var(--mp-text-ui): the density token would otherwise override
     the business's own UI-size preference, which is an accessibility setting
     and has to win. Density still governs control heights and padding. */
  font-size: inherit;
  color: var(--mp-ink-2);
}

.mp-inv .stock-header {
  display: table-row;
  font-weight: var(--mp-weight-bold);
  text-align: left;
}

/* The header row is sticky inside the scroll box. A stock count runs to
   hundreds of ingredients and a column heading that scrolls away takes the
   meaning of its column with it — "142" is useless without "Balance". */
.mp-inv .stock-header .stock-column {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--mp-surface-2);
  color: var(--mp-muted);
  font-size: .78em;                 /* scales with the preference, stays a label */
  font-weight: var(--mp-weight-bold);
  letter-spacing: var(--mp-track-label);
  text-transform: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--mp-line-strong);
}

.mp-inv .stock-body { display: table-row-group; }

.mp-inv .stock-row {
  display: table-row;
  border-bottom: 1px solid var(--mp-line);
}
.mp-inv .stock-row:hover .stock-column { background: var(--mp-surface-2); }

.mp-inv .stock-column {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  padding: var(--mp-space-2) var(--mp-space-3);
  font-size: inherit;
  line-height: var(--mp-leading-tight);
  border-right: none;
  border-bottom: 1px solid var(--mp-line);
  /* Names may wrap; they must not be chopped mid-word. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}
.mp-inv .stock-column:last-child { border-right: none; }

/* Figures. Quantity, consumed, balance and days are read as a column, so they
   are set in the tabular face and right-aligned. */
.mp-inv .stock-column.num,
.mp-inv .stock-column .figure {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* A negative or zero balance is the whole point of the screen. */
.mp-inv .stock-low { color: var(--mp-warn); font-weight: var(--mp-weight-bold); }
.mp-inv .stock-out {
  color: var(--mp-danger);
  font-weight: var(--mp-weight-bold);
}
.mp-inv .stock-row.is-out .stock-column:first-child { box-shadow: inset 3px 0 0 var(--mp-danger); }
.mp-inv .stock-row.is-low .stock-column:first-child { box-shadow: inset 3px 0 0 var(--mp-warn); }

/* Available Days. The markup used to carry an inline `color: black` here, which
   is invisible on the dark ground; the urgency now comes from a class so both
   themes resolve it from tokens. Days is a figure column like the rest. */
.mp-inv .days {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.mp-inv .days.is-urgent { color: var(--mp-danger); font-weight: var(--mp-weight-bold); }

/* Column alignment rules for both headers and cells */
.mp-inv .stock-column.text-center,
.mp-inv .stock-header .stock-column.text-center {
  text-align: center;
}

.mp-inv .stock-column.text-end,
.mp-inv .stock-header .stock-column.text-end,
.mp-inv .stock-header .stock-column.num,
.mp-inv .stock-header .stock-column.days {
  text-align: right;
}

.mp-inv .stock-column.text-start,
.mp-inv .stock-header .stock-column.text-start {
  text-align: left;
}

.mp-inv .stock-column.col-sno {
  width: 65px;
  min-width: 55px;
  text-align: center;
}

.mp-inv .stock-column.col-name {
  min-width: 180px;
  text-align: left;
}

.mp-inv .stock-column.col-unit {
  width: 90px;
  min-width: 75px;
  text-align: center;
}

.mp-inv .stock-column.col-qty,
.mp-inv .stock-column.col-consumed,
.mp-inv .stock-column.col-balance,
.mp-inv .stock-column.col-price {
  width: 120px;
  min-width: 100px;
  text-align: right;
}

.mp-inv .stock-column.col-date {
  width: 140px;
  min-width: 125px;
  text-align: center;
}

.mp-inv .stock-column.col-days {
  width: 120px;
  min-width: 100px;
  text-align: right;
}

.mp-inv .stock-column.col-actions {
  width: 120px;
  min-width: 100px;
  text-align: center;
  white-space: nowrap;
}

/* Specific inline container for action buttons in table cells */
.mp-inv .stock-column .stock-action-buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
}

.mp-inv .stock-column .stock-action-buttons button,
.mp-inv .stock-column .stock-action-buttons .btn {
  width: auto;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mp-text-ui);
}

.mp-inv .stock-column input,
.mp-inv .stock-column select,
.mp-inv .stock-column > button:not(.btn-sm) {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--mp-control-h);
  font-size: var(--mp-text-ui);
  padding: 0 var(--mp-space-2);
  margin: 0;
}
.mp-inv .stock-column input[type="date"],
.mp-inv .stock-column input[type="time"] {
  font-family: var(--mp-font-num);
  min-width: 8.5rem;
}
.mp-inv .stock-column > * { overflow-wrap: break-word; }

/* ============================================================================
   3. Search box (shared by /stock and /Purchase)
   ========================================================================= */
.mp-inv .enhanced-search-container { margin-bottom: var(--mp-gap); }

.mp-inv .search-wrapper {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
  background: var(--mp-surface);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  min-height: var(--mp-control-h);
  padding: 0 var(--mp-space-3);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mp-inv .search-wrapper:focus-within {
  border-color: var(--mp-accent);
  box-shadow: var(--mp-focus);
}
.mp-inv .search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--mp-ink);
  font-family: inherit;
  font-size: var(--mp-text-ui);
  padding: 0;
}
.mp-inv .search-input::placeholder { color: var(--mp-muted); opacity: 1; }
.mp-inv .search-input:focus { box-shadow: none; }
.mp-inv .search-icon { color: var(--mp-muted); flex-shrink: 0; }
.mp-inv .clear-button {
  background: none;
  border: none;
  color: var(--mp-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
}
.mp-inv .clear-button:hover { color: var(--mp-ink); }
.mp-inv .clear-button:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }

/* ============================================================================
   4. Purchase list and its filter panel

   The filter panel had SIX generations of rules stacked in the page — a
   `.filter-panel` block, then a second one, then `.filter-card`, then a
   `/* Modern filter card styles */` `.filter-card-modern`, each redeclaring
   the same labels and controls, with only the last winning. Same accretion
   pattern as the chart ticks in S6: when a rule appears not to work, the next
   person writes another one rather than finding out why. One definition here,
   applying to every generation of the class name so whichever the markup uses
   is styled.
   ========================================================================= */
.mp-inv .filter-panel,
.mp-inv .filter-card,
.mp-inv .filter-card-modern {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-sm);
  padding: var(--mp-pad-card);
  margin-bottom: var(--mp-gap);
}
.mp-inv .filter-panel .card,
.mp-inv .filter-card .card {
  background: none;
  border: none;
  box-shadow: none;
  margin: 0;
}

.mp-inv .filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-3);
  padding: 0 0 var(--mp-space-3);
  margin-bottom: var(--mp-space-4);
  border-bottom: 1px solid var(--mp-line);
  background: none;
}
.mp-inv .filter-title {
  font-size: var(--mp-text-md);
  font-weight: var(--mp-weight-bold);
  color: var(--mp-ink);
  margin: 0;
}
.mp-inv .filter-reset {
  background: none;
  border: none;
  color: var(--mp-accent);
  font-size: var(--mp-text-sm);
  cursor: pointer;
  padding: 0;
}
.mp-inv .filter-reset:hover { color: var(--mp-accent-hover); text-decoration: underline; }
.mp-inv .filter-reset:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }

.mp-inv .filter-panel label,
.mp-inv .filter-body .form-label {
  color: var(--mp-ink-2);
  font-size: var(--mp-text-sm);
  font-weight: var(--mp-weight-medium);
  margin-bottom: var(--mp-space-1);
}

.mp-inv .filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  min-height: var(--mp-control-h);
  padding: 0 var(--mp-space-3);
  background: var(--mp-surface);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  color: var(--mp-ink-2);
  cursor: pointer;
}
.mp-inv .filter-toggle:hover { background: var(--mp-surface-2); color: var(--mp-ink); }

.mp-inv .date-range-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mp-space-2);
}
.mp-inv .date-range-container input[type="date"] {
  font-family: var(--mp-font-num);
  min-width: 9.5rem;
  flex: 1 1 9.5rem;
}

/* The desktop/mobile picker at the top of /Purchase. It is a segmented
   control, so it reads as one control with a selected segment rather than as
   two independent cards. */
.mp-inv .view-switcher {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  background: var(--mp-surface-2);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-sm);
}
.mp-inv .view-option {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
  min-height: var(--mp-control-h);
  padding: 0 var(--mp-space-4);
  background: none;
  border: none;
  border-radius: calc(var(--mp-radius-sm) - 1px);
  color: var(--mp-ink-2);
  font-size: var(--mp-text-ui);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.mp-inv .view-option:hover { color: var(--mp-ink); }
.mp-inv .view-option.active {
  background: var(--mp-surface);
  color: var(--mp-accent);
  font-weight: var(--mp-weight-bold);
  box-shadow: var(--mp-shadow-sm);
}
.mp-inv .view-option .icon-container { display: flex; align-items: center; }

.mp-inv .pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--mp-space-2);
  padding: var(--mp-space-4) 0;
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  color: var(--mp-ink-2);
}

.mp-inv .bottom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-space-2);
  padding: var(--mp-space-4) 0;
}

/* ============================================================================
   5. Retailer pages and order history
   ========================================================================= */
.mp-inv .order-history-container {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  padding: var(--mp-pad-card);
  margin-bottom: var(--mp-gap);
}
.mp-inv .order-history-container.compact { padding: var(--mp-space-4); }

/* Money columns in every retailer table. */
.mp-inv .amount,
.mp-inv td.text-end,
.mp-inv th.text-end {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   6. Buttons the pages cloned instead of using

   `.btny`, `.btn-outline-primaryy` and `.btn1` are hand-made near-copies of
   Bootstrap classes, with the doubled letters that give them away. They exist
   because /stock's own style block declared a bare, unscoped `.btn { min-height:
   44px; padding: 10px 15px }` which broke the real ones — so rather than remove
   that rule, someone made a parallel set of buttons with almost-the-same names.
   The bare `.btn` override is gone; these are pointed at the same tokens as
   every other button so the two sets are indistinguishable, and new markup
   should just use `.btn`.
   ========================================================================= */
.mp-inv .btny,
.mp-inv .btn1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-2);
  min-height: var(--mp-control-h);
  padding: 0 var(--mp-space-4);
  border-radius: var(--mp-radius-sm);
  border: 1px solid var(--mp-line-strong);
  background: var(--mp-surface);
  color: var(--mp-ink);
  font-family: inherit;
  font-size: var(--mp-text-ui);
  font-weight: var(--mp-weight-medium);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.mp-inv .btny:hover,
.mp-inv .btn1:hover { background: var(--mp-surface-2); }
.mp-inv .btny:focus-visible,
.mp-inv .btn1:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }

.mp-inv .btn-outline-primaryy {
  background: transparent;
  border: 1px solid var(--mp-accent);
  color: var(--mp-accent);
}
.mp-inv .btn-outline-primaryy:hover,
.mp-inv .btn-outline-primaryy.active,
.mp-inv .btn-outline-primaryy:active {
  background: var(--mp-accent);
  border-color: var(--mp-accent);
  color: var(--mp-accent-ink);
}
.mp-inv .btn-outline-primaryy:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; box-shadow: none; }
.mp-inv .btn-outline-primaryy:disabled,
.mp-inv .btn-outline-primaryy.disabled { opacity: .55; pointer-events: none; }

/* The segmented radio group on /stock. */
.mp-inv .btn-group .btny { border-radius: 0; }
.mp-inv .btn-group .btny:first-of-type { border-radius: var(--mp-radius-sm) 0 0 var(--mp-radius-sm); }
.mp-inv .btn-group .btny:last-of-type  { border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0; }
.mp-inv .btn-group input[type="radio"].btn-check:checked + label.btny {
  background: var(--mp-accent);
  border-color: var(--mp-accent);
  color: var(--mp-accent-ink);
}

/* .ViewButton is the Desktop/Mobile toggle. It was .btn-warning — an amber
   fill, which in this palette means "needs attention". It is a view preference. */
.mp-inv .ViewButton {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line-strong);
  color: var(--mp-ink-2);
}
.mp-inv .ViewButton:hover { background: var(--mp-surface-2); color: var(--mp-ink); }

/* The tick that confirms a consumption entry. */
.mp-inv .consumption-check-icon {
  color: var(--mp-good);
  cursor: pointer;
  transition: transform .1s ease;
}
.mp-inv .consumption-check-icon:hover { color: var(--mp-good); filter: brightness(1.1); }
.mp-inv .consumption-check-icon:active { transform: scale(.94); }

/* ============================================================================
   7. Image preview (purchase invoices attached to a stock entry)
   ========================================================================= */
.mp-inv .image-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-space-2);
}
.mp-inv .image-thumbnail {
  width: 56px;
  height: 56px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-sm);
  overflow: hidden;
  background: var(--mp-surface-2);
  cursor: pointer;
}
.mp-inv .image-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-inv .image-full-preview {
  position: fixed;
  inset: 0;
  z-index: var(--mp-z-overlay);
  background: rgba(9, 12, 17, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mp-space-4);
}
.mp-inv .image-full-preview img { max-width: 92vw; max-height: 88vh; object-fit: contain; }

/* ============================================================================
   8. Loading and empty states
   ========================================================================= */
.mp-inv .loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-3);
  padding: var(--mp-space-6);
}
.mp-inv .loading-spinner,
.mp-inv .spinner { border-color: var(--mp-line); border-top-color: var(--mp-accent); }
.mp-inv .loading-text { color: var(--mp-muted); font-size: var(--mp-text-ui); margin: 0; }
.mp-inv .loading-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--mp-bg) 78%, transparent);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--mp-z-overlay);
}
.mp-inv .loading-overlay.show { display: flex; }

/* ============================================================================
   9. Responsive
   ========================================================================= */
@media (max-width: 767.98px) {
  .mp-inv .stock-table-scroll {
    max-height: calc(100dvh - 200px);
    overscroll-behavior: auto;
    touch-action: pan-x pan-y;
  }
  .mp-inv .stock-column { padding: var(--mp-space-2); }
  .mp-inv .view-switcher { width: 100%; }
  .mp-inv .view-option { flex: 1; justify-content: center; padding: 0 var(--mp-space-2); }
  .mp-inv .filter-panel,
  .mp-inv .filter-card,
  .mp-inv .filter-card-modern { padding: var(--mp-space-3); }
  .mp-inv .bottom-actions > * { flex: 1 1 auto; }

  /* Responsive Stock Toolbar for Mobile */
  .mp-inv .stock-toolbar {
    gap: var(--mp-space-2);
  }

  .mp-inv .stock-toolbar-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mp-space-2);
  }

  .mp-inv .stock-shop-group {
    width: 100%;
    display: flex;
    gap: var(--mp-space-2);
  }

  .mp-inv .stock-shop-group .ViewButton {
    flex: 0 0 auto;
    font-size: 13px;
  }

  .mp-inv .stock-shop-select-wrap {
    flex: 1;
    min-width: 0;
  }

  .mp-inv .stock-shop-select-wrap select {
    width: 100%;
    min-width: 0;
  }

  .mp-inv .stock-action-btns {
    width: 100%;
    display: flex;
    gap: var(--mp-space-2);
  }

  .mp-inv .stock-action-btns .btn {
    flex: 1 1 50%;
    font-size: 12px;
    padding: 0 var(--mp-space-2);
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mp-inv .stock-mode-segmented-wrap {
    width: 100%;
  }

  .mp-inv .stock-mode-group {
    width: 100%;
    display: flex;
  }

  .mp-inv .stock-mode-group .btn {
    flex: 1 1 33.33%;
    font-size: 13px;
    padding: 0 var(--mp-space-1);
  }

  .mp-inv .stock-search-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mp-space-2);
  }

  .mp-inv .stock-search-wrap-mobile {
    display: flex;
    gap: var(--mp-space-2);
    width: 100%;
  }

  .mp-inv .stock-search-box {
    flex: 1;
    min-width: 0;
  }

  .mp-inv .stock-sync-btn {
    flex: 0 0 auto;
    padding: 0 var(--mp-space-2);
  }

  .mp-inv .stock-status-filter-group {
    width: 100%;
    display: flex;
  }

  .mp-inv .stock-status-filter-group .btn {
    flex: 1 1 25%;
    font-size: 11px;
    padding: 0 var(--mp-space-1);
    white-space: nowrap;
  }
}