/* webapp_ST 追加スタイル（Tailwind を補完） */
[x-cloak] { display: none !important; }

/* 倉庫現場向け: 手袋・薄暗い前提の大きなタップターゲット */
.tap { min-height: 56px; }
.tap-lg { min-height: 64px; }

/* テンキー */
.keypad-btn {
  min-height: 60px;
  font-size: 1.5rem;
  font-weight: 600;
  border-radius: 0.75rem;
  border: 1px solid #cbd5e1;
  background: #fff;
}
.keypad-btn:active { background: #e2e8f0; }

/* 入庫/出庫の画面色支配 */
.mode-inbound  { --mode: #2563eb; --mode-dark: #1d4ed8; }
.mode-outbound { --mode: #ea580c; --mode-dark: #c2410c; }
.mode-bar  { background: var(--mode); }
.mode-text { color: var(--mode); }
.mode-btn  { background: var(--mode); }
.mode-btn:active { background: var(--mode-dark); }

/* 特大の在庫数表示 */
.qty-display { font-variant-numeric: tabular-nums; }

/* テーブルのスティッキーヘッダ・行ヘッダ（ピボット） */
.pivot th.sticky-col, .pivot td.sticky-col { position: sticky; left: 0; background: #fff; }
.pivot thead th { position: sticky; top: 0; background: #f8fafc; z-index: 2; }