.table-wrap {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #777;
  padding: .35rem;
  white-space: nowrap;
}

.lines {
  table-layout: fixed;
  width: 100%;
}

.lines th,
.lines td {
  white-space: normal;
}

.lines .line-select {
  width: 5%;
}

.lines .line-send {
  width: 5%;
}

.lines .line-flags {
  width: 8%;
}

.lines .line-product {
  width: 31%;
}

.lines .line-qty,
.lines .line-rate {
  width: 10%;
}

.lines .line-money {
  width: 9%;
}

.lines .line-stock {
  width: 13%;
}

.lines input[size="5"] {
  box-sizing: border-box;
  width: 5em;
  max-width: 100%;
}

.lines small {
  display: block;
  font-size: .8em;
}

.line-unsent {
  color: #666;
  opacity: .65;
}

/* 絞り込みは tbody 単位で隠し、明細の二段を常に一緒に扱う。 */
.lines[data-filter="send"] tbody.line-unsent,
.lines[data-filter="flagged"] tbody.line:not(.line-flagged) {
  display: none;
}

.flag-red,
.stock-short {
  color: #a00;
}

/* 入庫の印は列を増やさず、在庫欄で分かるようにする。 */
.nyuko-mark {
  display: block;
  white-space: nowrap;
  font-size: .8em;
}

.flag-yellow {
  color: #805b00;
}

.differs {
  background: #fee;
}

.line-detail > td {
  padding: .5rem 1rem;
}

.line-comparison {
  margin: .5rem 0;
}

.line-choice button {
  display: block;
  margin: .25rem 0;
}