/* ==== Culminans.Workflow: ワークフロー画面共通スタイル（chaser Phase10〜14 から移植。全画面に読み込む） ==== */

/* 図形エディタ: 見出し行（タイトル＋保存ボタン） */
.wf-editor-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.wf-editor-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* 図形エディタ: 中央キャンバス＋右プロパティパネル */
.wf-editor-layout {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* 図とその上の道具立て（整列）を縦に積む。右のプロパティパネルとは横に並ぶ。 */
.wf-editor-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 整列のメニュー（2026-09-04・TEST1-55）。図の中ではなくここに置く理由は
   WorkflowTemplateEdit.razor のコメントが正。
   **右へ寄せる**＝ここは図のすぐ上なので、左に置くと開いたメニューが図形パレット
   （キャンバス左上に浮いている）の下に潜って選べない。 */
.wf-editor-align {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

/* dxDiagram は親要素の高さを必要とする。
   --wf-band はツールバーの帯の高さ（下の節）で、キャンバスの中で図形が使える高さを決める。
   --wf-chrome はページの見出しなど図の外が使う高さ＝右のプロパティパネルと**同じ値から引く**
   （別々の数字にすると、片方だけ直したときに図とパネルの丈が食い違う）。 */
.wf-editor-canvas,
.wf-viewer-canvas {
    --wf-band: 44px;
}

.wf-editor-layout {
    --wf-chrome: 240px;
}

.wf-editor-canvas {
    flex: 1;
    min-width: 0;
    height: calc(100vh - var(--wf-chrome) - var(--wf-band) - 8px);   /* 8px は整列メニューとの gap */
    min-height: 440px;
    border: 1px solid var(--alt-border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

/* dxDiagram のツールバー（元に戻す／やり直し・ズーム・全画面・設定）を、浮かせず
   キャンバス上端の帯へ横並びで固定する（2026-09-04・TEST1-55 ユーザー要望）。

   DevExtreme はこの 2 本を content-wrapper の中で絶対配置し、インラインの translate で
   元に戻す＝左上・ズーム＝左下（キャンバスの高さに追随）へ置く。基準は**最も近い位置指定された祖先**
   ＝ここでは `.wf-editor-canvas`（position: relative）で、content-wrapper 自身は static なので
   基準にならない。**だから wrapper の padding はツールバーを押し下げず、図形だけを下げる**
   （wrapper に position が付いた日には帯が二重になるので、そのときはここを見直すこと）。

   2026-08-13 に「キャンバスの外＝タイムラインの上などへ流れる」のを translate(8px, 8px) !important で
   左上へ固定したが、**それが 2 本とも同じ座標へ寄せてしまい、元に戻す／やり直しがズームの下に
   完全に隠れていた**（2026-09-04 実測。DOM には在って幅も持つのに画面には出ない＝例外もログも出ない類）。
   同じ理由で、この位置に出る mainToolbar も左から順に隠れる。

   **見分けは中身で行う**＝元に戻すのツールバーだけが `.dx-icon-undo` を持つ。子の順番（nth-child）で
   分けると、プロパティパネルを有効にした日に間へ 1 本増えて**黙って全部の指定が外れる**
   （空の帯だけが残る）。読むだけの進捗ビューは元に戻すが無く 1 本なので、そちらは分けずに左へ置く。 */
.wf-editor-canvas .dx-diagram-content-wrapper,
.wf-viewer-canvas .dx-diagram-content-wrapper {
    padding-top: var(--wf-band);
}

.wf-editor-canvas .dx-diagram-floating-toolbar-container:has(.dx-icon-undo),
.wf-viewer-canvas .dx-diagram-floating-toolbar-container {
    transform: translate(4px, 4px) !important;
}

/* 元に戻す（4px + 幅 80px + 間隔 8px）の右へ。 */
.wf-editor-canvas .dx-diagram-floating-toolbar-container:not(:has(.dx-icon-undo)) {
    transform: translate(92px, 4px) !important;
}

/* ダークテーマでの図の線（2026-09-05）。
   dxDiagram の描画エンジンの CSS（dx-diagram.min.css）は矢印もグリッドも
   **テーマと無関係に黒で塗る**（`.dxdi-canvas .connector path { stroke: #000 }`）。
   一方 dx.dark.css は用紙（`.dxdi-page`）を黒くするので、ダークでは黒い紙に黒い線になり
   矢印がまるごと沈む（図形だけは JS が白い紙向けの淡色で描くので読める）。
   線・矢じり・線のラベル・グリッドを明るい側へ戻す。
   dx-diagram.min.css の詳細度は 0,2,1 なので、テーマとキャンバスを前に置けば !important は要らない。
   **`.selector` は必ず外すこと**＝当たり判定用の透明で太い（16px）線なので、塗ると図の上に帯が出る。 */
html[data-theme="dark"] .wf-editor-canvas .dxdi-canvas .connector path:not(.selector),
html[data-theme="dark"] .wf-editor-canvas .dxdi-canvas .connector line,
html[data-theme="dark"] .wf-viewer-canvas .dxdi-canvas .connector path:not(.selector),
html[data-theme="dark"] .wf-viewer-canvas .dxdi-canvas .connector line {
    stroke: var(--alt-text-primary);
}

/* 矢じりは塗りで描かれるものもある（線で描くものは上のルールで足りる）。 */
html[data-theme="dark"] .wf-editor-canvas .dxdi-canvas .connector path.filled-line-ending,
html[data-theme="dark"] .wf-viewer-canvas .dxdi-canvas .connector path.filled-line-ending {
    fill: var(--alt-text-primary);
}

/* 線に載る条件のラベル（図形の中の文字は JS が白フチ付きで描いているので触らない）。 */
html[data-theme="dark"] .wf-editor-canvas .dxdi-canvas .connector text,
html[data-theme="dark"] .wf-viewer-canvas .dxdi-canvas .connector text {
    fill: var(--alt-text-primary);
}

/* グリッドも同じ理由で沈む。図形を置く目安なので、うっすら見える程度に戻す
   （読むだけの進捗ビューにグリッドは出ないので編集画面だけでよい）。 */
html[data-theme="dark"] .wf-editor-canvas .dxdi-canvas .grid-outer-line {
    stroke: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .wf-editor-canvas .dxdi-canvas .grid-inner-line {
    stroke: rgba(255, 255, 255, 0.07);
}

/* 左のパレット（ツールボックス）に並ぶ図形の名前も、ダークでは同じ理由で読めなくなる。
   dx-diagram.min.css はここだけ `fill: currentcolor` にしていて、ダークのパネルの文字色
   （明るいグレー）を継ぐが、図形は JS が白い紙向けの淡色で塗るので明るい上に明るい文字になる。
   キャンバスに置いた図形は `.dxdi-canvas .shape text { fill: #000 }` のまま黒なので読める＝
   パレットも同じ黒に戻す。並列分岐・並列合流は JS が白フチ付きの濃い文字を style で描いていて
   ここでは上書きされない（もともと読める）。ドラッグ中の複製にも同じ指定が要る。 */
html[data-theme="dark"] .dxdi-toolbox .dxdi-canvas .toolbox-item text,
html[data-theme="dark"] .dxdi-toolbox-drag-item .dxdi-canvas text {
    fill: #000;
}

.wf-editor-side {
    width: 300px;
    flex-shrink: 0;
    border: 1px solid var(--alt-border);
    border-radius: 8px;
    padding: 12px;
    background: var(--alt-surface);
    overflow-y: auto;
    max-height: calc(100vh - var(--wf-chrome));
}

.wf-side-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px;
}

.wf-side-sep {
    border: none;
    border-top: 1px solid var(--alt-border);
    margin: 14px 0;
}

/* 申請フォーム項目のエディタ（右パネル内。Phase10 v2） */
.wf-field-item {
    border: 1px solid var(--alt-border);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wf-field-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wf-field-row > :first-child {
    flex: 1;
    min-width: 0;
}

/* 最小〜最大のペア入力（レンジ・文字数。Phase10 v2） */
.wf-field-pair {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wf-field-pair > :not(span) {
    flex: 1;
    min-width: 0;
}

/* 狭い画面ではパネルを下に回す */
@media (max-width: 900px) {
    .wf-editor-layout {
        flex-direction: column;
    }

    .wf-editor-side {
        width: auto;
        max-height: none;
    }

    .wf-editor-canvas {
        height: 60vh;
        min-height: 360px;
    }
}

/* 申請内容（フォーム値）の表示・修正（Phase10 v2） */
.wf-values {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    border: 1px solid var(--alt-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.wf-value-name {
    color: var(--alt-text-secondary);
    font-weight: 600;
}

.wf-value-val {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wf-values-form {
    max-width: 560px;
    margin-bottom: 16px;
}

/* 関連項目の並び（関連課題・添付・関連チケット）はシェルの app.css の .alt-related* へ移した
   （2026-08-25）。Sales も同じ形を使うようになり、ここに置いたままだと
   Workflow を無効にした構成で Sales の画面だけ体裁が崩れるため。 */

/* 申請書詳細: 進捗図ビューア（読み取り専用） */
.wf-viewer-canvas {
    height: 320px;
    border: 1px solid var(--alt-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
}

/* 一覧のタブ（自分の申請／承認待ち／すべて） */
.wf-tabs {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-bottom: 10px;
}

.wf-tab {
    border: 1px solid var(--alt-border);
    background: var(--alt-surface);
    color: var(--alt-text-primary);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.85rem;
    cursor: pointer;
}

.wf-tab.is-active {
    background: var(--alt-accent);
    border-color: var(--alt-accent);
    color: #fff;
}

.wf-tabs-spacer {
    flex: 1;
}

/* ミニステッパー（●―●―○）。色は進捗図と同じ意味色で固定 */
.wf-stepper {
    display: inline-flex;
    align-items: center;
}

.wf-step {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f3f4f6;
    border: 2px solid #9ca3af;
    box-sizing: border-box;
}

.wf-step + .wf-step {
    margin-left: 14px;
    position: relative;
}

.wf-step + .wf-step::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 2px;
    background: #9ca3af;
}

.wf-step-passed { background: #dcfce7; border-color: #16a34a; }
.wf-step-current { background: #3b82f6; border-color: #2563eb; }
.wf-step-rejected { background: #fee2e2; border-color: #dc2626; }
.wf-step-remanded { background: #ffedd5; border-color: #ea580c; }

/* 状態バッジ（一覧・詳細共通。意味色固定） */
.wf-status {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.wf-status-active { background: #dbeafe; color: #1d4ed8; }
.wf-status-approved { background: #dcfce7; color: #15803d; }
.wf-status-rejected { background: #fee2e2; color: #b91c1c; }
.wf-status-remanded { background: #ffedd5; color: #c2410c; }
.wf-status-cancelled { background: #f3f4f6; color: #6b7280; }
.wf-status-draft { background: #f3f4f6; color: #374151; }

/* 委任フォーム（Phase12。個人設定「代理」タブ・管理画面で共用） */
.wf-delegation-kinds {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.wf-delegation-period {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* 数値入力（設定値）は幅を固定して単位を横に並べる */
.wf-num-input {
    width: 160px;
    flex: 0 0 auto;
}

/* バッジの形（色は意味ごとに下で固定する） */
.wf-proxy-badge,
.wf-evidence-badge {
    display: inline-block;
    margin-left: 6px;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* 代理（Phase12。「委任元の番」を示す） */
.wf-proxy-badge {
    background: #ede9fe;
    color: #6d28d9;
}

/* 証憑（OCR に使った領収書を示す） */
.wf-evidence-badge {
    background: #fef3c7;
    color: #b45309;
}

/* 申請書詳細のヘッダー */
/* .wf-detail-head / .wf-detail-actions はモジュール共通（シェルの app.css）へ移した。 */

.wf-detail-key {
    color: var(--alt-text-secondary);
    font-weight: 500;
    margin-right: 8px;
}

/* タイムライン（追記型。操作の種別を色ラベルで示す） */
.wf-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.wf-timeline-row {
    border: 1px solid var(--alt-border);
    border-radius: 8px;
    padding: 8px 12px;
    background: var(--alt-surface);
}

.wf-timeline-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.wf-timeline-action {
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 0.78rem;
    font-weight: 600;
}

.wf-action-submit { background: #dbeafe; color: #1d4ed8; }
.wf-action-approve { background: #dcfce7; color: #15803d; }
.wf-action-remand { background: #ffedd5; color: #c2410c; }
.wf-action-reject { background: #fee2e2; color: #b91c1c; }
.wf-action-cancel { background: #f3f4f6; color: #6b7280; }
.wf-action-comment { background: #f3f4f6; color: #374151; }

.wf-timeline-user {
    font-weight: 600;
}

.wf-timeline-step,
.wf-timeline-date {
    color: var(--alt-text-secondary);
}

.wf-timeline-body {
    margin-top: 6px;
    white-space: pre-wrap;
}

/* コメント入力欄 */
.wf-comment-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 20px;
}

.wf-comment-form > * {
    width: 100%;
}

.wf-comment-form .dxbl-btn {
    width: auto;
}

/* 新規申請フォーム */
.wf-new-form {
    max-width: 640px;
}

/* 設定カード（代理管理・個人の代理設定。囲みの中にフォームを置く） */
.wf-card {
    margin: 0 0 1.2rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--alt-border);
    border-radius: var(--alt-radius-sm);
    background: var(--alt-surface);
    max-width: 860px;
}
.wf-card-title { margin: 0 0 0.6rem; font-size: 1.05rem; font-weight: 700; }

/* 簡易テーブル（代理の一覧） */
.wf-table { border-collapse: collapse; margin: 0.4rem 0 0.8rem; font-size: 0.9rem; }
.wf-table th, .wf-table td { padding: 0.3rem 0.8rem 0.3rem 0; border-bottom: 1px solid var(--alt-border); text-align: left; }

/* 経費明細の入力（1 行＝科目・負担部門・日付・金額・摘要・領収書・削除）。
   欄は狭い画面で折り返す＝申請は縦に読む画面なので、横スクロールにしない。
   摘要だけ伸ばし、ほかは中身に見合う固定幅にする（列がずれても読む順は変わらない）。 */
.wf-expense { margin: 0.6rem 0 1rem; }
.wf-expense-head { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.2rem; }
.wf-expense-head label { font-weight: 600; }
.wf-expense-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--alt-border);
}
.wf-expense-account { width: 11rem; }
.wf-expense-dept { width: 10rem; }
.wf-expense-date { width: 9rem; }
.wf-expense-amount { width: 8rem; }
.wf-expense-note { flex: 1 1 12rem; min-width: 10rem; }
.wf-expense-receipt { width: 11rem; }

/* 読み取りの表（申請したあと）。金額と合計は右寄せにする。 */
.wf-expense-table { width: 100%; max-width: 960px; }
.wf-expense-table .wf-num { text-align: right; }