/* «Склад · стеллажи»: группы помещений и рядов, фасад ряда из мини-схем стеллажей кубиками (src/ui/racks.js).
   Цвета ячеек — общие токены --c-* из styles.css (те же, что на планшете и в отчёте БП). */

/* Мини-схема: кубик фиксированного размера, этажи сверху вниз, ячейка — по своей позиции. */
.cube {
  --cube: 14px; --cube-gap: 3px;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cube));
  grid-template-rows: repeat(var(--rows), var(--cube));
  gap: var(--cube-gap);
  width: max-content;
}
.cube-cell { position: relative; display: block; box-sizing: border-box; border: 1px solid; border-radius: 3px; }
/* Те же смыслы, что у крупных ячеек, но насыщенный тон: бледная заливка на 14 px не отличима от пустой. */
.cube-cell.f-target { --half: var(--c-target-b); --div: rgba(255, 255, 255, .85); background: var(--c-target-b); border-color: var(--c-target-t); }
.cube-cell.f-full { --half: var(--c-full-b); --div: rgba(255, 255, 255, .85); background: var(--c-full-b); border-color: var(--c-full-t); }
.cube-cell.f-other { --half: var(--c-other); --div: var(--c-other-b); background: var(--c-other); border-color: var(--c-other-b); }
.cube-cell.f-empty { --div: var(--c-empty-b); background: var(--c-empty); border-color: var(--c-empty-b); }
/* Глубина 2: два места — тонкий разделитель; занято одно — залита левая половина (счётчик мест, не сторона). */
.cube-cell.d2::after { content: ''; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 1px; margin-left: -0.5px; background: var(--div); }
.cube-cell.half { --div: var(--c-empty-b); background: linear-gradient(90deg, var(--half) 50%, var(--c-empty) 50%); }
/* Паллет больше, чем мест: точка с белым кольцом — видна и на коричневом. */
.cube-cell.over::before { content: ''; position: absolute; top: 1px; right: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 1px #fff; }
.cube-shelf { grid-column: 1 / -1; align-self: center; display: block; height: 3px; border-radius: 2px; background: var(--line); }

.legend-cube { display: inline-block; width: 14px; height: 14px; flex: none; }
.legend-over { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }

/* Помещение: итог товара фильтра, заполненность, полоса долей ячеек. */
.rr-room { padding: 0 12px 4px; }
.rr-room-head { display: flex; flex-direction: column; gap: 4px; padding: 14px 4px 10px; }
.rr-room-title { display: flex; align-items: baseline; gap: 8px; }
.rr-room-title b { flex: 1; min-width: 0; font-size: var(--t-name); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-room-title span { font-weight: 700; white-space: nowrap; }
.rr-room-head > small, .rr-row-sub { display: block; font-size: var(--t-cap); color: var(--muted); }
.prop-bar { display: flex; height: 8px; margin-top: 2px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); background: var(--c-empty); }
.prop-bar i { display: block; min-width: 0; }
.prop-bar .p-target { background: var(--c-target-b); }
.prop-bar .p-other { background: var(--c-other-b); opacity: .6; }
.prop-cap { font-size: 12px; color: var(--muted); }

/* Ряд: заголовок и фасад — стеллажи вдоль ряда в физическом порядке. */
.rr-rowcard { margin-bottom: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.rr-row-head { display: flex; align-items: baseline; gap: 8px; }
.rr-row-head b { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-row-head span { font-weight: 600; white-space: nowrap; }
.facade { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 8px; }
.rtile { display: flex; flex-direction: column; gap: 2px; min-width: 76px; padding: 4px; text-align: left; background: none; border: 0; border-radius: 8px; color: inherit; font: inherit; cursor: pointer; }
.rtile:hover, .rtile:focus-visible { background: var(--bg); }
.rtile .cube { margin-bottom: 4px; }
.rtile-title { font-size: var(--t-body); font-weight: 600; white-space: nowrap; }
.rtile small { font-size: 12px; color: var(--muted); }
.rtile.ghost { opacity: .45; cursor: default; }
.rtile.ghost:hover { background: none; }

.chip.rr-nom { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-search input { font-size: var(--t-body); font-weight: 500; }
.rr-buffer { padding: 12px 16px; }

@media (max-width: 599px) {
  .cube { --cube: 11px; --cube-gap: 2px; }
  .rr-room { padding: 0 8px 4px; }
  .rr-rowcard { padding: 8px; }
  .rtile { min-width: 72px; }
}

/* Разрез стеллажа: строка паллеты — вес и партия крупно, номер паллеты и бочки мелко, срок цветным значком. */
.fcell-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.prow { display: flex; align-items: center; gap: 10px; }
.prow + .prow { border-top: 1px solid var(--line); padding-top: 8px; }
.prow-main { flex: 1; min-width: 0; }
.prow-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; }
.prow-kg { font-size: var(--t-name); font-weight: 700; }
.prow-kg small { font-size: var(--t-cap); font-weight: 400; color: var(--muted); }
.prow-batch { padding: 1px 6px; border-radius: 6px; background: var(--c-other); font-size: var(--t-cap); font-weight: 600; }
.prow-meta { display: block; font-size: 12px; color: var(--muted); }
.prow-exp { display: flex; flex-direction: column; align-items: flex-end; flex: none; padding: 3px 8px; border-radius: 8px; line-height: 1.25; }
.prow-exp b { font-size: var(--t-cap); font-weight: 600; }
.prow-exp small { font-size: 11px; }
.prow-exp.x-ok { background: var(--ok-bg); color: var(--ok); }
.prow-exp.x-watch { background: var(--warn-bg); color: var(--warn); }
.prow-exp.x-bad { background: var(--error-bg); color: var(--error); }
.prow-exp.x-none { background: var(--c-other); color: var(--muted); }
.big-cell .big-kg { font-weight: 700; }