/* Demo "Magazzino visivo": stesso banco notturno della demo ordini (demo-ordini/demo.css), con la mappa isometrica al posto del documento.
   Qui solo ciò che è proprio del magazzino: mappa, lenti, carico e riordino. */
.mv-page .od-stage { grid-template-columns: minmax(0, 1.22fr) minmax(0, .88fr); }

/* La mappa: sta ferma accanto al pannello mentre si legge, si carica e si riordina */
.mv-map-col { position: sticky; top: 96px; margin: 0; min-width: 0; }
.mv-map-col::before { content: ""; position: absolute; z-index: -1; inset: -6% -8% 0; background: radial-gradient(closest-side, #deed9814, transparent); pointer-events: none; }
.mv-map-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; }
.mv-map-key { color: #8d9c90; }
.mv-map svg { display: block; width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; }
.mv-map-info { min-height: 3.2em; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--od-rule); font: 400 12px/1.6 var(--od-mono); letter-spacing: .02em; color: var(--od-soft); }
.mv-map-info b { font-weight: 400; color: var(--ink); background: var(--lime); padding: 1px 5px; }
.mv-map-info em { font-style: normal; color: var(--lime); }

.mv-floor { fill: #1a2b21; }
.mv-dock { fill: #deed980d; stroke: #a4b69a73; stroke-width: 1; stroke-dasharray: 4 4; }
.mv-dock-label { font: 400 10px var(--od-mono); text-transform: uppercase; letter-spacing: .08em; fill: var(--od-soft); text-anchor: middle; }
.mv-aisle { font: 400 30px Anton, Impact, sans-serif; fill: var(--night); stroke: var(--lime); stroke-width: 1; text-anchor: middle; pointer-events: none; }

/* Le campate: telaio sottile, merce piena. Le lenti cambiano colore con un'onda che parte dall'ingresso. */
.mv-bay { cursor: pointer; outline: none; }
.mv-frame { fill: none; stroke: #a4b69a66; stroke-width: 1; }
.mv-front { fill: none; stroke: #a4b69a80; stroke-width: 1; pointer-events: none; }
.mv-g-top, .mv-g-left, .mv-g-right { transition: fill .5s var(--od-out) calc(var(--d, 0) * 24ms); }
.mv-g-top { fill: #f0f3ed; }
.mv-g-left { fill: #c3cdc0; }
.mv-g-right { fill: #8d9c90; }
.mv-bay.is-hot .mv-g-top { fill: var(--lime); }
.mv-bay.is-hot .mv-g-left { fill: #bfd06f; }
.mv-bay.is-hot .mv-g-right { fill: #91a24c; }
.mv-bay.is-dim .mv-g-top { fill: #3a4f41; }
.mv-bay.is-dim .mv-g-left { fill: #2d4034; }
.mv-bay.is-dim .mv-g-right { fill: #24362b; }
.mv-bay.is-dim .mv-frame { stroke: #a4b69a2b; }
.mv-bay.is-dim .mv-front { stroke: #a4b69a40; }
.mv-free { fill: none; stroke: none; }
.mv-bay.is-empty .mv-free { stroke: #a4b69a66; stroke-dasharray: 3 3; }
.mv-bay.is-empty:is(.is-hot, .is-target) .mv-free { fill: #deed982e; stroke: var(--lime); stroke-dasharray: none; }
.mv-bay.is-target .mv-free { animation: mv-pulse 1.3s ease-in-out infinite alternate; }
.mv-hull { fill: transparent; stroke: transparent; stroke-width: 2; stroke-linejoin: round; transition: stroke .25s; }
.mv-bay:hover .mv-hull { stroke: #a4b69a99; }
.mv-bay.is-selected .mv-hull { stroke: var(--lime); }
.mv-bay:focus-visible .mv-hull { stroke: var(--lime); stroke-dasharray: 5 3; }
.mv-tag { font: 400 11px var(--od-mono); letter-spacing: .04em; fill: var(--od-on); paint-order: stroke; stroke: var(--night); stroke-width: 4px; text-anchor: middle; opacity: 0; transition: opacity .25s; pointer-events: none; }
.mv-bay:is(.is-selected, .is-target, .is-tagged) .mv-tag, .mv-bay:focus-visible .mv-tag { opacity: 1; }
.mv-bay.is-flash .mv-g-top { animation: mv-flash 1s var(--od-out) both; }
@keyframes mv-pulse { from { fill-opacity: .25; } to { fill-opacity: 1; } }
@keyframes mv-flash { from { fill: #fff; } }

/* Colli in banchina e percorso fino alla campata */
.mv-c-top { fill: var(--lime); }
.mv-c-left { fill: #bfd06f; }
.mv-c-right { fill: #91a24c; }
.mv-pallet { transition: opacity .3s; }
.mv-pallet.is-gone { opacity: 0; }
.mv-route-halo { fill: none; stroke: var(--night); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.mv-route { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mv-route-g { transition: opacity .8s var(--od-out); }
.mv-route-g.is-done { opacity: .3; }
.mv-cube { pointer-events: none; }

/* 01 — lenti */
.mv-lenses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 28px 0 0; padding: 0; border: 0; }
.mv-lens { display: grid; align-content: start; gap: 6px; min-height: 76px; padding: 14px 14px 12px; background: var(--od-tile); border: 1px solid var(--od-rule); cursor: pointer; transition: border-color .3s var(--od-out), background-color .3s var(--od-out); }
.mv-lens:hover { border-color: #a4b69a99; }
.mv-lens-name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.mv-lens-n { font: 400 11px/1.4 var(--od-mono); letter-spacing: .03em; color: var(--od-soft); }
.mv-lens:has(input:checked) { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.mv-lens:has(input:checked) .mv-lens-n { color: var(--ink); }
.mv-lens:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 3px; }
.mv-count { margin-top: 30px; flex-wrap: wrap; }
.mv-count span { max-width: 18ch; }
.mv-list-title { margin: 22px 0 8px; font: 400 11px/1.5 var(--od-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--od-soft); }
.mv-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--od-rule); }
.mv-list li { border-bottom: 1px solid var(--od-rule); animation: od-in .4s var(--od-out) both; }
.mv-list li:nth-child(2) { animation-delay: .05s; }
.mv-list li:nth-child(3) { animation-delay: .1s; }
.mv-list li:nth-child(4) { animation-delay: .15s; }
.mv-list li:nth-child(5) { animation-delay: .2s; }
.mv-row { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; align-items: baseline; gap: 12px; width: 100%; min-height: 48px; padding: 10px 4px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: color .2s, background-color .2s; }
.mv-row:hover { background: #ffffff0a; }
.mv-row:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.mv-row[aria-pressed="true"] { background: #deed981f; }
.mv-row-id { font: 400 12px/1.4 var(--od-mono); color: var(--lime); }
.mv-row-desc { font-size: 15px; font-weight: 600; line-height: 1.4; }
.mv-row-val { font: 400 12px/1.4 var(--od-mono); color: var(--od-soft); text-align: right; white-space: nowrap; }

/* 02 — DDT nel pannello, poi la proposta di carico come foglio bianco */
.mv-ddt-doc { margin-top: 26px; }
.mv-sheet { background: #fff; color: var(--ink); box-shadow: 0 34px 60px -24px #000000a6, 0 3px 8px #00000040; animation: od-sheet .6s var(--od-out) both; }
.mv-sheet .od-link-btn { color: var(--muted); }
.mv-put { list-style: none; margin: 26px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.mv-put-row { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); transition: background-color .25s; }
.mv-put-row:hover { background: #f6f9ec; }
.mv-put-qty { font: 400 26px/1 Anton, Impact, sans-serif; font-variant-numeric: tabular-nums; }
.mv-put-qty small { margin-left: 4px; font: 400 11px var(--od-mono); text-transform: uppercase; color: var(--muted); }
.mv-put-desc { display: grid; gap: 2px; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.mv-put-desc b { font: 400 11px/1.4 var(--od-mono); letter-spacing: .03em; color: var(--muted); }
.mv-put-desc small { font-size: 13px; font-weight: 400; line-height: 1.5; color: #4c5b51; }
.mv-put-bay { min-width: 2.6em; padding: 6px 10px 4px; background: var(--ink); color: var(--lime); font: 400 26px/1 Anton, Impact, sans-serif; text-align: center; }
.mv-put-bay.is-open { background: none; color: var(--ink); border: 2px dashed var(--ink); }

/* 03 — riordino, sul foglio bianco della demo ordini */
.mv-supplier { margin-top: 28px; }
.mv-supplier-name { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font-size: 17px; }
.mv-supplier-name span { font: 400 11px/1.4 var(--od-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mv-reorder { list-style: none; margin: 0; padding: 0; }
.mv-ro { display: grid; grid-template-columns: 24px minmax(0, 1fr) 5.4em 7.6em; align-items: start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); transition: opacity .3s var(--od-out), background-color .25s; }
.mv-ro:hover { background: #f6f9ec; }
.mv-ro.is-off { opacity: .45; }
.mv-ro-pick { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
.mv-ro-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mv-ro-main { display: grid; gap: 4px; min-width: 0; cursor: pointer; }
.mv-ro-title { font-size: 15px; font-weight: 700; line-height: 1.4; }
.mv-ro-bay { margin-right: 8px; padding: 2px 6px; background: var(--ink); color: var(--lime); font: 400 11px/1.4 var(--od-mono); }
.mv-ro-meta { font-size: 13px; line-height: 1.5; color: #4c5b51; }
.mv-ro-alert { width: fit-content; margin-top: 4px; padding: 3px 8px; background: var(--lime); font-size: 13px; font-weight: 700; line-height: 1.4; }
.mv-ro-days, .mv-ro-qty { display: grid; margin: 0; text-align: right; }
.mv-ro-days b, .mv-ro-qty b { font: 400 34px/1 Anton, Impact, sans-serif; font-variant-numeric: tabular-nums; }
.mv-ro-days small, .mv-ro-qty small { margin-top: 4px; font: 400 10.5px/1.4 var(--od-mono); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.mv-ro-qty { font: 400 11px/1.4 var(--od-mono); text-transform: uppercase; }
.mv-ro-days b { color: transparent; -webkit-text-stroke: 1.2px var(--ink); }
.mv-ro:has(.mv-ro-alert) .mv-ro-days b { color: var(--ink); -webkit-text-stroke: 0; }
.mv-ro-rule { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* 04 — nel gestionale l'ubicazione resta allineata a sinistra, la quantità a destra */
.mv-erp td:nth-child(5), .mv-erp thead th:nth-child(5) { text-align: left; }
.mv-erp td:nth-child(5) { font: 400 13px/1.4 var(--od-mono); }
.mv-closing { margin-top: 32px; }

@media (max-width: 1100px) {
  .mv-page .od-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mv-lenses { grid-template-columns: 1fr; }
  .mv-lens { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
}

@media (max-width: 860px) {
  .mv-page .od-stage { grid-template-columns: 1fr; }
  .mv-map-col { position: static; }
  .mv-page .od-demo .od-panel { order: 0; }
}

@media (max-width: 760px) {
  .mv-map-key { display: none; }
  .mv-put-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mv-put-qty { grid-column: 1; }
  .mv-put-desc { grid-column: 1 / -1; grid-row: 2; }
  .mv-put-bay { grid-column: 2; grid-row: 1; }
  .mv-ro { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); }
  .mv-ro-main { grid-column: 2 / -1; }
  .mv-ro-days { grid-column: 2; text-align: left; }
  .mv-ro-qty { grid-column: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-g-top, .mv-g-left, .mv-g-right { transition: none; }
  .mv-bay.is-target .mv-free, .mv-bay.is-flash .mv-g-top { animation: none; }
}

/* Il punto di partenza: il foglio delle giacenze da cui nasce la mappa. Aspetto da foglio di calcolo generico. */
.mv-xls { margin: 30px 0 0; }
.mv-xls-title { margin: 0 0 10px; font: 400 11px/1.5 var(--od-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--lime); }
.mv-xls-scroll { overflow-x: auto; background: #fff; scrollbar-width: thin; scrollbar-color: #9aa69d transparent; }
.mv-xls-scroll:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.mv-xls-grid { width: 100%; border-collapse: collapse; color: #1f1f1f; font: 400 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.mv-xls-grid :is(th, td) { padding: 6px 8px; border: 1px solid #d9d9d9; text-align: left; white-space: nowrap; }
.mv-xls-grid :is(.mv-xls-corner, .mv-xls-letter), .mv-xls-grid tbody th { background: #f2f2f2; color: #616161; font-size: 11px; font-weight: 400; text-align: center; }
.mv-xls-grid tbody th { width: 2.4em; }
.mv-xls-head td { background: #fafafa; font-weight: 700; }
.mv-xls-desc { max-width: 16em; overflow: hidden; text-overflow: ellipsis; }
.mv-xls-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.mv-xls-grid tbody tr[data-bay]:hover td { background: #f4f9de; }
.mv-xls-bay { min-height: 28px; padding: 2px 6px; margin: -2px -6px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.mv-xls-bay[aria-pressed="true"] { background: var(--lime); text-decoration: none; }
.mv-xls-bay:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.mv-xls-more td { color: #6b6b6b; font-style: italic; }
.mv-xls-caption { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--od-soft); }
@media (max-width: 760px) {
  .mv-xls-grid { font-size: 12px; }
  .mv-xls-grid :is(th, td) { padding: 5px 6px; }
  .mv-xls-desc { max-width: 7.5em; }
}