/* 出荷・在庫管理 -- page-scoped styles only (all rules prefixed .ship-),
   loaded additively like procurement-addon.css. PC = dense grid for daily
   input (Excel代替なので入力速度重視). Mobile (<=767px): horizontal scroll
   for the daily grid (never transform:scale, never shrink columns), card
   layout for stockout/summary. */

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

.ship-header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.ship-year-month { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ship-year-month label { font-size: 12px; color: #64748b; font-weight: 600; margin-right: 4px; }

.ship-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid #e2e8f0; margin-bottom: 14px; }
.ship-tab-btn { padding: 8px 14px; border: none; background: transparent; cursor: pointer; font-size: 13.5px; font-weight: 600; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ship-tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; }
.ship-tab-btn:hover { color: #334155; }

.ship-section-title { font-size: 15px; font-weight: 700; margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- 出荷入力: 日別グリッド ---- */
.ship-grid-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.ship-grid { border-collapse: collapse; font-size: 12.5px; width: max-content; min-width: 100%; }
.ship-grid th, .ship-grid td { padding: 4px 6px; border-bottom: 1px solid #eef2f7; border-right: 1px solid #f1f5f9; text-align: right; white-space: nowrap; }
.ship-grid th:first-child, .ship-grid td:first-child { text-align: center; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 40px; }
.ship-grid thead th { background: #f1f5f9; font-weight: 700; color: #334155; position: sticky; top: 0; z-index: 2; }
.ship-grid thead th:first-child { z-index: 3; }
/* round48 TASK3: theadが「モデル」行/「サイズ」行の2段になったため、2段目が
   1段目の上に重なってしまわないよう、2段目だけ1段目の実高さ分だけ
   top位置をずらす(font-size 12.5px + padding 4px*2 + border 1pxの実測値)。
   「日」列の2段目は空の埋めセル(左固定列の位置合わせ用)なので、この
   ルールを含め他のth全般と同じ扱いでよい。 */
.ship-grid thead tr:last-child th { top: 25px; }
/* round42 TASK3: 月計の直前に挿入する商品名ヘッダー再掲(ShipProductHeaderRow
   のrepeat=true)。theadと同じ背景色/太字/文字色/罫線/高さ/フォント/
   alignment(すべて共通の.ship-grid th,tdルールおよびこの1行のみ) -- ただし
   position:stickyは付けない(2つ目の固定ヘッダーになってしまうのを防ぐ、
   スクロール中の可読性補助として中間地点に普通に流れる行として置く)。 */
.ship-grid tr.ship-header-repeat th:not(:first-child) { background: #f1f5f9; font-weight: 700; color: #334155; }
.ship-grid tr.ship-header-repeat th:first-child { font-weight: 700; color: #334155; }
.ship-grid tbody tr:hover td { background: #f8fafc; }
.ship-grid tr.ship-row-summary td { background: #f8fafc; font-weight: 700; border-top: 2px solid #cbd5e1; }
/* round43 TASK C: 列全体の背景色(親tdのinline style)が透けて見えるよう、
   入力欄自体はほぼ透明の白にする(既定のopaque白だと列色が隠れてしまう)。
   文字/枠線/focusのコントラストは維持。 */
.ship-grid input[type="number"] { width: 60px; padding: 3px 4px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12.5px; text-align: right; background: rgba(255,255,255,.35); }
.ship-grid input[type="number"]:focus { background: #fff; }
.ship-page input[type="number"]::-webkit-inner-spin-button,
.ship-page input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ship-page input[type="number"] { -moz-appearance: textfield; }
.ship-grid input.ship-cell-dirty { border-color: #f59e0b; background: #fffbeb; }

/* round43 TASK D: 月初在庫の控えめな開閉トリガー。 */
.ship-opening-toggle { border: none; background: transparent; cursor: pointer; padding: 2px 4px; font-size: 11.5px; color: #64748b; font-weight: 600; }
.ship-opening-toggle:hover { color: #334155; }

.ship-monthly-summary { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; padding: 10px 14px; background: #f8fafc; border-radius: 8px; font-size: 13px; }

/* ---- 在庫増減 / 商品リスト等の行 ---- */
.ship-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.ship-row input, .ship-row select, .ship-row textarea { padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12.5px; }

/* ---- 増加/減少 segmented tab(round19 item13) ---- */
.ship-direction-tabs { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
.ship-direction-tab { padding: 5px 14px; border: none; background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #64748b; }
.ship-direction-tab + .ship-direction-tab { border-left: 1px solid #cbd5e1; }
.ship-direction-tab.active { background: #2563eb; color: #fff; }

/* ---- 在庫切れカード ---- */
.ship-stockout-list { display: flex; flex-direction: column; gap: 10px; }
.ship-stockout-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; background: #fff; }
.ship-stockout-card.active { border-color: #f59e0b; background: #fffbeb; }
.ship-stockout-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ship-stockout-title { font-weight: 700; font-size: 14.5px; }
.ship-stockout-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 14px; font-size: 12.5px; margin-bottom: 8px; }
.ship-stockout-fields .k { color: #64748b; }
.ship-stockout-fields .v { font-weight: 700; }
.ship-reservation-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; padding: 3px 0; }

/* ---- 集計テーブル ---- */
.ship-summary-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.ship-summary-table { border-collapse: collapse; font-size: 12px; width: max-content; min-width: 100%; }
.ship-summary-table th, .ship-summary-table td { padding: 5px 7px; border-bottom: 1px solid #eef2f7; border-right: 1px solid #f1f5f9; white-space: nowrap; text-align: right; }
.ship-summary-table th:first-child, .ship-summary-table td:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 120px; }
.ship-summary-table thead th { background: #f1f5f9; font-weight: 700; color: #334155; }
.ship-summary-table thead th:first-child { z-index: 2; }
/* round48 TASK4: 「モデル」列をrowSpanでまとめたため、同じモデルの2行目
   以降はモデルtd自体を出力していない -- その行のtd:first-childは実際には
   「サイズ」列になるので、上のtd:first-childルール(左固定/左寄せ/最小幅)を
   打ち消して他のサイズセルと同じ見た目に揃える。 */
.ship-summary-table tr.ship-summary-row-continued td:first-child { position: static; text-align: right; min-width: 0; }

/* ---- 着色剤集計の3表(round20 spec items1-16): SummaryTabの巨大表
   (12ヶ月+多数列、横スクロール前提が正しい既存方針)とは別の専用クラス。
   合計/Amazon/WIXはそれぞれ列数が9/10/7と少なく固定なので、table-layout:
   fixed + colgroup(月列だけ固定px、残りは列数で均等割りのcalc())により、
   PCでは常にコンテナ幅100%以内へ収まり横スクロールが発生しない
   (spec items1,3,4,10)。ラッパーにoverflow-x:autoを付けない(spec item11:
   overflow-x:hiddenで隠すだけの禁止と同じ理由 -- 中身を実際に収めるので
   スクロール自体が最初から不要。念のためoverflowはvisibleのままにして
   ヘッダーTooltipが右端付近でも切れないようにする -- spec item13)。 */
.ship-coloring-wrap { overflow: visible; border: 1px solid #e2e8f0; border-radius: 8px; }
.ship-coloring-table { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: 12px; }
.ship-coloring-table th, .ship-coloring-table td { padding: 4px 6px; border-bottom: 1px solid #eef2f7; border-right: 1px solid #f1f5f9; white-space: nowrap; text-align: right; }
/* ellipsis truncation applies to td only, never th -- a header's overflow
   MUST stay visible because its .ship-tooltip-bubble child (absolutely
   positioned, opens downward on hover/focus) would otherwise be clipped by
   the header cell's own box the instant it got overflow:hidden (spec item
   13: Tooltip must never be cut off). Data cells hold short numbers and
   never carry a tooltip, so ellipsis there is a harmless safety net only. */
.ship-coloring-table td { overflow: hidden; text-overflow: ellipsis; }
.ship-coloring-table th:first-child, .ship-coloring-table td:first-child { text-align: left; }
.ship-coloring-table thead th { background: #f1f5f9; font-weight: 700; color: #334155; }
.ship-coloring-table td.ship-coloring-auto { background: #f8fafc; }
.ship-coloring-table input[type="number"] { width: 100%; box-sizing: border-box; padding: 3px 4px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12.5px; text-align: right; }
/* モバイル(<=767px): 9〜10列の数値表をtable-layout:fixedのまま押し込むと
   Tooltipの無い項目(例: amazon_clear_color/amazon_metallic)がellipsisで
   読めなくなる(spec item14はあくまで「できる限り」であって、判読不能な
   省略までは求めていない) -- このサイトの既存モバイル方針([[orderhub_
   mobile_list_scroll_policy]]: 強制収縮をやめ自然幅+横スクロールへ戻した
   判断)と揃え、モバイルだけ自然幅+横スクロールに戻す。PC側の「横スクロール
   禁止」(spec item1)には一切影響しない。 */
@media (max-width: 767px) {
  .ship-coloring-wrap { overflow-x: auto; }
  .ship-coloring-table { table-layout: auto; width: max-content; min-width: 100%; font-size: 11px; }
  .ship-coloring-table th, .ship-coloring-table td { padding: 3px 5px; overflow: visible; text-overflow: clip; }
  .ship-coloring-table input[type="number"] { width: 56px; padding: 2px 3px; font-size: 11px; }
}

/* ---- 年度商品設定(round16再設計 spec items A-1,A-2,A-22) -- kg/set列を
   削除し並び順/商品名/モデル/サイズ/種別/表示/操作の7列だけにしたことで、
   通常はPC幅で横スクロール無しに収まる密な表。列を内容に応じた最小幅にし、
   round12時点にあった`min-width:100%`(常にフル幅へ間延びさせていた主因)は
   撤去した -- 全列がどうしても収まらない場合だけship-yp-wrapが横スクロール
   を許容する(spec item A-1: 横スクロール前提の巨大UI禁止、但し完全禁止では
   ない)。*/
.ship-yp-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; max-width: 100%; }
.ship-yp-table { border-collapse: collapse; font-size: 12.5px; width: max-content; }
.ship-yp-table th, .ship-yp-table td { padding: 5px 7px; border-bottom: 1px solid #eef2f7; white-space: nowrap; text-align: left; vertical-align: middle; }
.ship-yp-table thead th { background: #f1f5f9; font-weight: 700; color: #334155; }
.ship-yp-table input { width: 130px; padding: 3px 5px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12.5px; }

/* 常時非表示のツールチップ(spec round16 item A-15) -- procurement-addon.css
   の.proc-tooltipと同じ仕組み(hover/focus-withinで表示、縦幅は増やさない)。
   着色剤集計のヘッダーで使用。 */
.ship-tooltip { position: relative; cursor: help; border-bottom: 1px dotted #94a3b8; }
.ship-tooltip-bubble {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: #1e293b; color: #fff; font-size: 11px; line-height: 1.4;
  padding: 4px 8px; border-radius: 4px; white-space: pre-line; width: max-content; max-width: min(280px, calc(100vw - 24px));
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .12s; z-index: 40;
}
.ship-tooltip:hover .ship-tooltip-bubble,
.ship-tooltip:focus-within .ship-tooltip-bubble { opacity: 1; visibility: visible; }

/* ---- Excel取込 ---- */
.ship-import-drop { border: 2px dashed #cbd5e1; border-radius: 8px; padding: 24px; text-align: center; color: #64748b; font-size: 13px; }
.ship-mapping-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ship-mapping-table th, .ship-mapping-table td { padding: 6px 8px; border-bottom: 1px solid #eef2f7; text-align: left; }
.ship-mapping-warning { color: #b45309; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px; padding: 6px 10px; font-size: 12px; margin: 6px 0; }
.ship-batch-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 12.5px; }

@media (max-width: 767px) {
  .ship-page { padding: 10px; }
  .ship-header-row { flex-direction: column; align-items: stretch; }
  .ship-stockout-fields { grid-template-columns: 1fr 1fr; }
}

/* ---- round119: 出荷入力 > 着色剤 のモバイル表示(<=767px のみ。PCは一切変えない) ----
   ① 表の外側のカード(.ship-main-card)の枠・角丸・影と CardContent の左右 padding(24px)を、着色剤を表示中だけ外す
      (二重枠の解消。左右の余白は .ship-page の 10px だけになる)。表そのものの枠(.ship-clr-wrap)とセル罫線は残す。
   ② mobile-fit-addon.css の全表共通 `th,td{padding:5px 8px !important; white-space:nowrap !important}` が
      44px の列を 28px まで削って見出しを「ゴー…」にしていたので、この表だけ左右 padding を 1px にする。
   ③ 見出しは省略記号を使わない。round120: 必ず1行(nowrap、改行なし)。文字サイズは JS の _clrFitFs(12.5〜10px)、
      10pxでも入らない名前の列は _clrMobileMin で広がり、表の中だけ横スクロールする。 */
@media (max-width: 767px) {
  .ship-main-card:has(.ship-clr-section) { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .ship-main-card:has(.ship-clr-section) > .ship-main-card-content { padding-left: 0; padding-right: 0; }
  .ship-clr-table th, .ship-clr-table td { padding: 2px 1px !important; }
  .ship-clr-table th { text-overflow: clip !important; overflow: visible !important; white-space: nowrap !important; }
}

/* ---- round121: 出荷入力 > 通常 のモバイル(<=767px)だけ、表の外側のカード(.ship-main-card)の枠・角丸・影・背景と
   CardContent の左右 padding(24px)を外す(二重枠の解消。左右の余白は .ship-page の 10px だけ)。
   通常の入力表(.ship-grid-wrap、DailyShipmentTab の表だけが使う)を含み、着色剤の表(.ship-clr-section)を
   含まないときだけ当たる -- 着色剤側は上の round119 の規則のまま一切変えない。表そのもの・入力・保存・色・月計は不変。 */
@media (max-width: 767px) {
  .ship-main-card:has(.ship-grid-wrap):not(:has(.ship-clr-section)) { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .ship-main-card:has(.ship-grid-wrap):not(:has(.ship-clr-section)) > .ship-main-card-content { padding-left: 0; padding-right: 0; }
}