/* 入荷管理 / 発注計算 -- page-scoped styles only (all rules prefixed .proc-),
   loaded additively like mobile-fit-addon.css. Never touches any selector
   outside this page. PC = dense one-row-per-product table. Mobile (<=767px)
   swaps to per-product cards -- never transform:scale, never ellipsis. */

.proc-page { padding: 16px; max-width: 100%; box-sizing: border-box; color: var(--foreground, #0f172a); }
.proc-page * { box-sizing: border-box; }

.proc-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.proc-toolbar-spacer { flex: 1 1 auto; }
/* Groups the Amazon-sync button with its own "同期済み" status label into
   exactly one flex/grid item (matters for the mobile 3-column grid below);
   display:contents keeps it completely invisible to layout everywhere else
   (PC), so the two children flow exactly as before. */
.proc-toolbar-amz-wrap { display: contents; }
.proc-sync-status { font-size: 12px; color: #16a34a; font-weight: 600; white-space: nowrap; }
.proc-amz-badge { font-size: 10px; color: #b45309; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
.proc-sku-chip { display: inline-flex; align-items: center; }

.proc-list-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.proc-list-table th, .proc-list-table td { padding: 8px 10px; border-bottom: 1px solid #e2e8f0; text-align: left; white-space: nowrap; }
.proc-list-table tr { cursor: pointer; }
.proc-list-table tr:hover { background: #f8fafc; }

.proc-header-grid { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px; align-items: flex-end; }
.proc-field { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.proc-field label { font-size: 12px; color: #64748b; font-weight: 600; white-space: nowrap; }
.proc-field-memo { flex: 1 1 220px; min-width: 160px; }
.proc-field-memo input { width: 100%; }

.proc-section-title { font-size: 15px; font-weight: 700; margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }

.proc-capacity-msg { padding: 10px 12px; border-radius: 8px; background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; font-size: 13px; margin-bottom: 10px; line-height: 1.5; }
.proc-capacity-msg.error { background: #fee2e2; border-color: #ef4444; color: #991b1b; }

/* ---- PC dense table (>=768px) ---- */
.proc-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.proc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.proc-table th, .proc-table td { padding: 6px 8px; border-bottom: 1px solid #eef2f7; text-align: right; white-space: nowrap; }
.proc-table th:first-child, .proc-table td:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 120px; }
.proc-table thead th { background: #f1f5f9; font-weight: 700; color: #334155; white-space: normal; }
.proc-table tbody tr:hover { background: #f8fafc; }
.proc-table input[type="number"], .proc-table input[type="text"] { width: 84px; text-align: right; padding: 3px 5px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12.5px; }
/* Number input spinner (▲▼) removed everywhere on this page -- the field is
   for quick keyboard entry (Enter moves to the next row), the stepper
   buttons only get in the way. Both engines need their own rule: Chromium
   targets the pseudo-elements directly, Firefox has no such pseudo-element
   and instead honors -moz-appearance:textfield on the input itself. */
.proc-page input[type="number"]::-webkit-inner-spin-button,
.proc-page input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.proc-page input[type="number"] {
  -moz-appearance: textfield;
}
/* 注文セット数(round 41): その商品の「セット数・ロット」をstepとした上下
   矢印での増減を復活。この列だけ上のグローバル抑制を打ち消す(他の数値
   入力欄はEnterでの行送りを優先するため矢印なしのまま維持)。 */
.proc-page input[type="number"].proc-order-sets-input::-webkit-inner-spin-button,
.proc-page input[type="number"].proc-order-sets-input::-webkit-outer-spin-button {
  -webkit-appearance: auto;
  margin: 0 0 0 2px;
}
.proc-page input[type="number"].proc-order-sets-input {
  -moz-appearance: number-input;
}
/* round50 TASK3/4: パレット割当のset/箱inputにも同じ理屈でspinnerを復活
   させる -- 上のグローバル抑制ルールに埋もれて見えなくなっていたのが
   「spinnerが見えない/使えない」の直接原因。stepは商品マスタの最新
   packing_sets/packing_boxesをJS側で都度セットする(このCSSはON/OFFの
   切替だけを担当)。
   round53(原因の再確認): -webkit-appearance:autoは「ブラウザ標準の
   spinnerに戻す」だけで、Chromeの標準spinnerはそれ自体がhover/focus
   でしか出ない(opacity:0→1のUA内部トランジション)。無地のinput type=
   numberで検証済み: 素のappearance:autoだけではhover/focus時にしか
   矢印が見えず、「最初は出ていた(触っていた)→触らなくなったら消えた
   ように見えた→また操作(hover/focus)すると出た」という報告と一致する。
   ここへ明示的にopacity:1を足すことで、このUA内部の不透明度トランジ
   ションを上書きし、hover/focus状態に関係なく常時表示にする。 */
.proc-page input[type="number"].proc-pallet-sets-input::-webkit-inner-spin-button,
.proc-page input[type="number"].proc-pallet-sets-input::-webkit-outer-spin-button,
.proc-page input[type="number"].proc-pallet-boxes-input::-webkit-inner-spin-button,
.proc-page input[type="number"].proc-pallet-boxes-input::-webkit-outer-spin-button {
  -webkit-appearance: auto;
  opacity: 1;
  margin: 0 0 0 2px;
}
.proc-page input[type="number"].proc-pallet-sets-input,
.proc-page input[type="number"].proc-pallet-boxes-input {
  -moz-appearance: number-input;
}
.proc-table .proc-lock-btn { border: none; background: transparent; cursor: pointer; font-size: 15px; padding: 2px 4px; }
/* round78: 入力状態(LOCK)で行を青く塗るのは廃止。行背景は商品マスタの
   background_color(tr/カードのinline style)だけが決める。入力欄は常に白い
   ボックスとして行背景の上に載る(自動=disabledの注文セット数は既存の
   ブラウザ標準disabled表現のまま)。先頭のsticky「商品」セルは横スクロール時に
   下の列が透けないよう不透明な背景が必要なので、行と同じ色を継承させる。 */
.proc-table tr.proc-row-locked { background: transparent; }
.proc-table tr[data-testid^="row-procurement-item-"][style] td:first-child { background: inherit; }
.proc-table tr[data-testid^="row-procurement-item-"] input[type="number"]:not(:disabled) { background: #fff; }
.proc-table tr.proc-row-inactive { opacity: .55; }
.proc-table tfoot td { font-weight: 700; background: #f8fafc; border-top: 2px solid #cbd5e1; }

.proc-cards { display: none; }

/* ---- Mobile (<=767px): cards replace the dense table, no horizontal scroll,
   no text truncation, all fields always visible via label:value rows ---- */
@media (max-width: 767px) {
  .proc-page { padding: 10px; }
  .proc-table-wrap { display: none; }
  .proc-cards { display: flex; flex-direction: column; gap: 10px; }
  .proc-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; background: #fff; }
  .proc-card.proc-row-locked { border-color: #93c5fd; }
  .proc-card-field input:not(:disabled) { background: #fff; }
  .proc-card.proc-row-inactive { opacity: .6; }
  .proc-card-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .proc-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .proc-card-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .proc-card-field .k { font-size: 11px; color: #64748b; }
  .proc-card-field .v { font-size: 13px; word-break: break-word; }
  .proc-card-field input { width: 100%; padding: 5px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; }
  .proc-header-grid { flex-wrap: wrap; }
  .proc-header-grid .proc-field { flex: 1 1 45%; }
  .proc-header-grid .proc-field > *:last-child { width: 100%; }
  .proc-field-memo { flex: 1 1 100%; }
  /* round: top toolbar was 1-button-per-row (12 rows of full-width buttons,
     unusably tall on a phone). A single CSS grid on .proc-toolbar itself
     (not two separate grids) produces exactly "first 3 buttons in one row,
     then the remaining 9 in a 3x3 grid" for free, in DOM order, as long as
     the spacer between them is removed from flow (display:none -- grid
     auto-placement then simply skips it) and the 9 items after it are
     unchanged in count/order: 商品マスタ管理/未着仕入管理/Excelから在庫数を
     貼り付け / 一括操作/Amazonと同期(+同期済みラベルをこの1セルにまとめる)/
     自動計算 / 保存/発注確定/新規作成 = 3+3+3. No nth-child bookkeeping
     needed. PC (>767px) is completely untouched -- this whole block is
     inside the existing max-width:767px media query. */
  .proc-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
  }
  .proc-toolbar-spacer { display: none; }
  .proc-toolbar-amz-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
  .proc-toolbar > button,
  .proc-toolbar > .proc-toolbar-group,
  .proc-toolbar button {
    width: 100%;
    min-width: 0;
  }
  .proc-toolbar button {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    font-size: 13px;
    line-height: 1.25;
    padding: 8px 4px;
    min-height: 40px;
    text-align: center;
    box-sizing: border-box;
  }
  .proc-toolbar .proc-sync-status { font-size: 10.5px; text-align: center; white-space: normal; }
  .proc-list-table th, .proc-list-table td { white-space: normal; font-size: 12px; padding: 6px; }
}

.proc-pallet-list { display: flex; flex-direction: column; gap: 10px; }
.proc-pallet { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; }
.proc-pallet.proc-pallet-violation { border-color: #f59e0b; background: #fffbeb; }
.proc-pallet-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.proc-pallet-util { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #e2e8f0; }
.proc-pallet-util.over { background: #fee2e2; color: #991b1b; font-weight: 700; }
.proc-pallet-items { display: flex; flex-direction: column; gap: 4px; }
.proc-pallet-item-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.proc-pallet-item-row input { width: 70px; padding: 3px 5px; border: 1px solid #cbd5e1; border-radius: 4px; }
.proc-pallet-add-row { margin-top: 6px; }
.proc-pallet-add-row select { padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12.5px; width: 100%; max-width: 260px; }
.proc-pallet-item-row select { padding: 3px 5px; border: 1px solid #cbd5e1; border-radius: 4px; }
.proc-pallet-split-warning { margin: 4px 0 10px; padding: 8px 10px; border: 1px solid #fcd34d; border-radius: 6px; background: #fffbeb; }

.proc-incoming-cell-btn { border: none; background: transparent; color: #2563eb; cursor: pointer; text-decoration: underline; font: inherit; padding: 0; }

.proc-incoming-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }

/* 未着仕入管理: 発注番号単位のグループカード -- 商品行を主単位から外し、
   1発注=1カードにまとめる。通常は商品内訳を折りたたみ、「詳細を見る」で
   だけ展開する(常時全商品縦表示にしない = モバイルで画面が縦に伸びきる
   問題を防ぐ)。 */
.proc-incoming-group-list { display: flex; flex-direction: column; gap: 10px; }
.proc-incoming-group { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; background: #fff; }
.proc-incoming-group-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.proc-incoming-group-title-wrap { flex: 1 1 auto; min-width: 140px; }
.proc-incoming-group-title { font-weight: 700; font-size: 15px; }
.proc-incoming-group-date { font-size: 12px; color: #64748b; margin-top: 2px; }
.proc-incoming-group-meta { font-size: 12px; color: #64748b; white-space: nowrap; }
.proc-incoming-group-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.proc-incoming-group-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 2px; }
.proc-incoming-group-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid #f8fafc; font-size: 12.5px; }
.proc-incoming-group-item .name { flex: 1 1 auto; min-width: 120px; }
.proc-incoming-group-item input[type="number"] { width: 80px; padding: 3px 5px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12.5px; text-align: right; }
/* 商品1件だけ入荷済み->未着に戻すクリック可能バッジ -- 見た目のサイズは通常の
   バッジのまま、ホバーで押せることだけ分かるようにする(大きなボタン化しない)。 */
.proc-incoming-item-badge-clickable { cursor: pointer; }
.proc-incoming-item-badge-clickable:hover { opacity: .7; }
@media (max-width: 767px) {
  .proc-incoming-group-head { flex-direction: column; align-items: stretch; gap: 4px; }
  .proc-incoming-group-meta { white-space: normal; }
  .proc-incoming-group-actions > button { flex: 1 1 auto; }
}

.proc-product-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 6px; border-bottom: 1px solid #f1f5f9; }
.proc-product-row input, .proc-product-row select { padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12.5px; }

/* 商品マスタ 背景色 (round 40): 行全体に薄いパステル背景を敷いた上でも、
   スウォッチのトリガーボタン自体は常にはっきり見える固定の白背景+枠線
   にする(行の背景色と紛れないように)。 */
.proc-bg-swatch-trigger { border: 1px solid #cbd5e1; background: #fff; border-radius: 4px; padding: 2px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.proc-bg-swatch-trigger:focus { outline: 2px solid #93c5fd; outline-offset: 1px; }

/* placeholder is always a light gray hint, never a stored value (spec: 最大分割
   パレット数 shows "無制限" as placeholder only, never written to the DB as text) */
.proc-page input::placeholder { color: #9aa5b1; }

/* 常時非表示のツールチップ(spec round 9 items 1-2): ラベル/入力欄どちらに
   hoverしても、キーボードでinputへfocusしても(:focus-within)表示される。
   縦幅を増やさない -- 通常時は完全に非表示(opacity/visibility両方)。 */
.proc-tooltip { position: relative; }
.proc-tooltip-bubble {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 4px;
  background: #1e293b; color: #fff; font-size: 11px; line-height: 1.4;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .12s; z-index: 30;
}
.proc-tooltip:hover .proc-tooltip-bubble,
.proc-tooltip:focus-within .proc-tooltip-bubble {
  opacity: 1; visibility: visible;
}
/* round 11: 一括編集テーブルのsticky headerで使うツールチップは、上方向だと
   横スクロールラッパーの上端で見切れる可能性があるため下方向へ開く。 */
.proc-tooltip-below .proc-tooltip-bubble {
  bottom: auto; top: 100%; margin-bottom: 0; margin-top: 4px; z-index: 40;
}

/* 商品マスタ一括編集(spec items 11-18) -- Excel風の密な表。列が多いため常に
   横スクロール許容(モバイルで無理に幅を縮めない/transform:scaleしない/
   1文字ずつ折り返しない)。PCでもモバイルでも同じ1レイアウトで成立させる。 */
.proc-bulk-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; max-width: 100%; }
.proc-bulk-table { border-collapse: collapse; font-size: 12.5px; width: max-content; }
.proc-bulk-table th, .proc-bulk-table td { padding: 4px 5px; border-bottom: 1px solid #eef2f7; border-right: 1px solid #f1f5f9; white-space: nowrap; text-align: left; }
.proc-bulk-table thead th { background: #f1f5f9; font-weight: 700; color: #334155; position: sticky; top: 0; z-index: 1; }
.proc-bulk-table th:nth-child(2), .proc-bulk-table td:nth-child(2) { position: sticky; left: 0; background: #fff; z-index: 1; }
.proc-bulk-table thead th:nth-child(2) { z-index: 2; background: #f1f5f9; }
.proc-bulk-table tr.proc-bulk-row-dirty td { background: #fef9c3; }
.proc-bulk-table tr.proc-bulk-row-dirty td:nth-child(2) { background: #fef08a; }
/* round 14: 各inputは呼び出し側(procurement-CACHEFIX22.js)でinline styleの
   widthを列ごとに個別指定するため、ここでは幅を強制しない(内容に応じた
   最小限の幅にするため -- spec item 3)。padding/border/font-sizeだけ共通化。 */
.proc-bulk-table input[type="text"], .proc-bulk-table input[type="number"] { padding: 3px 4px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12.5px; box-sizing: content-box; }
.proc-bulk-mini { font-size: 11.5px; color: #64748b; white-space: nowrap; }
.proc-bulk-table input.proc-bulk-cell-conflict { border-color: #ef4444; background: #fee2e2; color: #991b1b; }

/* 一括編集セル内ポップオーバー(round 11, 右端列の画面外はみ出しをround 14で
   修正) -- 混載禁止/Amazon SKUをセル幅に縛られず読める浮きボックスとして
   編集する。列内の件数トリガーはリンク風。ポップオーバー自体はJS側で
   position:fixed + getBoundingClientRect()による座標を直接styleへ指定する
   (procurement-CACHEFIX22.jsのCellPopover) -- position:fixedは
   .proc-bulk-wrapのoverflow-x:autoにも表全体のスクロールにも一切影響され
   ないため、右端の列でも画面外や表の枠内に見切れない。ここでは見た目
   (背景/枠線/影/paddingとmax-width上限)だけを定義し、position/top/left/
   rightは常にJSのinline styleで上書きされる。 */
.proc-cell-popover-trigger { border: none; background: transparent; cursor: pointer; padding: 0; font: inherit; color: #2563eb; text-decoration: underline dotted; white-space: nowrap; }
.proc-cell-popover { position: fixed; z-index: 90; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 10px; width: max-content; max-width: calc(100vw - 24px); white-space: normal; }
.proc-cell-popover-body { white-space: normal; }
.proc-cell-popover-body .proc-collapse-body, .proc-cell-popover-body > div { white-space: normal; }

/* 商品を追加のテンプレート選択一覧(引用元候補) -- 商品数が増えても1商品=1行
   のnowrapで、狭い画面では横スクロールに逃がす(1文字ずつの折り返しはしない、
   既存のmobile list/table scroll policyと同じ考え方) */
.proc-template-row { display: flex; align-items: center; gap: 14px; padding: 7px 10px; border-bottom: 1px solid #f1f5f9; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.proc-template-row:last-child { border-bottom: none; }
.proc-template-row:hover { background: #f1f5f9; }

/* 混載禁止商品/Amazon SKU の折りたたみ表示(spec items 7-10, 12-16) -- 通常時は
   1行のサマリーのみ、クリック/タップで展開。PC/モバイル共通の1レイアウトで
   自然に成立させる(モバイル専用の別ルールは不要)。 */
.proc-collapse { margin-top: 10px; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; }
.proc-collapse-header { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: #f8fafc; border: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #334155; text-align: left; }
.proc-collapse-header .proc-collapse-summary { margin-left: auto; font-weight: 500; color: #64748b; white-space: nowrap; }
.proc-collapse-header .proc-collapse-caret { color: #94a3b8; font-size: 11px; flex-shrink: 0; }
.proc-collapse-body { padding: 10px; border-top: 1px solid #e2e8f0; background: #fff; }

/* ラベルカラー picker */
.proc-color-picker { position: relative; }
.proc-color-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px;
  background: #fff; font-size: 13px; cursor: pointer; text-align: left;
}
.proc-color-trigger:focus { outline: 2px solid #93c5fd; outline-offset: 1px; }
.proc-color-list {
  position: absolute; z-index: 50; top: 100%; left: 0; margin-top: 4px;
  min-width: 160px; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.proc-color-option {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  font-size: 13px; cursor: pointer;
}
.proc-color-option:hover { background: #f1f5f9; }

/* round42 TASK2: 商品別発注計算の箱数列 -- 表示専用の理論箱数(order_sets/
   packing_sets*packing_boxes)が整数でない場合の視覚的注意(エラー表示ではな
   い、文字色は変えない)。既存の背景色パレットのpastel-redと同じ薄い赤を再利
   用(round40 PRODUCT_BG_COLORS)。 */
.proc-boxes-fraction { background: #fee2e2; }

/* ---- round121: 発注計算のモバイル(<=767px)を「PC版をコンパクトにした一覧」へ ----
   本番実測(390px, 15商品の確定済み注文): 上の旧モバイル規則は商品ごとのカード(.proc-cards, 1商品 402px)で、
   ページ全体 約10,000px(PC 2,655px / 1商品 40px)。原因は ①商品別発注計算がカード縦積み(6,013px)
   ②パレット割当の各行・見出しが折り返して3倍の高さ(3,294px) ③ヘッダー項目が2列×全幅入力(387px)。
   ここで(後勝ちで)上書きする: PCと同じ表(.proc-table、全15列・同じ並び)をモバイルでも表示し、カードは隠す。
   余白・行高・文字・入力幅を詰め、全列が入らない分は表の中(.proc-table-wrap の overflow-x:auto)だけ横スクロール。
   パレットの各行はPCと同じ1行のまま(折り返さない)、はみ出す分は各パレットの中だけ横スクロール。
   transform:scale は使わない。情報・機能は削らない。PC(>=768px)は対象外。
   mobile-fit-addon.css の全表共通 `th,td{padding:5px 8px !important;white-space:nowrap !important}` より強い指定にする。 */
@media (max-width: 767px) {
  /* 商品別 発注計算: カード → PCと同じ表 */
  .proc-table-wrap { display: block; -webkit-overflow-scrolling: touch; }
  .proc-cards { display: none; }
  .proc-table { font-size: 11px; width: max-content; min-width: 100%; }
  .proc-table th, .proc-table td { padding: 2px 4px !important; line-height: 1.25; }
  .proc-table thead th { white-space: normal !important; font-size: 10.5px; min-width: 44px; vertical-align: bottom; }
  .proc-table th:first-child, .proc-table td:first-child { min-width: 0; max-width: none; }
  .proc-table input[type="number"], .proc-table input[type="text"] { width: 54px; padding: 1px 3px; font-size: 11px; height: 22px; }
  .proc-table input[type="number"].proc-order-sets-input { width: 62px; }
  .proc-table .proc-lock-btn { font-size: 13px; padding: 0 2px; line-height: 1; }
  .proc-table .proc-incoming-cell-btn { font-size: 11px; padding: 0 4px; }

  /* 見出し・余白 */
  .proc-section-title { font-size: 13.5px; margin: 10px 0 4px; gap: 6px; }
  .proc-section-title button { height: 26px; padding: 0 8px; font-size: 11.5px; }

  /* ヘッダー(ラベルカラー/発注番号/発注日/使用PL数/…/メモ): PCと同じ「ラベル上・入力下」の項目を横に詰めて並べる */
  .proc-page .shadcn-card:has(> div > .proc-header-grid) > div { padding: 8px !important; }
  .proc-header-grid { gap: 4px 8px; margin-bottom: 0; }
  .proc-header-grid .proc-field { flex: 0 0 auto; gap: 1px; }
  .proc-header-grid .proc-field > *:last-child { width: auto; }
  .proc-header-grid .proc-field label { font-size: 10.5px; }
  .proc-header-grid input:not([type="checkbox"]):not([type="radio"]), .proc-header-grid button[role="combobox"] { height: 28px; font-size: 12px; padding-top: 2px; padding-bottom: 2px; }
  .proc-field-memo { flex: 1 1 100%; }
  .proc-field-memo > *:last-child { width: 100% !important; }

  /* 上部ボタン(3列グリッドの構造は round58/59 のまま、大きさだけ詰める) */
  .proc-toolbar { gap: 4px; margin-bottom: 8px; }
  .proc-toolbar button { font-size: 11.5px; line-height: 1.2; padding: 3px 3px; min-height: 30px; }

  /* パレット割当: 見出し・各商品行ともPCと同じ1行。はみ出す分は各パレットの中だけ横スクロール */
  .proc-pallet-list { gap: 6px; }
  .proc-pallet { padding: 6px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .proc-pallet-head { flex-wrap: nowrap; gap: 6px; margin-bottom: 2px; font-size: 12px; white-space: nowrap; width: max-content; min-width: 100%; }
  .proc-pallet-head .proc-pallet-util { font-size: 11px; padding: 1px 6px; }
  .proc-pallet-head button { height: 24px; padding: 0 8px; font-size: 11px; }
  .proc-pallet > div[style] { font-size: 11px !important; margin-bottom: 2px !important; white-space: nowrap; }
  .proc-pallet-items { gap: 2px; width: max-content; min-width: 100%; }
  .proc-pallet-item-row { flex-wrap: nowrap; gap: 4px; font-size: 11px; white-space: nowrap; }
  .proc-pallet-item-row > span:first-child { min-width: 84px !important; }
  .proc-pallet-item-row input { width: 56px; padding: 1px 3px; height: 22px; font-size: 11px; }
  .proc-pallet-item-row select { font-size: 11px !important; padding: 1px 3px; height: 22px; }
  .proc-pallet-item-row button { height: 22px; padding: 0 6px; font-size: 11px; }
  .proc-pallet-add-row { margin-top: 3px; }
  .proc-pallet-add-row select { font-size: 11px; padding: 2px 4px; height: 24px; }
}