/* 在庫（照会・棚卸入力） */

/* 照会の表：2つを1つに畳んだぶん、セルが2段になる（残量＋消費/月、割引価格＋定価）。
   従属する数字は小さく下に置く＝独立した列にすると数値の列が6本並んで読めない。 */
.inv-sub { font-size: var(--text-3xs); color: var(--color-text-subtle); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* 最終棚卸は表の上に1回。**行ごとに繰り返さない**＝棚卸は日付ごとに全品まとめて
   入れるので普通は全行同じで、列にすると同じ日付が12回並ぶだけになる。 */
.inv-asof {
  display: flex; align-items: center; gap: 10px;   /* 「N件が古いままです」が見出しにくっつかない */
  font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 8px;
}
.inv-asof:empty { display: none; }
.inv-asof b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.inv-asof-warn {
  padding: 1px 8px; border-radius: var(--radius-pill);
  background: rgba(245, 158, 11, 0.16); color: var(--color-warning-text); font-weight: var(--fw-semibold);
}
/* ズレている行にだけ出す日付＝「追うのをやめ忘れ」の手掛かり */
.inv-stale {
  margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill);
  background: rgba(245, 158, 11, 0.16); color: var(--color-warning-text);
  font-size: var(--text-3xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}

/* 価格帯のバー。余った幅はここが引き取る＝一番広い列にして可視化に回す */
.inv-band-cell { min-width: 150px; }
.inv-band {
  position: relative; height: 10px; border-radius: var(--radius-sm);
  background: linear-gradient(to right, #2ecc71, #f39c12, #e74c3c);
}
.inv-band i {
  position: absolute; top: -3px; width: 4px; height: 16px;
  transform: translateX(-50%); background: var(--color-text); border-radius: var(--radius-xs);
}
.inv-band-ends {
  display: flex; justify-content: space-between;
  font-size: var(--text-3xs); color: var(--color-text-subtle); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.inv-band-none { color: var(--color-text-subtle); font-size: var(--text-2xs); }

/* 棚卸入力の商品名の隣に出る「追うのをやめる」。行の削除（🗑＝その日のデータ）とは
   別物なので、商品の定義に一番近い名前のセルに置き、ホバーで初めて出す。 */
.inv-stop {
  border: none;
  background: none;
  cursor: pointer;
  margin-left: 6px;
  padding: 0 3px;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.inv-bulk-row:hover .inv-stop { opacity: 1; }
.inv-stop:hover { color: var(--color-danger-text); }
/* 指ではホバーが出せないので、タッチ端末では薄く常時出す */
@media (hover: none) { .inv-stop { opacity: 0.45; } }

/* ============================================================
   在庫管理タブ — 買い時バッジ・アラート・行色分け
   ============================================================ */
.inv-badge { font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; display: inline-block; }
.inv-badge-sm { font-size: var(--text-3xs); padding: 1px 7px; }
#inventoryPanel .balance-table td.tr, #inventoryPanel .balance-table th { font-variant-numeric: tabular-nums; }
/* 要購入・買い時の行を薄く塗る。**`.inv-buy-row` との組み合わせ指定にしない**＝
   買い時分析の表を一覧に統合したときに、その入れ物のクラスが無くなって塗りが消えた。
   状態を表すクラス単体で効かせる。ホバーは塗りより優先（いまどの行を見ているか）。 */
#inv2-all-tbody tr.inv-row-restock { background: rgba(239, 68, 68, 0.05); }
#inv2-all-tbody tr.inv-row-deal { background: rgba(16, 185, 129, 0.05); }
#inv2-all-tbody tr:hover td { background: var(--color-row-hover); }

/* 買い物リスト アラート */
.inv-alert-box {
  background: #fff8ed; border: 1px solid #f6d6a8; border-radius: var(--radius-lg);
  padding: 12px 16px; margin-bottom: 18px;
}
.inv-alert-title { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-warning-text); margin-bottom: 10px; }
.inv-alert-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-alert-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-surface); border: 1px solid #f6d6a8; border-radius: var(--radius-pill);
  padding: 4px 12px 4px 6px; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text);
}
.inv-alert-chip:hover { box-shadow: var(--shadow-xs); }
.inv-alert-meta { font-size: var(--text-2xs); font-weight: var(--fw-normal); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

/* 「価格を補完」で値が入った行を一瞬光らせる＝どこが変わったのかが分かる */
.inv-filled > td { animation: inv-filled-flash 1.6s ease-out; }
@keyframes inv-filled-flash {
  from { background: rgba(75, 124, 243, 0.18); }
  to { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .inv-filled > td { animation: none; } }

/* 棚卸の行に出す「この ASIN を価格ウォッチが見ているか」。**商品を差し替えた時に
   補完できるかがその場で分かる**ための印で、未登録のときはそのまま登録ボタンになる。 */
.inv-watch {
  flex-shrink: 0; width: 18px; text-align: center; line-height: 1;
  font-size: var(--text-sm); user-select: none;
}
.inv-watch--on { opacity: .9; }
.inv-watch--off { opacity: .35; filter: grayscale(1); }
.inv-watch--none {
  cursor: pointer; color: var(--color-primary); font-weight: var(--fw-bold);
  border-radius: var(--radius-sm);
}
.inv-watch--none:hover { background: var(--color-primary-light); }

/* ── 購入記録（一覧＋登録・編集のモーダル） ──────────────────────
   モーダルの枠・欄・チップは共通部品（css/parts/modal.css）。ここは購入記録だけの部分 */
.ipm-sibs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ipm-sibs-l { font-size: var(--text-2xs); color: var(--color-text-subtle); margin-right: 4px; }
.ipm-sib-new { border-style: dashed; }
.fxc-calc b.ipm-wait { color: var(--color-warning-text); }

.ipl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ipl-head h2 { margin: 0; font-size: var(--text-md); color: var(--color-text); }
.ipl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ipl-empty { text-align: center; color: var(--color-text-subtle); padding: 40px 0; font-size: var(--text-base); line-height: 1.9; }
.ipl-empty span { font-size: var(--text-xs); }
/* 行そのものが編集への入口（FX の一覧と同じ作り） */
.ipl-table tbody tr.ipl-row { cursor: pointer; }
.ipl-table tbody tr.ipl-row:hover td, .ipl-table tbody tr.ipl-row:focus-visible td { background: var(--color-primary-light); }
.ipl-table tbody tr.ipl-row:focus-visible { outline: none; }
.ipl-table td { text-align: left; }
.ipl-date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.ipl-date.is-wait { color: var(--color-warning-text); font-weight: var(--fw-semibold); }
.ipl-cat { font-weight: var(--fw-semibold); color: var(--color-text); }
.ipl-table td.ipl-qty { text-align: right; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--color-text); }
.ipl-qty small { font-size: var(--text-2xs); font-weight: var(--fw-normal); color: var(--color-text-subtle); margin-left: 2px; }
.ipl-sp { font-size: var(--text-xs); color: var(--color-text); white-space: nowrap; }
.ipl-sub { font-size: var(--text-2xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.ipl-st {
  display: inline-block; padding: 0 9px; border-radius: var(--radius-pill, 999px); white-space: nowrap;
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); line-height: 1.8;
  color: var(--color-success-text); background: var(--color-success-light);
}
.ipl-st--wait { color: var(--color-warning-text); background: rgba(245, 158, 11, 0.12); }