/* ==== 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; }

/* 手遅れ（着手日が過ぎた計画オーダー・納期を過ぎた指図）。色だけに頼らず「!」の印も付ける。 */
.prod-late { color: var(--alt-danger); font-weight: 600; }
.prod-late::before { content: "! "; }

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

/* ==== 生産計画表（ガント。自前描画） ====
   **左の幅・見出しの高さ・行の高さは ProductionSchedule.razor の定数**を CSS 変数で受ける
   （--prod-gantt-left / head / row）＝先行線の SVG が同じ値で座標を出すので、ここに数字を書くとずれる。 */
.prod-gantt {
  overflow: auto; 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%; }
.prod-gantt-row { display: flex; height: var(--prod-gantt-row); 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); border-bottom: 1px solid var(--alt-border);
}
/* ラインの見出しの行は、指図の行と区切って読めるように少し濃くする。 */
.prod-gantt-line-row { background: var(--alt-bg-subtle); 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); }
.prod-gantt-left a { 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; }
.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; }

/* 指図のバー。 */
.prod-gantt-bar {
  position: absolute; top: 5px; height: calc(var(--prod-gantt-row) - 12px); 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-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); }