/* ==== Culminans.Production: 生産管理の画面スタイル（全画面に読み込む） ====
   フォームグリッド・カードはシェルの app.css（alt-form-grid / alt-span2 / alt-card / alt-card-title）を使う。
   ここに置くのは生産管理の画面にしか出ない見た目だけ。 */

/* 読み取り専用の値（カードの中で入力欄と同じ高さに揃える） */
.prod-readonly { padding: 4px 0; min-height: 1.6em; }

/* 明細表（部品表の構成・指図の部品と工程・実績） */
.prod-lines { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.prod-lines th, .prod-lines td { padding: 4px 6px; border-bottom: 1px solid var(--alt-border); text-align: left; vertical-align: top; }
.prod-lines th { color: var(--alt-text-sub); font-weight: 600; font-size: 0.85rem; }
/* 数量・時間・金額は右寄せ（読むときに桁を揃える）。DevExpress の指定に勝つため !important。 */
.prod-num { text-align: right !important; white-space: nowrap; }

/* 手遅れ（着手日が過ぎた計画オーダー・納期を過ぎた指図）。赤の太字はシェルの alt-overdue で、
   ここは色だけに頼らない「!」の印だけを持つ（画面では両方を付ける）。 */
.prod-late::before { content: "! "; }

/* 所要量計算の警告（設定漏れ・循環）。計算は止めていないので、注意の見た目にする。 */
.prod-warnings { white-space: pre-wrap; }

/* ==== 生産計画表（ガント。自前描画） ====
   **左の幅・見出しの高さ・行の高さは ProductionSchedule.razor の定数**を CSS 変数で受ける
   （--prod-gantt-left / head / row）＝先行線の SVG が同じ値で座標を出すので、ここに数字を書くとずれる。 */
.prod-gantt {
  overflow: auto; overscroll-behavior-x: none; max-height: calc(100vh - 300px);
  border: 1px solid var(--alt-border); border-radius: 6px; background: var(--alt-surface);
}
/* 鍵を外しているあいだは枠で示す（掴める状態であることを、ボタンの文言以外からも読めるように）。 */
.prod-gantt.unlocked { border: 2px solid var(--alt-warning-border); background: var(--alt-warning-bg); }
.prod-gantt-canvas { position: relative; min-width: 100%; }
/* **行の区切り線は行ではなくセル（左の列・時間軸）に引く**＝行に引くと、左に固定した列が区切り線のぶんだけ覆えず、
   横にスクロールしたとき下の日付の目盛りと休みの塗りがその隙間から透けて見えた。
   セルは行の高さいっぱいに伸び、線を含めた高さが行の高さになる（border-box）＝先行線の座標は変わらない。 */
.prod-gantt-row { display: flex; height: var(--prod-gantt-row); }
.prod-gantt-row > .prod-gantt-left, .prod-gantt-row > .prod-gantt-tl {
  box-sizing: border-box; border-bottom: 1px solid var(--alt-bg-muted);
}
.prod-gantt-row.prod-gantt-head {
  position: sticky; top: 0; z-index: 5; height: var(--prod-gantt-head);
  font-size: 0.8rem; color: var(--alt-text-sub);
}
.prod-gantt-head > .prod-gantt-left, .prod-gantt-head > .prod-gantt-tl { border-bottom-color: var(--alt-border); }
/* ラインの見出しの行は、指図の行と区切って読めるように少し濃くする。 */
.prod-gantt-line-row { background: var(--alt-bg-subtle); }
.prod-gantt-line-row > .prod-gantt-left, .prod-gantt-line-row > .prod-gantt-tl { border-top: 2px solid var(--alt-border-strong); }
.prod-gantt-left {
  position: sticky; left: 0; z-index: 4;
  width: var(--prod-gantt-left); min-width: var(--prod-gantt-left); max-width: var(--prod-gantt-left);
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: var(--alt-surface); border-right: 1px solid var(--alt-border); font-size: 0.85rem;
}
.prod-gantt-line-row .prod-gantt-left { background: var(--alt-bg-subtle); font-weight: 600; }
.prod-gantt-head .prod-gantt-left, .prod-gantt-head .prod-gantt-tl { background: var(--alt-bg-subtle); }
/* 指図番号と「変更」は縮めない（縮むのは品目名だけ＝省略記号で切れる）。**ボタンにも要る**＝flex の子は既定で縮み、
   和文は 1 文字ごとに折り返せるので、列が狭いと「変／更」と縦に割れていた。 */
.prod-gantt-left a, .prod-gantt-left .linklike { flex: none; }
.prod-gantt-left .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-gantt-row:not(.prod-gantt-head):hover > .prod-gantt-left,
.prod-gantt-row:not(.prod-gantt-head):hover > .prod-gantt-tl { background-color: var(--alt-bg-subtle); }
/* 落とし先になっている行（ドラッグ中に JS が付ける）。 */
.prod-gantt-row.line-target > .prod-gantt-tl { background-color: rgba(77, 124, 199, 0.10); }

/* 日付の目盛り。**区切りは日ごとに細く・週の頭を濃く**＝日で追うときは日ごとの線が要るが、
   全部同じ濃さだと縞になって読めない。濃さと線の出し方は設定から CSS 変数で差し替える。 */
.prod-gantt-tl { position: relative; flex: none; width: 100%; }
/* 日付の下敷き（休みの塗りと区切り線）。**キャンバスに 1 枚だけ**重ねる
   ＝行ごとに敷くと行数 × 日数ぶんの要素になる。触れないので掴みを邪魔しない。
   重ね順は 1（行の背景より上・バーと帯より下）。 */
.prod-gantt-grid-layer { position: absolute; top: 0; right: 0; pointer-events: none; z-index: 1; }
/* 日の区切り（既定は点線）。1 本ずつ絶対配置で置く＝背景の繰り返しでは破線を描けない。 */
.prod-gantt-grid {
  position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none;
  border-left: 1px var(--prod-grid-day-style, dashed) var(--prod-grid-day-color, rgba(150, 150, 150, 0.45));
}
/* 週の頭（既定は月曜）は実線で濃く。 */
.prod-gantt-grid.week {
  border-left: 1px var(--prod-grid-week-style, solid) var(--prod-grid-week-color, var(--alt-border-strong));
}
.prod-gantt-day { position: absolute; bottom: 2px; font-size: 0.68rem; color: var(--alt-text-muted); text-align: center; white-space: nowrap; overflow: hidden; }
/* 見出しの上段（月）。大日程表・中日程表とも同じ段に置き、月の頭から左寄せで書く。 */
.prod-gantt-month {
  position: absolute; top: 2px; padding-left: 4px; box-sizing: border-box;
  font-size: 0.72rem; font-weight: 600; color: var(--alt-text-sub);
  white-space: nowrap; overflow: hidden; border-left: 1px solid var(--alt-border-strong);
}
/* 大日程表の月の頭（週の頭より濃く）。 */
.prod-gantt-grid.month { border-left: 2px solid var(--alt-border-strong); }
.prod-gantt-day.we { color: #cc7070; }
/* 休みの日は薄い赤で塗る（休みに予定が乗っていることが読めるように）。 */
.prod-gantt-off {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: var(--prod-off-day, rgba(220, 90, 80, 0.10));
}

/* 空き本数の帯。数字は繋がりの先頭だけが出す（同じ数が並ぶと変わり目が読めない）。 */
.prod-gantt-free {
  position: absolute; top: 5px; height: calc(var(--prod-gantt-row) - 12px); z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: var(--alt-text-sub);
  border: 1px solid var(--alt-border); border-radius: 4px;
}
.prod-gantt-free.prod-gantt-empty { background: var(--alt-success-bg); }
.prod-gantt-free.prod-gantt-partial { background: var(--alt-warning-bg); }
.prod-gantt-free.prod-gantt-full { background: var(--alt-danger-bg); color: var(--alt-danger); font-weight: 700; }
/* 超過＝連鎖で押し出された結果。**満杯と分けて出す**（人が直す場所がここだと読めるように）。 */
.prod-gantt-free.prod-gantt-over {
  background: var(--alt-danger); color: #fff; font-weight: 700;
  border-color: var(--alt-danger);
}
/* 終了と開始が入れ替わる日は枠を濃くして、まとめていないことを示す。 */
.prod-gantt-free.turnover { border-color: var(--alt-text-sub); border-style: dashed; }

/* 指図のバー（予定線）。**上下の位置と太さは ProductionSchedule.razor の定数**を変数で受ける
   ＝先行線は予定線の中心へ付けるので、ここに数字を書くと線がバーからずれる。 */
.prod-gantt-bar {
  position: absolute; top: var(--prod-gantt-plan-top); height: var(--prod-gantt-plan-height); z-index: 2;
  border-radius: 4px; cursor: grab; touch-action: none;
  background: var(--alt-accent, #4a6fa5); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
/* 納期を越えている指図は色を変える（色だけに頼らず、題名にも書く）。 */
.prod-gantt-bar.late { background: var(--alt-danger); }
.prod-gantt-bar.readonly { cursor: default; }
/* 完了・締め＝振り返り用に描くだけ（占有しない・掴めない）。**塗らずに点線の枠にする**
   ＝テーマによっては予定線の色が灰色なので、色の濃淡では未完了と見分けられない。 */
.prod-gantt-bar.done {
  background: transparent; box-shadow: none; box-sizing: border-box;
  border: 2px dashed var(--alt-text-muted);
}
/* 実績線（予定線の下の細い線）。予定を越えて続いていれば橙（色だけに頼らず題名にも期間を出す）。 */
.prod-gantt-actual {
  position: absolute; top: var(--prod-gantt-actual-top); height: var(--prod-gantt-actual-height); z-index: 2;
  border-radius: 2px; background: var(--alt-success);
}
.prod-gantt-actual.late { background: #e67e22; }
/* 小日程計画書: 当日の実績が予定に届いていない数。 */
.prod-short { color: var(--alt-danger); font-weight: 700; }
.prod-gantt-handle { position: absolute; top: 0; width: 8px; height: 100%; cursor: ew-resize; }
.prod-gantt-handle.h-l { left: -2px; }
.prod-gantt-handle.h-r { right: -2px; }
/* 先行を結ぶ○（バーの右端。触れたときだけ出す＝常に出ていると掴む場所と紛れる）。 */
.prod-gantt-handle.h-link {
  right: -14px; top: 50%; width: 11px; height: 11px; margin-top: -6px;
  border-radius: 50%; background: var(--alt-surface); border: 2px solid var(--alt-accent-weak);
  cursor: crosshair; opacity: 0; z-index: 3;
}
.prod-gantt-bar:hover .prod-gantt-handle.h-link { opacity: 1; }
.prod-gantt-bar.link-target { outline: 2px solid var(--alt-accent-weak); outline-offset: 1px; }
.prod-gantt-linkline { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6; overflow: visible; }
.prod-gantt-linkline line { stroke: var(--alt-accent-weak); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* 先行線。**親の svg は当たり判定を持たない**（持つとバーを掴めない）。 */
.prod-gantt-deps { position: absolute; top: 0; pointer-events: none; z-index: 3; overflow: visible; }
.prod-gantt-dep-line { stroke: var(--alt-text-muted); stroke-width: 1.5; opacity: 0.85; }
.prod-gantt-dep-arrow { fill: var(--alt-text-muted); opacity: 0.85; }
/* 後続が先行より前に始まっている＝順序が崩れている印。 */
.prod-gantt-dep-line.late { stroke: var(--alt-danger); opacity: 1; }
.prod-gantt-dep-arrow.late { fill: var(--alt-danger); opacity: 1; }
/* 線の当たり判定（透明の太線。触れるとうっすら出て、押すと外せることを示す）。 */
.prod-gantt-dep-hit { stroke: transparent; stroke-width: 9; pointer-events: stroke; cursor: pointer; }
.prod-gantt-dep-hit:hover { stroke: rgba(77, 124, 199, 0.22); }

/* ==== 入力欄の幅 ====
   既定では枠いっぱいに伸びるので、日付や 2〜3 桁の数値が不必要に広くなり、
   隣に何があるのか読み取りにくくなる。**中身の性質に合わせて頭打ちにする**。
   幅そのものはシェルの alt-date-select（150px）に合わせ、数値だけさらに狭くする。
   max-width で止めるのは、狭い画面では枠に従って縮められるようにするため。 */
.prod-input-date { max-width: 150px; }
.prod-input-num { max-width: 110px; }
.prod-input-code { max-width: 160px; }

/* ==== カスタムの区分・状態のバッジ ====
   色は保存の時点で #rrggbb に正規化してある（値をそのまま style へ差すので書式は必ず検査する）。
   **文字色はここで決めない**＝背景は人が自由に選ぶので、部品側が明暗から計算して差す
   （ProductionBadge → HexColor.ForegroundOn）。ここで白に固定すると淡い色で読めなくなる。
   **クラス名は prod- で始めること**＝モジュールの CSS は登録順に読み込まれるので、
   ほかのモジュールと同じ名前を使うと、どちらが勝つかが順番まかせになる（Pm の .pm-badge と衝突していた）。 */
.prod-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 0.82rem; white-space: nowrap;
}
/* 色の入力欄は Pm と同じ見た目に揃える。 */
.prod-color-input { width: 48px; height: 30px; padding: 2px; border: 1px solid var(--alt-border); border-radius: 4px; }

/* ==== 指図の履歴とコメント ====
   1 件ずつを薄い区切りで並べる（枠で囲むと入れ子のカードになって奥行きが増える）。 */
.prod-timeline-entry { padding: 8px 0; border-top: 1px solid var(--alt-border); }
.prod-timeline-entry:first-child { border-top: 0; }
.prod-timeline-head { display: flex; gap: 8px; align-items: baseline; }
.prod-timeline-who { font-weight: 600; }
/* 変更の行は本文より小さく、左に少し寄せる（何が起きたかを一目で拾えるように）。 */
.prod-timeline-change { margin-left: 4px; font-size: 0.88rem; color: var(--alt-text-sub); }
.prod-timeline-body { margin-top: 4px; }
.prod-timeline-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--alt-border); }

/* ==== 先行・後続 ==== */
.prod-dep-group { margin-top: 8px; }
.prod-dep-group > label { display: block; font-size: 0.85rem; color: var(--alt-text-sub); }
.prod-dep-row { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.prod-dep-add { display: flex; gap: 8px; align-items: end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--alt-border); }
.prod-dep-add > label { font-size: 0.85rem; color: var(--alt-text-sub); }

/* ==== かんばん（第1段） ====
   所要量計算の参考の行（確定できない理由）とかんばんマスタの注意。札の形は prod-badge と揃える。 */
.prod-kanban-tag {
  display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 10px;
  font-size: 0.78rem; white-space: nowrap;
  background: var(--alt-accent-soft); color: var(--alt-accent);
}
/* 品目が所要量計算へ戻っているかんばん（補充する仕組みが 2 つにならないよう、目立たせる）。 */
.prod-kanban-warn { color: var(--alt-warning-text); font-size: 0.82rem; }
/* 提案枚数が今の枚数と違うとき（決めるのは人なので、色で知らせるだけにする）。 */
.prod-kanban-diff { color: var(--alt-warning-text); font-weight: 600; }

/* 回収用の端末（第2段）。読み取り待ちの 1 欄だけなので、大きく見せる。 */
/* 読み取り欄の枠（Core の ScanField＝alt-scan-field）は幅いっぱい（欄の幅は枠が持つ）。 */
.prod-kanban-scan-field { display: block; }
.prod-kanban-scan { max-width: 480px; margin: 12px 0 16px; }
.prod-kanban-scan-input {
  font-size: 1.3rem; padding: 8px 10px;
  border: 1px solid var(--alt-border); border-radius: 4px; background: var(--alt-surface); color: inherit;
}

/* ==== かんばんボード（第7段） ====
   状態の列 × 品目の横帯。列は状態の色（--kb）を面の色へ混ぜて塗る（PM のボードと同じ流儀＝暗いテーマでも面に色が乗るだけ）。
   付箋の QR だけは白地に置く＝読み取りは明るい地の暗いモジュールを前提にしている。 */
.prod-kboard-tools { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; margin: 8px 0 12px; }
.prod-kboard-tools label { display: block; font-size: 0.85rem; color: var(--alt-text-sub); }
.prod-kboard-scan { min-width: min(320px, 100%); }
.prod-kboard-scan .prod-kanban-scan-input { font-size: 1.1rem; padding: 6px 8px; }
.prod-kboard-links { margin-left: auto; align-self: center; }
.prod-kboard { overflow-x: auto; overscroll-behavior-x: none; border: 1px solid var(--alt-border); border-radius: 8px; }
.prod-kboard-row {
  display: grid; grid-template-columns: minmax(170px, 200px) minmax(390px, 1fr) minmax(330px, 1fr) minmax(230px, 1fr);
  /* 品目（横帯）の区切りははっきりした罫線にする（付箋が大きいので、どこからが次の品目か一目で分かるように）。 */
  border-top: 2px solid color-mix(in srgb, var(--alt-text-body) 45%, var(--alt-surface)); min-width: 1150px;
}
.prod-kboard-row.prod-kboard-head { border-top: none; border-bottom: 1px solid color-mix(in srgb, var(--alt-text-body) 45%, var(--alt-surface)); position: sticky; top: 0; z-index: 1; }
.prod-kboard-instore { --kb: #64748b; }
.prod-kboard-detached { --kb: #f59e0b; }
.prod-kboard-replenishing { --kb: #3b82f6; }
.prod-kboard-col-head {
  padding: 8px 10px; font-weight: 600; display: flex; justify-content: space-between; align-items: center;
  background: color-mix(in srgb, var(--kb) 28%, var(--alt-surface)); border-left: 1px solid var(--alt-border);
}
.prod-kboard-count { font-weight: 500; color: var(--alt-text-sub); }
.prod-kboard-lane-head {
  padding: 8px 10px; background: var(--alt-bg-subtle); font-size: 0.88rem; display: flex; flex-direction: column; gap: 2px;
}
.prod-kboard-head .prod-kboard-lane-head { font-weight: 600; justify-content: center; }
.prod-kboard-item { font-weight: 600; }
.prod-kboard-issue { margin-top: 4px; align-self: flex-start; }
.prod-kboard-cell {
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; padding: 8px; min-height: 96px;
  background: color-mix(in srgb, var(--kb) 10%, var(--alt-surface)); border-left: 1px solid var(--alt-border);
}
/* 付箋 1 枚（かんばん 1 枚）。押すと拡大表示。 */
.prod-kboard-note {
  width: 96px; padding: 6px 6px 5px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: color-mix(in srgb, var(--kb) 22%, var(--alt-surface)); color: inherit;
  border: 1px solid color-mix(in srgb, var(--kb) 55%, var(--alt-surface)); border-top-width: 4px; border-radius: 4px;
  box-shadow: var(--alt-shadow-xs); cursor: pointer; font: inherit;
}
.prod-kboard-note:hover { border-color: var(--kb); }
.prod-kboard-note:focus-visible { outline: 2px solid var(--alt-accent); outline-offset: 2px; }
.prod-kboard-qr { width: 72px; height: 72px; background: #fff; border-radius: 2px; image-rendering: pixelated; }
.prod-kboard-no { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.prod-kboard-sub { font-size: 0.72rem; color: var(--alt-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* 置き場にある・外れたかんばんの付箋（紙のかんばん KanbanCardReport と同じ並べ方）。地は紙と同じ白で、状態は上端の太い線で見分ける。 */
.prod-kcard {
  width: 288px; padding: 0 0 6px; display: flex; flex-direction: column; text-align: left;
  background: #fff; color: #1f2937; font: inherit; font-size: 0.72rem; line-height: 1.35;
  border: 1px solid #606060; border-top: 4px solid var(--kb); border-radius: 3px; box-shadow: var(--alt-shadow-xs); cursor: pointer;
  /* 付箋ごと縮めて、1 マスに 2 列で並べる（中の配置は紙のまま。細かい字は拡大表示で読む）。
     外れた＝半分、置き場にある＝6 割（2026-09-27 に決定＝置き場のほうは現場で読むことがあるので少し大きく）。 */
  zoom: 0.5;
}
.prod-kcard.prod-kboard-instore { zoom: 0.6; }
.prod-kcard:hover { box-shadow: var(--alt-shadow-pop); }
.prod-kcard:focus-visible { outline: 2px solid var(--alt-accent); outline-offset: 2px; }
.prod-kcard-kind { display: block; text-align: center; font-weight: 700; padding: 2px 4px; border-bottom: 1px solid #606060; }
/* 見出しの帯の色は紙と同じ（内製＝青・購買＝橙。KanbanCardReport の Rgb と揃える）。 */
.prod-kcard-make { background: rgb(209, 231, 247); }
.prod-kcard-buy { background: rgb(252, 224, 196); }
.prod-kcard-body { display: flex; gap: 6px; padding: 3px 7px 0; }
.prod-kcard-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.prod-kcard-no { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.prod-kcard-pairs { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
.prod-kcard-pairs > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-kcard-qr { flex: none; width: 64px; height: 64px; margin-top: 4px; image-rendering: pixelated; }
.prod-kcard-seq { display: block; text-align: right; color: #6b7280; padding: 1px 7px 2px; }
/* バーコードは細め（高さを抑える）。全幅で置き、細い線がつぶれないよう画素のまま伸ばす。 */
.prod-kcard-barcode { display: block; width: calc(100% - 14px); height: 26px; margin: 0 7px; image-rendering: pixelated; object-fit: fill; }

/* 直前に動いた付箋（読み取った・起こした）を少しのあいだ光らせる。 */
@keyframes prod-kboard-flash { from { box-shadow: 0 0 0 4px var(--alt-accent); } to { box-shadow: var(--alt-shadow-xs); } }
.prod-kboard-moved { animation: prod-kboard-flash 2.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .prod-kboard-moved { animation: none; outline: 2px solid var(--alt-accent); } }
/* 拡大表示。QR は現場のスキャナで画面から直接読める大きさにする。 */
.prod-kboard-detail { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.prod-kboard-qr-large { width: min(240px, 70vw); height: auto; aspect-ratio: 1; background: #fff; image-rendering: pixelated; }
/* バーコードは横に長いので、窓の幅に合わせて縮める（細い線がつぶれないよう、画素のまま拡大・縮小する）。 */
.prod-kboard-barcode { width: min(320px, 80vw); height: 52px; background: #fff; padding: 6px 10px; box-sizing: border-box; image-rendering: pixelated; object-fit: fill; }
.prod-kboard-no-large { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.02em; }
.prod-kboard-badge {
  display: inline-block; padding: 1px 10px; border-radius: 10px; font-size: 0.82rem;
  background: color-mix(in srgb, var(--kb) 25%, var(--alt-surface)); border: 1px solid color-mix(in srgb, var(--kb) 55%, var(--alt-surface));
}
.prod-kboard-detail-actions { justify-content: center; margin-top: 8px; flex-wrap: wrap; }