/* ═══ Warehouse map, bins, and count walk ════════════════════════
   Tones are derived, never stored: a bin is coloured by what its batches
   say right now. Kept as classes rather than inline fills so the map
   themes with the rest of the app.
   ═══════════════════════════════════════════════════════════════ */


.map-toolbar{display:flex;gap:10px;align-items:center;margin:4px 0 10px}
.map-toolbar .map-search{flex:1;margin:0}
.map-toolbar .segsm{height:var(--tap-min)}
.map-toolbar .segsm button{padding:0 16px;font-size:var(--fs-small)}
.map-search{display:block;margin:4px 0 10px}
.map-search input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A2B8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px center;background-size:18px;padding-left:40px}
.map-hit .loc-tag{flex:none}
.map-results-none{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.map-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 8px;
  font-size:var(--fs-label);color:var(--text-sub)}
.legend-size{display:inline-flex;align-items:center;gap:4px;color:var(--text-muted)}

/* ═══ Site plan ══════════════════════════════════════════════════
   Scenery (yard, walls, office, walkways) is neutral on purpose: green,
   amber and red belong to stock, so they appear ONLY on crates. Floor
   markings that would be safety-yellow in the real building are drawn
   in light neutral instead. Cold rooms borrow the accent, like the
   temperature pills do. */
.map-wrap{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);
  padding:8px;margin-bottom:6px;overflow:hidden}
svg.site{display:block;width:100%;height:auto;margin:0 auto;
  transition:transform var(--dur-slow) var(--ease-out),margin var(--dur-slow) var(--ease-out)}
/* 3D: the plan tipped back in perspective, pivoting on its NEAR (bottom) edge
   so that edge stays at full width and the far side recedes — pivoting on the
   top pushed the near edge past the frame. The negative top margin takes back
   the height the tilt frees up; margin % is of the WIDTH, hence --ratio. */
.map-wrap.tilt{perspective:1400px;perspective-origin:50% 100%}
.map-wrap.tilt svg.site{transform:rotateX(42deg);transform-origin:50% 100%;
  margin-top:calc(-100% * var(--ratio) * .4)}
.map-wrap.tilt svg.site .crate-shadow{transform:translate(.5px,1.4px)}

svg.site text{pointer-events:none;user-select:none}

