/* Mobile rules for the warehouse cluster — scoped to @media (max-width: 720px) */

@media (max-width: 720px) {

  /* ============================================================
     WAREHOUSE — page scaffold
     ============================================================ */

  /* One page-level scroll: header, scan bar and filters flow away as you
     scroll the list; only the kind tabs stay pinned (sticky below). */
  .warehouse {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .warehouse-body {
    flex: 0 0 auto;
    overflow: visible;
    min-height: 0;
  }
  .warehouse-tabs {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--surface);
  }

  /* Header: compact — selector + stat chips flow, actions on one row */
  .warehouse-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }

  .warehouse-header .wh-select select {
    min-width: 0;
    width: 100%;
  }

  /* Stat pills: sit in a horizontal row that wraps naturally */
  .warehouse-header .wh-stat {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-left: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
  }

  .warehouse-header .wh-stat .k {
    font-size: 9.5px;
  }

  .warehouse-header .wh-stat strong {
    font-size: 14px;
  }

  /* Push New-item and Select to line below if they don't fit */
  .warehouse-header .spacer {
    flex-basis: 100%;
    height: 0;
    order: 10;
  }

  .warehouse-header .btn {
    flex: 1 1 auto;
    order: 11;
    min-height: 40px;
    justify-content: center;
  }

  /* ============================================================
     WAREHOUSE — tabs
     ============================================================ */

  .warehouse-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px;
    gap: 0;
    /* no wrapping — let it scroll */
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .warehouse-tabs::-webkit-scrollbar { display: none; }

  .warehouse-tabs .tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 14px;
    font-size: 13px;
  }

  /* ============================================================
     WAREHOUSE — filter bar
     ============================================================ */

  .warehouse-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px;
  }

  /* Category chip row: one horizontal scroller, no visible scrollbar, and the
     desktop "More" overflow control stays hidden (layoutCategoryChips bails on
     mobile). "All categories" pinned first, real categories scroll after it. */
  .warehouse-filter .cat-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Reset the desktop `flex: 1 1 0`: in the mobile column-flex filter bar a
       flex-basis of 0 collapses the row's height to nothing. Size to content. */
    flex: 0 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding: 2px 0;
    border-right: none;
    border-bottom: none;
    min-width: 0;
  }
  .warehouse-filter .cat-wrap::-webkit-scrollbar { display: none; }

  .warehouse-filter .cat-chips {
    overflow: visible;
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .warehouse-filter .cat-more { display: none; }

  /* Right-side controls stack vertically */
  .warehouse-filter .filter-right {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .warehouse-filter .search {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .warehouse-filter .scope-toggle {
    font-size: 13px;
  }

  /* Attention chips: also horizontal scrollable row */
  .warehouse-filter .chips {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .warehouse-filter .chip {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  /* ============================================================
     WAREHOUSE — item list (tabs: items / prefabs / sellables)
     ============================================================ */

  .warehouse-body {
    padding: 12px 14px;
  }

  /* Hide the desktop column header — replaced by card layout */
  .item-list-head {
    display: none;
  }

  /* Each item row: flex wrap so content stacks on small screens */
  .item-list-head,
  .item-list .item-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .item-list .item-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    min-height: 64px;
    align-items: center;
    position: relative;
  }

  /* Thumbnail stays fixed size at left */
  .item-list .item-row .img {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  /* Name + meta take the remaining width */
  .item-list .item-row .info {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Stock and expiry columns: side-by-side below the name */
  .item-list .item-row .stock-col {
    flex: 0 0 auto;
    min-width: 80px;
  }

  .item-list .item-row .expiry-col {
    flex: 0 0 auto;
    min-width: 90px;
  }

  /* Badges: right-aligned, at the end */
  .item-list .item-row .badges {
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* row-check for select mode */
  .item-list .item-row .row-check {
    flex: 0 0 auto;
  }

  /* ============================================================
     WAREHOUSE — selection bar
     ============================================================ */

  .selection-bar {
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
  }

  .selection-bar .sb-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .selection-bar .sb-quick {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 13px;
  }

  .selection-bar .sb-quick select {
    width: 100%;
  }

  .selection-bar .btn {
    min-height: 44px;
    flex: 1 1 auto;
  }

  /* ============================================================
     WAREHOUSE — categories pane
     ============================================================ */

  .cat-pane {
    padding: 0;
  }

  .cat-pane .cat-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .cat-head-actions {
    gap: 8px;
  }

  .cat-head-actions .btn {
    min-height: 44px;
  }

  /* Category rows: stack name / scope / usage on phone */
  .cat-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  /* name input fills first row */
  .cat-row input.cat-name {
    grid-column: 1 / -1;
    height: 40px;
    font-size: 14px;
  }

  /* Scope select + usage + delete stay on second row */
  .cat-row select {
    height: 40px;
  }

  .cat-row .usage {
    text-align: left;
  }

  /* select-mode: extra check column */
  .cat-list.select-mode .cat-row {
    grid-template-columns: 36px 1fr 1fr;
  }

  /* ============================================================
     WAREHOUSE — scan bar
     ============================================================ */

  /* One row: [barcode input · Receiving] — saves a full row of chrome */
  .scan-bar {
    padding: 8px 12px;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .scan-bar .scan-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    height: 42px;
    font-size: 15px;
  }

  /* Hint text: collapse to make room */
  .scan-bar .scan-hint {
    display: none;
  }

  .scan-bar .spacer {
    display: none;
  }

  .scan-bar .btn {
    min-height: 42px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* ============================================================
     WAREHOUSE — Receiving modal (bottom sheet)
     ============================================================ */

  .receiving-scrim {
    padding: 0;
    align-items: flex-end;
    justify-content: stretch;
  }

  .receiving-panel {
    max-width: none;
    width: 100%;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    border: 0;
  }

  /* Scan row in receiving: stack input above warehouse selector */
  .receiving-scan {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }

  .receiving-scan .scan-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
  }

  .receiving-scan .recv-wh {
    flex: 1 1 auto;
  }

  .receiving-scan .recv-wh select {
    width: 100%;
    height: 40px;
  }

  /* Receiving lines table: horizontal scroll */
  .recv-lines .m-scroll-x {
    margin: 0 -14px;
    padding: 0 14px;
  }

  /* Receiving footer actions */
  .receiving-foot {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .receiving-foot .btn {
    min-height: 44px;
    flex: 1 1 auto;
  }

  /* Unknown barcode rows: stack code + controls */
  .recv-unknown-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .recv-unknown-row .spacer {
    display: none;
  }

  .recv-unknown-row .btn,
  .recv-unknown-row .iconbtn {
    min-height: 44px;
  }

  /* ============================================================
     WAREHOUSE — item editor modal (.ie-scrim / .ie-panel)
     (core mobile.css already makes it full-screen; refine inside)
     ============================================================ */

  /* grid-2 inside the editor → single column */
  .ie-panel .grid-2 {
    grid-template-columns: 1fr;
  }

  .ie-panel .grid-2 label.full {
    grid-column: 1;
  }

  .ie-panel .ie-body {
    padding: 14px;
    gap: 16px;
  }

  .ie-panel .ie-head {
    padding: 12px 14px;
  }

  .ie-panel .ie-foot {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ie-panel .ie-foot .btn {
    min-height: 44px;
  }

  .ie-panel .ie-actions {
    flex-wrap: wrap;
  }

  .ie-panel .ie-actions .btn {
    min-height: 44px;
    flex: 1 1 auto;
  }

  /* Consumables recipe rows: two-column grid, ingredient spans full width */
  .consumables-editor .ce-row {
    grid-template-columns: 1fr 90px;
    grid-template-rows: auto auto;
    gap: 6px;
  }

  .consumables-editor .ce-row .combo {
    grid-column: 1 / -1;
  }

  /* Barcode add row: stack */
  .barcode-add {
    flex-wrap: wrap;
  }

  .barcode-add input {
    flex: 1 1 100%;
  }

  .barcode-add .btn {
    min-height: 40px;
  }

  /* Batches table inside editor: horizontal scroll wrapper (added in JS) */
  .batches .m-scroll-x {
    margin: 0 -14px;
    padding: 0 14px;
  }

  .batches-table td.actions {
    gap: 6px;
  }

  .batches-table td.actions .btn,
  .batches-table td.actions .iconbtn {
    min-height: 40px;
    min-width: 40px;
  }

  /* ============================================================
     WAREHOUSE — batch modal (already full-screen via .ie-panel)
     ============================================================ */

  .batch-item-facts {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }

  /* ============================================================
     WAREHOUSE — waste pane
     ============================================================ */

  /* waste-top already goes 1-column at 900px (from styles.css);
     below 720 we also reduce padding */
  .waste-pane {
    padding: 12px 14px;
  }

  .waste-top {
    grid-template-columns: 1fr;
  }

  /* Waste-log table: horizontal scroll (added in JS) */
  .waste-log .m-scroll-x {
    margin: 0 -14px;
    padding: 0 14px;
  }

  /* Waste-log row: fewer columns on phone (styles.css handles ≤760 already,
     but we override for ≤720 to match page padding) */
  .wl-row {
    grid-template-columns: minmax(0, 1fr) 56px 76px 60px;
    gap: 8px;
    padding: 8px 0;
    font-size: 12px;
  }

  /* Needs-attention rows */
  .wa-row {
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }

  .wa-info {
    flex: 1 1 120px;
  }

  .wa-row .btn {
    min-height: 40px;
  }

  /* ============================================================
     WAREHOUSE — resolve barcode modal (bottom sheet)
     ============================================================ */

  .resolve-scrim {
    padding: 0;
    align-items: flex-end;
    justify-content: stretch;
  }

  /* The panel uses .ie-panel which is already full-screen; the resolve modal
     is small, so bottom-sheet it instead */
  .resolve-scrim .ie-panel {
    height: auto;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .resolve-list {
    max-height: 45dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .resolve-item {
    min-height: 52px;
    padding: 10px 12px;
  }

  /* ============================================================
     PRODUCTION — screen
     ============================================================ */

  .production-panel {
    overflow-x: hidden;
  }

  .production-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }

  .production-toolbar .prod-wh {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .production-toolbar .prod-wh select {
    width: 100%;
    height: 44px;
  }

  /* Production grid: single column on phones */
  .production-grid {
    grid-template-columns: 1fr;
    padding: 12px 14px;
    gap: 14px;
  }

  /* Production card: ensure full width */
  .prod-card {
    width: 100%;
    min-width: 0;
  }

  /* Card header: larger touch target */
  .prod-card .pc-head {
    min-height: 56px;
    padding: 10px 12px;
    gap: 10px;
  }

  /* Controls row: ensure qty input is comfortably tappable */
  .prod-card .pc-controls {
    flex-wrap: wrap;
    gap: 8px;
  }

  .prod-card .pc-qty input {
    height: 44px;
    font-size: 16px;
    min-width: 90px;
  }

  /* Produce button: full width */
  .prod-card .pc-produce {
    min-height: 48px;
    font-size: 15px;
  }

  /* Recent batches: let barcode SVGs scroll if needed */
  .prod-card .pc-batch {
    flex-wrap: wrap;
    gap: 8px;
  }

  .prod-card .pc-batch .pb-barcode {
    order: 10;
    flex: 0 0 auto;
  }

  /* Panel heading */
  .production-panel .panel-heading {
    padding: 10px 14px;
    font-size: 14px;
  }

  /* ============================================================
     MOVEMENTS — history list
     ============================================================ */

  .movement-list {
    padding: 12px 14px;
  }

  /* Ledger row. Reason label and signed delta share row 1 (both ALWAYS
     present) so the card always has height and the number can never overflow.
     The item name is an optional second line — when it's empty (older rows,
     deleted items) row 2 simply collapses and the card is a clean one-liner. */
  .movement-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 2px;
    height: auto;
    min-height: 48px;
    align-content: center;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    text-align: left;
  }

  .movement-list > div b {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .movement-list > div strong {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
  }

  .movement-list > div span {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
  }
  /* Collapse the empty second line so nameless rows stay a tidy single line. */
  .movement-list > div span:empty { display: none; }

}

/* Bigger touch targets for coarse pointers (any width) — warehouse cluster */
@media (pointer: coarse) {
  .warehouse-tabs .tab { min-height: 44px; }
  .warehouse-filter .chip { min-height: 36px; }
  .cat-row .iconbtn { min-width: 44px; min-height: 44px; }
  .item-list .item-row { min-height: 60px; }
  .wa-row .btn { min-height: 44px; }
  .prod-card .pc-produce { min-height: 48px; }
}