/* ═══════════════════════════════════════════════════════════
   INVENTORY.CSS — tela unificada "Estoque" (Módulos 2 + 3,
   estilo Bling): barra de filtros, célula de quantidade, miniatura
   de foto, grid de fotos no modal, e estoque virtual multiloja.
   A maior parte do visual usa .card, .data-table e .badge de
   main.css.
   ═══════════════════════════════════════════════════════════ */

#page-products .data-table td:last-child,
#page-movements .data-table td:last-child {
  white-space: nowrap;
}

/* ── BARRA DE FILTROS ── */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-bar .flt-search {
  flex: 1;
  min-width: 180px;
  background: var(--s2); border: 1px solid var(--bd); border-radius: 7px;
  color: var(--tx); font-family: 'Inter', sans-serif; font-size: 13px; padding: 8px 11px;
  outline: none;
}
.filter-bar .flt-search:focus { border-color: var(--or); }
.filter-bar select {
  background: var(--s2); border: 1px solid var(--bd); border-radius: 7px;
  color: var(--tx); font-family: 'Inter', sans-serif; font-size: 12px; padding: 8px 10px;
  outline: none;
}
.flt-check {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--mu); white-space: nowrap; cursor: pointer;
}

/* ── CÉLULA DE QUANTIDADE (+/-) ── */
.qty-cell { display: flex; align-items: center; gap: 6px; }
.qty-cell span { min-width: 20px; text-align: center; font-weight: 600; }
.qty-btn { padding: 2px 8px; line-height: 1; }

/* ── AÇÕES DE LINHA ── */
.row-actions { display: flex; gap: 4px; }
.row-actions .btn-sm { padding: 4px 7px; }

/* ── MINIATURA DE FOTO NA TABELA ── */
.row-thumb {
  width: 36px; height: 36px; border-radius: 6px; object-fit: cover;
  border: 1px solid var(--bd); display: block;
}
.row-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--s2); color: var(--mu); font-size: 11px;
}

/* ── GRID DE FOTOS NO MODAL DE PRODUTO ── */
.photo-grid {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.photo-cell {
  width: 72px; height: 72px; border-radius: 8px; overflow: hidden; position: relative;
  border: 1px solid var(--bd); flex-shrink: 0;
}
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-rm {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  background: rgba(0,0,0,.75); color: #fff; border: none; border-radius: 50%;
  cursor: pointer; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.photo-add {
  display: flex; align-items: center; justify-content: center;
  background: var(--s2); border: 1.5px dashed var(--bd); border-radius: 8px;
  font-size: 24px; color: var(--mu); cursor: pointer;
}
.photo-add:hover { border-color: var(--or); color: var(--or); }

/* ── ESTOQUE VIRTUAL POR LOJA (multiloja) ── */
.store-stock-list { display: flex; flex-direction: column; gap: 8px; }
.store-stock-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--s2); border: 1px solid var(--bd); border-radius: 7px; padding: 8px 11px;
  font-size: 12px;
}
.store-stock-row input {
  width: 90px; background: var(--s3); border: 1px solid var(--bd); border-radius: 6px;
  color: var(--tx); font-family: 'Inter', sans-serif; font-size: 12px; padding: 5px 8px; outline: none;
}
.store-stock-row input:focus { border-color: var(--or); }