/* yard and building */
svg.site .yard{fill:#12161F}
svg.site .yard-tex{fill:url(#yard-tarmac)}
svg.site .tarmac-fleck{fill:var(--border-strong)}
svg.site .yard-label{fill:var(--text-muted);font-family:var(--font-mono);font-size:4px;
  font-weight:700;letter-spacing:.2em}
svg.site .building-floor{fill:var(--surface-2)}
svg.site .building-grid{fill:url(#floor-grid)}
svg.site .floor-line{fill:none;stroke:var(--border-faint);stroke-width:.35}
svg.site .building-wall{fill:none;stroke:var(--text-muted);stroke-width:2.5}
svg.site .door{fill:var(--bg);stroke:var(--text-sub);stroke-width:.4}
svg.site .leveller{fill:var(--surface-4);stroke:var(--border-strong);stroke-width:.3}
svg.site .door-label{fill:var(--text-muted);font-family:var(--font-mono);font-size:3px}

/* lorries */
svg.site .trailer{fill:#2B3345;stroke:#46516A;stroke-width:.4}
svg.site .trailer-rib{stroke:#3A4459;stroke-width:.35}
svg.site .cab{fill:#3B465D;stroke:#56627C;stroke-width:.35}
svg.site .windscreen{fill:#8FB3CC;opacity:.6}

/* walkways */
svg.site .walk-floor{fill:#1A2030}
svg.site .walk-edge{fill:var(--text-muted);opacity:.55}
svg.site .walk-label{fill:var(--text-muted);font-family:var(--font-mono);font-size:3.2px;
  letter-spacing:.3em;opacity:.8}

/* goods in, despatch, office */
svg.site .area-floor{fill:#1B2231}
svg.site .area-label{fill:var(--text);font-family:var(--font-mono);font-size:4.4px;font-weight:700;
  letter-spacing:.08em}
svg.site .area-sub{fill:var(--text-muted);font-size:3.4px}
svg.site .spot{fill:none;stroke:var(--text-muted);stroke-width:.4;stroke-dasharray:1.2 .8}
svg.site .spot-x{stroke:var(--border-strong);stroke-width:.4}
svg.site .pallet{fill:#8A6A45;stroke:#B08A5E;stroke-width:.35}
svg.site .lane-box{fill:none;stroke:var(--text-muted);stroke-width:.45;stroke-dasharray:1.6 1}
svg.site .lane.busy .lane-box{fill:var(--accent-t10);stroke:var(--accent)}
svg.site .lane-label{fill:var(--text-sub);font-size:3.2px}
svg.site .lane.busy .lane-label{fill:var(--text)}
svg.site .lane-n{fill:var(--accent);font-family:var(--font-mono);font-size:3.6px;font-weight:700}
svg.site .office-floor{fill:#222A3A}
svg.site .office-wall{fill:none;stroke:var(--text-sub);stroke-width:1.1}
svg.site .office-door{fill:#222A3A}
svg.site .desk{fill:#3A4459;stroke:#56627C;stroke-width:.3}
svg.site .screen{fill:#8FB3CC;opacity:.7}
svg.site .chair{fill:#2B3345;stroke:#56627C;stroke-width:.3}

/* rooms */
svg.site .room-floor{fill:transparent}
svg.site .room.ambient .room-floor{fill:none;stroke:var(--border-strong);stroke-width:.5;stroke-dasharray:3 2}
svg.site .room.chilled .room-floor{fill:rgba(63,152,204,.07)}
svg.site .room.frozen .room-floor{fill:rgba(63,152,204,.13)}
svg.site .room-wall{fill:none;stroke:var(--accent);stroke-width:1.6}
svg.site .room.frozen .room-wall{stroke-width:2.2}
svg.site .room-label{fill:var(--text);font-family:var(--font-mono);font-size:4.6px;font-weight:700;letter-spacing:.06em}
svg.site .room-meta{fill:var(--text-muted);font-family:var(--font-mono);font-size:3.6px}
svg.site .room.chilled .room-meta,svg.site .room.frozen .room-meta{fill:var(--accent)}
svg.site .cold-door-gap{fill:var(--surface-2)}
svg.site .curtain{stroke:var(--accent);stroke-width:.5;opacity:.7}

svg.site .bulk-floor{fill:none;stroke:var(--border-strong);stroke-width:.45;stroke-dasharray:2 1.5}

/* forklift aisles */
svg.site .aisle-floor{fill:rgba(255,255,255,.025)}
svg.site .aisle-line{stroke:var(--text-muted);stroke-width:.45;stroke-dasharray:3 2;opacity:.7}
svg.site .aisle-arrow{fill:none;stroke:var(--text-muted);stroke-width:.55;opacity:.8}
svg.site .aisle-label{fill:var(--text-muted);font-family:var(--font-mono);font-size:3px;letter-spacing:.1em}

/* racking — uprights in rack blue, crates in stock colours */
svg.site .rack{cursor:pointer;outline:none}
svg.site .rack-hit{fill:transparent;stroke:transparent;stroke-width:.8;
  transition:stroke var(--dur-fast) var(--ease-out),fill var(--dur-fast) var(--ease-out)}
svg.site .rack:hover .rack-hit,svg.site .rack:focus-visible .rack-hit{stroke:var(--accent);fill:var(--accent-t10)}
svg.site .rack-code{fill:var(--text);font-family:var(--font-mono);font-size:4.4px;font-weight:700}
svg.site .rack-fill{fill:var(--text-muted);font-family:var(--font-mono);font-size:3.2px}
svg.site .rack-label{fill:var(--text-sub);font-size:3.2px}
svg.site .rack-frame{fill:#0E121A;stroke:var(--accent-deep);stroke-width:.7}
svg.site .beam{stroke:var(--accent-deep);stroke-width:.35}
svg.site .upright{fill:var(--accent)}
svg.site .slot-bg{fill:transparent}

svg.site .crate{stroke-width:.4}
svg.site .crate.ok{fill:rgba(74,222,128,.55);stroke:var(--ok)}
svg.site .crate.warn{fill:rgba(255,180,84,.62);stroke:var(--warn)}
svg.site .crate.expired{fill:rgba(255,92,92,.62);stroke:var(--danger)}
svg.site .crate-shadow{fill:rgba(0,0,0,.55)}
svg.site .crate-lid{fill:rgba(255,255,255,.22)}
svg.site .crate-mixed{fill:var(--text);stroke:#0E121A;stroke-width:.3}
svg.site .slot-out{fill:none;stroke:var(--danger);stroke-width:.45;stroke-dasharray:1 .7}
svg.site .slot{transition:opacity var(--dur-fast) var(--ease-out)}

/* search: everything else dims, matches get an accent ring */
svg.site.searching .slot:not(.hit){opacity:.15}
svg.site.searching .rack:not(.hit) text{opacity:.35}
svg.site .slot.hit .slot-bg{fill:var(--accent-t28);stroke:var(--accent);stroke-width:.9}
svg.site .rack.hit .rack-hit{stroke:var(--accent)}

/* Bins on the shelf map: big enough to read the product and tap with a glove. */
.shelf-card{margin-bottom:10px}
.bin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.bin{position:relative;min-height:90px;border-radius:var(--r-sm);
  border:1px solid var(--border-strong);background:var(--surface-3);color:var(--text);
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:3px;font:inherit;cursor:pointer;padding:7px 9px 9px;text-align:left;overflow:hidden}
.bin .bin-code{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:700;line-height:1.2;
  color:var(--text-sub)}
.bin .bin-name{font-size:var(--fs-meta);font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bin .bin-foot{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:auto}
.bin .bin-qty{font-family:var(--font-mono);font-size:var(--fs-body);font-weight:700;
  font-variant-numeric:tabular-nums}
.bin .bin-more{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-sub);white-space:nowrap}
/* Stock level gauge along the tile's bottom edge. A stock-health reading, so
   it may carry the stock colours — it is not a task progress bar. */
.bin .bin-level{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.35)}
.bin .bin-level span{display:block;height:100%;background:currentColor}
.bin.ok{background:var(--ok-tint);border-color:var(--ok)}
.bin.ok .bin-level{color:var(--ok)}
.bin.warn{background:var(--warn-tint);border-color:var(--warn)}
.bin.warn .bin-more,.bin.warn .bin-level{color:var(--warn)}
.bin.expired{background:var(--danger-tint);border-color:var(--danger)}
.bin.expired .bin-more,.bin.expired .bin-level{color:var(--danger)}
.bin.out{background:var(--surface-1);border:1px dashed var(--danger)}
.bin.out .bin-name{color:var(--text-sub)}
.bin.out .bin-more{color:var(--danger)}
.bin.spare{background:var(--surface-1);border-color:var(--border);color:var(--text-muted)}
.bin.focus{box-shadow:0 0 0 3px var(--accent)}
.bin:active{transform:scale(.97)}

.swatch{width:11px;height:11px;border-radius:3px;display:inline-block;padding:0;flex:none;
  border:1px solid var(--border-strong)}
.swatch.small{width:7px;height:7px;border-radius:2px}
.swatch.ok{background:rgba(74,222,128,.55);border-color:var(--ok)}
.swatch.warn{background:rgba(255,180,84,.62);border-color:var(--warn)}
.swatch.expired{background:rgba(255,92,92,.62);border-color:var(--danger)}
.swatch.spare{background:#0E121A;border-color:var(--accent-deep)}
.swatch.out{background:#0E121A;border:1px dashed var(--danger)}

/* ── count walk ────────────────────────────────────────── */
.progress{height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden}
.progress .bar{height:100%;background:var(--accent);border-radius:2px;
  transition:width var(--dur) var(--ease-out)}

/* The bin-code chip used in pick lists and stock detail. */
.loc-tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);
  font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;color:var(--accent);
  background:var(--accent-t10);border:1px solid var(--accent-t28);
  border-radius:5px;padding:2px 6px;font-variant-numeric:tabular-nums}
/* The promoted field on a pick line: WHERE comes first and biggest. */
.loc-tag.lg{font-size:1.375rem;font-weight:700;padding:5px 10px;border-radius:var(--r-sm);
  letter-spacing:.02em;line-height:1.1}
.loc-tag.none{color:var(--text-muted);background:var(--surface-3);border-color:var(--border-strong);
  font-size:var(--fs-meta);font-weight:600}