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

/* dxDiagram は親要素の高さを必要とする */
.wf-editor-canvas {
    flex: 1;
    min-width: 0;
    height: calc(100vh - 240px);
    min-height: 480px;
    border: 1px solid var(--alt-border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

/* dxDiagram のフローティングツールバー（ズーム・全画面・設定）の位置をキャンバス左上に固定する
   （2026-08-13 ユーザー要望）。DevExtreme はインラインの translate で位置指定するが、
   基準が最も近い positioned 祖先（無ければ body）のため、ページレイアウトによっては
   キャンバスの外（タイムラインの上など）へ流れてしまう。キャンバス側を position: relative で
   包含ブロックにし、translate を !important で上書きして左上へ固定する。 */
.wf-editor-canvas .dx-diagram-floating-toolbar-container,
.wf-viewer-canvas .dx-diagram-floating-toolbar-container {
    transform: translate(8px, 8px) !important;
}

.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 - 240px);
}

.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;
}

/* 申請書詳細: 関連課題・添付ファイル（2026-08-13） */
.wf-related {
    margin-bottom: 16px;
}

.wf-related-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    flex-wrap: wrap;
}

.wf-related-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    max-width: 720px;
}

.wf-related-form > :nth-child(-n+2) {
    flex: 1;
    min-width: 0;
}

/* 申請書詳細: 進捗図ビューア（読み取り専用） */
.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; }
.wf-table td .linklike { margin-right: 0.5rem; }