* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg-app);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- アプリシェル ---------- */
.app { display: grid; grid-template-columns: 184px 1fr; grid-template-rows: 46px 1fr; height: 100vh; }
.topbar {
  grid-column: 1 / 3; display: flex; align-items: center; gap: 12px;
  background: var(--bg-topbar); border-bottom: 1px solid var(--border);
  padding: 0 16px; font-weight: 600;
}
.topbar .brand { display: flex; align-items: center; gap: 8px; color: var(--text); }
.topbar .brand .logo { width: 18px; height: 18px; border-radius: 4px; background: var(--accent); display: inline-block; }
.topbar .spacer { flex: 1; }
.topbar .pill { background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; color: var(--text-muted); font-weight: 500; font-size: 12px; }
.topbar .user { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-weight: 500; }
.topbar .user .avatar { width: 22px; height: 22px; border-radius: 50%; background: #2b3a59; }

.sidebar { background: var(--bg-panel); border-right: 1px solid var(--border); padding: 8px 0; overflow: auto; }
.sidebar .grp { color: var(--text-dim); font-size: 11px; padding: 10px 16px 4px; letter-spacing: .04em; }
.sidebar a { display: flex; align-items: center; gap: 8px; color: var(--text-muted); text-decoration: none; padding: 8px 16px; font-size: 13px; }
.sidebar a:hover { background: var(--row-hover); color: var(--text); }
.sidebar a.active { background: var(--row-selected); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.sidebar a .ico { width: 16px; text-align: center; opacity: .8; }
.sidebar a.dep { opacity: .5; }
.sidebar a.dep:hover { opacity: .75; }
.sidebar a .dep-mk { margin-left: auto; font-size: 10px; color: var(--st-hold); border: 1px solid #5b2b34; border-radius: 4px; padding: 0 5px; }

.main { overflow: auto; padding: 18px 22px 60px; }

/* ---------- ヘッダ ---------- */
.page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 14px; }
.page-head h1 { font-size: 18px; margin: 0; }
.page-head .crumb { color: var(--text-dim); font-size: 12px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; }

/* ---------- ボタン ---------- */
.btn { font-family: inherit; font-size: 13px; border-radius: var(--radius-sm); padding: 7px 14px; border: 1px solid var(--border-strong); background: var(--bg-input); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.btn.primary:hover { background: var(--accent); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: #5b2b34; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn .caret { opacity: .7; font-size: 10px; }

/* ---------- WF ガイドパネル（19ステップ準拠） ---------- */
.wf-guide { display: block; background: linear-gradient(180deg, #15233c, #121b2c); border: 1px solid var(--border-strong); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.wf-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.wf-head .tag { background: var(--accent-strong); color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.wf-head .ttl { font-weight: 600; }
.wf-head .sp { flex: 1; }
.wf-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); align-items: center; }
.pchip { font-size: 10px; border-radius: 3px; padding: 1px 6px; font-weight: 700; white-space: nowrap; }
.pchip.cust   { background: #3a2150; color: #d8b4fe; }
.pchip.screen { background: #13335a; color: #7cc0ff; }
.pchip.hht    { background: #0f3b3a; color: #6ee7d8; }
.pchip.phys   { background: #3a2f1a; color: #e2c08a; }
.pchip.sys    { background: #26303f; color: #9fb0c4; }

.wf-steps { padding: 6px 8px; max-height: 340px; overflow: auto; }
.wf-steps.collapsed { display: none; }
.wstep { display: grid; grid-template-columns: 26px 62px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 12px; }
.wstep + .wstep { margin-top: 2px; }
.wstep .n { width: 22px; height: 22px; border-radius: 50%; background: #22304a; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.wstep .act { color: var(--text); }
.wstep .act .who { color: var(--text-dim); font-size: 11px; margin-right: 5px; }
.wstep .mk { font-size: 11px; font-weight: 600; white-space: nowrap; }
.wstep.off { opacity: .5; }                  /* この画面以外（顧客Web/HHT/物理/SYS） */
.wstep.screen { background: #0f1c30; }
.wstep.current { box-shadow: inset 0 0 0 1px var(--accent); }
.wstep.anim { opacity: 1; background: #16335a; box-shadow: inset 0 0 0 1px var(--accent); animation: wpulse 720ms ease-in-out; }
.wstep.anim .n { background: var(--accent); color: #051226; }
@keyframes wpulse { 0% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 0 rgba(96,165,250,.5); } 60% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 6px rgba(96,165,250,0); } }
.wstep.done .n { background: var(--st-confirmed); color: #052e16; }
#btnHHT.running { opacity: .6; cursor: progress; }
.mk.ready { color: #7ee0a0; } .mk.todo { color: var(--st-hold); } .mk.auto { color: var(--text-dim); }

.wf-foot { padding: 8px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wf-foot .note { color: var(--text-dim); font-size: 11px; }

/* ---------- 選択バー ---------- */
.selbar { display: none; align-items: center; gap: 10px; background: #16233c; border: 1px solid var(--accent-strong); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; }
.selbar.show { display: flex; }
.selbar .count { font-weight: 600; }
.selbar .hint { color: var(--text-dim); font-size: 12px; margin-left: auto; }

/* ---------- テーブル ---------- */
.tbl-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel);
  /* 横スクロールはこの枠の内部だけで発生させる（検索条件・ヘッダはスクロールさせない＝2026-07-17 現場フィードバック）。
     列は min-width/nowrap で潰さず、窓が狭いときは表だけ枠内スクロール */
  overflow-x: auto; }
/* 枠内のタイトル行・検索エリアなど表以外の要素は横スクロールに追従させず左端に固定
   （表より幅が狭いため、一緒に流れると途中で切れて見える＝2026-07-17 現場フィードバック） */
.tbl-wrap > :not(table) { position: sticky; left: 0; }
/* 検索のサーバ条件を変えた直後の「未取得」状態＝実機 画面ｸﾘｱｰ() 相当（一覧を空にして「表示」を促す） */
.stale-cell { padding: 28px 16px; text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.9; }
.stale-cell b { color: var(--text); }
.stale-cell .sub { display: block; font-size: 11px; color: var(--text-muted); }
.tbl-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.tbl-head .title { font-weight: 600; }
.tbl-head .meta { color: var(--text-dim); font-size: 12px; }
table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 12px; padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-panel); position: sticky; top: 0; }
tbody td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr { cursor: pointer; }
/* 行の色分け（2026-07-08 現場レビュー 1-2）: 入庫=無色／出庫=薄赤／入庫以外(廃棄・直廃棄・販売等)=薄青。現行UI踏襲・薄め＝文字可読性優先 */
tbody tr.row-out { background: rgba(225, 29, 72, .10); }
tbody tr.row-oth { background: rgba(59, 130, 246, .10); }
tbody tr:hover, tbody tr.row-out:hover, tbody tr.row-oth:hover { background: var(--row-hover); }
tbody tr.selected, tbody tr.row-out.selected, tbody tr.row-oth.selected { background: var(--row-selected); }
tbody tr.ctx-active { box-shadow: inset 0 0 0 1px var(--accent); }
/* 宛先（お客様担当者）・備考の追加2行（2026-07-08 現場レビュー 1-1） */
.attn-tag { display: inline-block; border: 1px solid var(--border-strong); border-radius: 3px; padding: 0 4px; margin-right: 4px; font-size: 10px; color: var(--text-dim); }
.attn-line { color: var(--text); }
.biko-line { color: #d8a23a; }
/* 伝票発行（2026-07-08 現場レビュー 2-1/2-2）: 帳票別の印刷有無チェック（外すとタブ淡色＋取り消し線）・受付時CSVパネル */
.slip-tab .slip-inc { margin-right: 6px; vertical-align: -2px; }
.slip-tab.off { opacity: .45; text-decoration: line-through; }
.slip-csvout { margin: 10px 0 4px; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 6px; }
/* 明細表示ビュー（2026-07-08 現場レビュー 1-4/1-6）: 保留行=アンバー淡色、バーコード無し=警告チップ、修正入力 */
.mv-hold td { background: rgba(216, 162, 58, .12); }
.mv-nobar { display: inline-block; border: 1px solid rgba(240, 179, 95, .55); border-radius: 3px; padding: 0 6px; font-size: 10px; color: #f0b35f; }
.mv-in { background: #0f1828; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text); padding: 3px 6px; font-size: 12px; width: 100%; min-width: 140px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.center, th.center { text-align: center; }
.sub { color: var(--text-dim); font-size: 11px; }
/* 住所・連絡先: 最小幅を保証（窓が狭くても数文字ごとの縦落ちにしない＝2026-07-17 現場フィードバック）。
   部署は名称と同行・TELは住所と同行に圧縮。狭い画面は body の min-width でページ横スクロールに逃がす。 */
.addr { min-width: 250px; max-width: 320px; }
.addr .name { color: var(--text); }
.ono { font-variant-numeric: tabular-nums; font-weight: 600; }
.web-mark { color: var(--accent); }

/* ステータスバッジ（white-space:nowrap＝「依頼済」等の途中改行防止・2026-07-17 現場フィードバック） */
.badge { display: inline-block; border-radius: 4px; padding: 1px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
/* 状況バッジへの大分類併記（2026-07-08 現場レビュー 1-7）: 上段=大分類（未承認/未確定/確定済・枠線ピル）＋下段=詳細ステータス（実機enum・従来バッジ）。
   フォントサイズは詳細バッジと同一の 11px（旧 9px は不揃い＝2026-07-17 現場フィードバックで統一）。 */
.st-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cat-pill { font-size: 11px; line-height: 1.4; padding: 0 6px; border-radius: 4px; border: 1px solid var(--border-strong); color: var(--text-dim); letter-spacing: .5px; white-space: nowrap; }
.cat-pill.cat-未承認 { color: #f0b35f; border-color: rgba(240, 179, 95, .55); }
.cat-pill.cat-未確定 { color: #7fb3f7; border-color: rgba(127, 179, 247, .55); }
.cat-pill.cat-確定済 { color: #6fdc9c; border-color: rgba(111, 220, 156, .55); }
.badge.確定   { color: #052e16; background: var(--st-confirmed); }
.badge.受付   { color: #042f3d; background: var(--st-accepted); }
.badge.依頼済 { color: #0b1220; background: var(--st-requested); }
.badge.確認済 { color: #0b1220; background: var(--st-checked); }
.badge.保留   { color: #2a1a02; background: var(--st-hold); }
.badge.倉出   { color: #2a1502; background: #d8a23a; }
.badge.葛西受注 { color: #1c0a2e; background: var(--st-kasai); }

/* チェックボックス */
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* 行末ケバブ */
.kebab { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.kebab:hover { background: var(--row-selected); color: #fff; }

/* ---------- コンテキストメニュー ---------- */
.ctxmenu { position: fixed; z-index: 60; min-width: 230px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 6px; display: none; }
.ctxmenu.show { display: block; }
.ctxmenu .mi, .submenu .mi { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); position: relative; white-space: nowrap; }
.ctxmenu .mi:hover, .submenu .mi:hover { background: var(--row-selected); }
.ctxmenu .mi.pink, .submenu .mi.pink { color: var(--pink); }
.ctxmenu .mi.danger, .submenu .mi.danger { color: var(--danger); }
.ctxmenu .mi.blue, .submenu .mi.blue { color: var(--blue-ink); }
.ctxmenu .mi.disabled, .submenu .mi.disabled { color: #46546e; cursor: not-allowed; }
.ctxmenu .mi.disabled:hover, .submenu .mi.disabled:hover { background: transparent; }
.ctxmenu .mi .lbl, .submenu .mi .lbl { flex: 1; }
.ctxmenu .mi .hint, .submenu .mi .hint { font-size: 11px; color: var(--text-dim); }
.ctxmenu .mi .arrow { font-size: 11px; opacity: .7; }
.ctxmenu .sep, .submenu .sep { height: 1px; background: var(--border); margin: 5px 4px; }

/* サブメニュー */
.submenu { position: fixed; z-index: 61; min-width: 160px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 6px; display: none; }
.submenu.show { display: block; }

/* ---------- ダイアログ / モーダル ---------- */
.overlay { position: fixed; inset: 0; background: #0a0f18cc; display: none; align-items: center; justify-content: center; z-index: 80; }
.overlay.show { display: flex; }
.dialog { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-pop); width: min(560px, 92vw); max-height: 88vh; overflow: auto; }
.dialog.wide { width: min(760px, 94vw); }
.dialog.xwide { width: min(1080px, 96vw); }
.dialog .dh { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.dialog .dh h3 { margin: 0; font-size: 15px; }
.dialog .dh .x { margin-left: auto; cursor: pointer; color: var(--text-muted); background: none; border: none; font-size: 18px; }
.dialog .db { padding: 16px 18px; }
.dialog .df { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.dialog .note { color: var(--text-dim); font-size: 12px; }
.warn { color: var(--danger); }

/* フォーム */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field.col2 { grid-column: 1 / 3; }
.field label { font-size: 12px; color: var(--text-muted); }
.field input, .field select, .field textarea { font-family: inherit; font-size: 13px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 7px 9px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }

/* 受注詳細（内容確認） */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.dfield { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.dfield.col2 { grid-column: 1 / 3; }
.dfield .k { font-size: 11px; color: var(--text-dim); }
.dfield .v { color: var(--text); }
.det-h { margin: 14px 0 6px; font-size: 13px; color: var(--text-muted); }
.det-tbl { width: 100%; border-collapse: collapse; }
.det-tbl th, .det-tbl td { border: 1px solid var(--border); padding: 6px 8px; white-space: nowrap; }
.det-tbl thead th { position: static; background: var(--bg-panel); color: var(--text-muted); }
.det-tbl .num { text-align: right; }
.sa-qin { width: 80px; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text); padding: 3px 6px; text-align: right; font-family: inherit; font-size: 13px; }
.det-tbl tr.sa-total td { font-weight: 700; color: var(--text); background: var(--bg-panel); }
/* E0106 文書登録（一括）＝2段/1レコード（実機 MultiRow 再現）。r1+r2 で1管理番号＝レコード境界だけ太線 */
.db2-tbl tbody tr.db-r1 td { border-bottom: 1px dashed var(--border); padding-bottom: 3px; }
.db2-tbl tbody tr.db-r1 td[rowspan] { border-bottom: 2px solid var(--border-strong); }
.db2-tbl tbody tr.db-r2 td { border-bottom: 2px solid var(--border-strong); padding-top: 3px; }
/* 帳票管理（印刷スプール）グリッド：行選択＋無効ボタン */
.btn:disabled { opacity: .4; cursor: not-allowed; border-color: var(--border); }
.rm-grid tbody tr { cursor: pointer; }
.rm-grid tbody tr:hover td { background: var(--row-hover, #1a2740); }
.rm-grid tbody tr.sel td { background: var(--row-selected); }

/* フルページ一覧テーブル（受注一覧 #tbl と同じモダンスタイル：セル枠線なし・行ホバー・sticky ヘッダ）。在庫処理/ロケ管理の一覧に使用 */
.list-tbl { width: 100%; border-collapse: collapse; }
.list-tbl thead th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 12px; padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-panel); position: sticky; top: 0; z-index: 1; }
.list-tbl tbody td { padding: 9px 10px; white-space: nowrap; border-bottom: 1px solid var(--border); font-size: 13px; }
.list-tbl tbody tr:hover { background: var(--row-hover); }
.list-tbl tbody tr.ctx-active { box-shadow: inset 0 0 0 1px var(--accent); }
.list-tbl .num { text-align: right; }
.list-tbl .sub { color: var(--text-dim); font-size: 11px; }
.list-tbl .exc-ok { color: #7ee0a0; }
.list-tbl .exc-ng { color: var(--st-hold); font-weight: 600; }
/* 在庫状況一覧（T3_Q4111）の2段積みグリッド：各セルが上段/下段の2フィールド（GcMultiRow 2行テンプレ再現） */
.list-tbl.stk2 thead th, .list-tbl.stk2 tbody td { vertical-align: top; padding: 6px 9px; }
.list-tbl.stk2 .s2t { font-size: 12px; line-height: 1.35; }
.list-tbl.stk2 .s2b { font-size: 11px; line-height: 1.35; color: var(--text-muted); }
.list-tbl.stk2 thead th .s2b { color: var(--text-dim); }
.list-tbl.stk2 td.num, .list-tbl.stk2 th.num { text-align: right; }
.list-tbl.stk2 td.num .s2t, .list-tbl.stk2 td.num .s2b { text-align: right; }
/* 在庫一覧の状態バッジ（在庫/名変/移動… 最終異動種別・ワイヤー準拠） */
.st-pill { font-weight: 600; font-size: 11px; }
.st-pill.instock { color: #7ee0a0; } .st-pill.namechange { color: #c9a8ff; } .st-pill.move { color: #7ab8ff; }
.st-pill.outbound { color: var(--text-dim); } .st-pill.disposed { color: #f59ca0; } .st-pill.alloc { color: var(--st-hold); }

/* 棚入れ（TO-BE・2026-07-08 レビュー 1-8）＝確定済＝請求対象なのにロケ未＝ハンディ倉入れ抜けの疑い */
.st-pill.shelf-wait { color: #f0b35f; }
.tobe-tag { display: inline-block; margin-left: 4px; padding: 0 4px; border: 1px solid #4a3f6b; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; color: #b3a4e6; vertical-align: 1px; }
/* 帳票タブの内容ヒント（廃棄業者を載せている帳票の目印・2026-08-01 レビュー第3回 2-5） */
.tab-badge { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px;
  background: #3a2a12; border: 1px solid #6b4d1c; color: var(--st-hold); font-size: 9px; font-weight: 700; vertical-align: 1px; }
.pill.shelf-alert { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: #3a2a12; color: var(--st-hold); border: 1px solid #6b4d1c; }
.pill.shelf-alert:hover { background: #4a361a; }
/* 長期ロケ未＝倉入れ抜けではなく要調査。棚入れ待ちのアラートより意図的に弱いトーンにして、
   本来拾いたい直近分（shelf-alert）を埋もれさせない（DB第5弾 Q8 ＝ findings F32）。 */
.pill.shelf-stale { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: #23303a; color: #8fa9bd; border: 1px solid #3c5568; }
.pill.shelf-stale:hover { background: #2c3d4a; }

/* 入庫プルーフリスト 棚漏れチェック（#16 / Q4171 / B10タブ2） */
.proof-meta { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; flex-wrap: wrap; }
.proof-meta .pill { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-strong); }
.proof-meta .pill.ok { background: #103626; color: #7ee0a0; border-color: #1c5b3e; }
.proof-meta .pill.warn { background: #3a2a12; color: var(--st-hold); border-color: #6b4d1c; }
.proof-meta .dim { color: var(--text-dim); font-size: 12px; }
.proof-meta .stock-tab { cursor: pointer; color: var(--text-muted); }
.proof-meta .stock-tab:hover { border-color: var(--accent); }
.proof-meta .stock-tab.on { background: #16233c; color: #fff; border-color: var(--accent); }
.det-scroll { overflow: auto; max-height: 320px; border: 1px solid var(--border); border-radius: 6px; }
.proof-tbl { font-size: 12px; }
.proof-tbl thead th { position: sticky; top: 0; z-index: 1; }
.proof-tbl .exc-ok { color: var(--text-dim); text-align: center; }
.proof-tbl .exc-ng { color: var(--st-hold); font-weight: 600; }
.proof-foot { margin-top: 10px; color: var(--text-dim); font-size: 11px; line-height: 1.6; }
.proof-foot b { color: var(--text-muted); }

/* 配車連携CSV出力（Q5161） */
.hrow { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.hk { width: 60px; color: var(--text-muted); font-size: 12px; }
.hcb { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.hcb.dim { opacity: .45; }
.hin { background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; color: var(--text); padding: 5px 8px; font-family: inherit; font-size: 13px; }
.hin.wide { width: 240px; } .hin.path { width: 380px; } .hin.cd { width: 96px; }
.hbtn { background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text); padding: 5px 9px; font-family: inherit; font-size: 12px; cursor: pointer; }
.hbtn:hover:not(:disabled) { border-color: var(--accent); }
.hbtn:disabled { opacity: .45; cursor: default; }
.hbtn.wide-btn { padding: 5px 14px; }
.hin[readonly] { opacity: .6; }
.cabi-scroll { overflow: auto; max-height: 300px; border: 1px solid var(--border); border-radius: 6px; margin-top: 4px; }
.cabi-tbl { font-size: 11px; }
.cabi-tbl th, .cabi-tbl td { white-space: nowrap; }
.cabi-tbl thead th { position: sticky; top: 0; z-index: 1; }

/* 帳票プレビュー（簡易） */
.slip { background: #f6f7f9; color: #1f2933; border-radius: 8px; padding: 18px; font-size: 12px; }
.slip h4 { margin: 0 0 10px; text-align: center; letter-spacing: .3em; }
.slip .row { display: flex; justify-content: space-between; border-bottom: 1px dashed #c8ced8; padding: 4px 0; }
.slip table { font-size: 12px; }
.slip th, .slip td { border: 1px solid #c8ced8; padding: 4px 6px; color: #1f2933; }
.slip thead th { background: #e8ebf0; position: static; }
.slip-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.slip-tab { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border-strong); cursor: pointer; color: var(--text-muted); font-size: 12px; }
.slip-tab.on { background: #16233c; color: #fff; border-color: var(--accent); }
/* 月次帳票（T3_K0201）＝チェック選択→一括印刷フォーム */
.warn-line { color: #e5484d; font-weight: 700; line-height: 1.5; margin: 0 0 12px; }
.agg-form { border: 1px solid var(--border-strong); border-radius: 8px; padding: 16px 18px; margin-bottom: 12px; }
.agg-date { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.agg-date label { min-width: 40px; color: var(--text-muted); }
.agg-date input { background: #0f1828; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); padding: 3px 6px; text-align: center; }
.agg-list { display: flex; flex-direction: column; gap: 9px; }
.agg-cb { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.agg-sub { padding-left: 22px; color: var(--text-muted); }
.agg-sub .agg-cb { margin: 0 4px; }
.agg-prev-cb { margin-top: 14px; justify-content: flex-end; }
/* ログ一覧（T3_Q9101）＝フィルタ2段＋2段ヘッダーグリッド */
.log-filter { border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.log-filter .lf-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.log-filter label { color: var(--text-muted); font-size: 12px; }
.log-tbl th { vertical-align: top; line-height: 1.35; }
.log-tbl th .sub { color: var(--text-muted); font-weight: 400; }
.log-tbl td { vertical-align: top; }
.log-tbl td .sub { color: var(--text-muted); font-size: 11px; }
/* ピッキングリスト 受注単位/倉単位 セグメント＋未選択ゲート（slip は明色紙面） */
.pl-seg { display: inline-flex; gap: 6px; }
.pl-opt { font-family: inherit; font-size: 12px; padding: 3px 12px; border-radius: 999px; border: 1px solid #b6bdc9; background: #fff; color: #41505f; cursor: pointer; }
.pl-opt:hover { border-color: #2f6fb0; }
.pl-opt.on { background: #1f6fb2; border-color: #1f6fb2; color: #fff; font-weight: 600; }
.pl-gate { margin-top: 12px; padding: 14px; border: 1px dashed #c79a3a; background: #fdf6e3; border-radius: 8px; color: #8a6d1f; text-align: center; font-weight: 600; line-height: 1.7; }
.pl-gate .dim { color: #a08642; font-weight: 400; font-size: 11px; }
.slip .note.dim { color: #6b7785; }
/* 印刷設定（AS-IS insatu3 相当をプレビュー内に統合） */
.print-set { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: flex-end; }
.pset-ck { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #41505f; cursor: pointer; }
.pset-ck input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; accent-color: #1f6fb2; }
.pset-pos { width: 52px; font-family: inherit; font-size: 12px; padding: 2px 6px; border: 1px solid #b6bdc9; border-radius: 4px; }
/* 在庫ラベル(QR) プレビュー */
.qr-wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.qr-card { display: flex; gap: 8px; align-items: center; border: 1px solid #c8ced8; border-radius: 6px; padding: 8px 10px; background: #fff; min-width: 190px; }
.qr-code { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 9px; line-height: 1.1; color: #1f2933; background: repeating-conic-gradient(#222 0 25%, #fff 0 50%) 0 0 / 8px 8px; border: 1px solid #222; border-radius: 3px; font-weight: 700; }
.qr-meta { font-size: 11px; line-height: 1.4; }
.qr-meta .qr-mei { font-weight: 700; font-size: 12px; }
.qr-more { font-size: 11px; }

/* ---------- トースト ---------- */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 90; }
.toast { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow-pop); max-width: 360px; animation: tin .2s ease; }
.toast.ok { border-left-color: var(--st-confirmed); }
.toast.warn { border-left-color: var(--st-hold); }
@keyframes tin { from { opacity: 0; transform: translateY(6px); } }

.footnote { margin-top: 14px; background: #131c2d; border: 1px solid var(--border); border-left: 3px solid var(--pink); border-radius: var(--radius); padding: 10px 14px; color: var(--text-dim); font-size: 12px; }
.footnote b { color: var(--text-muted); }

/* WF13 月次処理（請求書作成 C3 進捗マトリクス） */
.mstep-row { display: inline-flex; gap: 3px; }
.mstep { width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 10px; border-radius: 4px; background: #1b2538; color: var(--text-dim); border: 1px solid var(--border); }
.mstep.run  { background: #16335c; color: #7ab8ff; border-color: var(--accent); animation: mpulse .8s ease-in-out infinite; }
.mstep.done { background: #163a2b; color: #7ee0a0; border-color: #2f6b4f; }
.mstep.error{ background: #3a1620; color: #f59ca0; border-color: #6b2f3a; }
@keyframes mpulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.st-pill.post { color: #7ab8ff; } .st-pill.dim { color: var(--text-dim); }

/* 月次処理 C3 ワイヤー準拠（mock-sample.pen jIoX9）：ヘッダアクション/フィルタパネル/パイプラインバー/進捗バー/バッジ */
.m-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.m-actions .spacer { flex: 1; }
.mpanel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.mfilter { display: flex; gap: 16px; }
.mfilter .mfield { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mfield > label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.mfield select, .mfield input { background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); height: 34px; padding: 0 10px; font-size: 13px; font-family: inherit; width: 100%; box-sizing: border-box; }
.mopts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.mopts label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.mopts label.dim { opacity: .5; cursor: default; }
.mfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; flex-wrap: wrap; gap: 8px; }
.mfoot .cnt { font-size: 13px; color: var(--text-muted); }
.mfoot .cnt b { color: var(--text); font-size: 14px; }
.pipe-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--text); }
.pipe-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pipe-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pchip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-app); border: 1px solid var(--border-strong); border-radius: 16px; padding: 5px 9px; font-size: 11px; color: var(--text); }
.pchip .n { width: 17px; height: 17px; line-height: 17px; text-align: center; border-radius: 50%; background: #1e3356; color: var(--accent); font-size: 10px; font-weight: 700; }
.pipe-chips .sep { color: var(--text-dim); font-size: 12px; }
.pseg { display: inline-flex; gap: 3px; align-items: center; }
.pseg i { width: 13px; height: 7px; border-radius: 3px; background: var(--border-strong); display: inline-block; }
.pseg i.done { background: var(--accent); }
.pseg i.run { background: var(--st-hold); animation: mpulse .8s ease-in-out infinite; }
.pseg i.skip { background: repeating-linear-gradient(45deg, var(--border-strong) 0 3px, #3a2f1a 3px 6px); }
.pchip .pep { font-size: 9px; font-weight: 700; color: var(--accent); background: #12233d; border-radius: 3px; padding: 1px 4px; margin-left: 2px; letter-spacing: .3px; }
.pcount { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-left: 8px; }
.pcount.ok { color: #4ade80; }
/* 処理列＝実機 T3_G0101 Template5「処理」は8ステップ名を縦に列挙。状態で色分け（動作デモ）。 */
.psteps { display: flex; flex-direction: column; gap: 1px; }
.psteps .pstep { font-size: 10.5px; line-height: 1.35; color: var(--text-dim); white-space: nowrap; }
.psteps .pstep .n { display: inline-block; width: 15px; color: var(--text-muted); }
.psteps .pstep.done { color: #4ade80; }
.psteps .pstep.run  { color: var(--st-hold); font-weight: 700; }
.psteps .pstep.skip { color: #8a7a4a; text-decoration: line-through; }
.btn.danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.btn.danger:hover { background: #d64535; border-color: #d64535; }
.mbadge { display: inline-block; border-radius: 12px; padding: 3px 9px; font-size: 11px; font-weight: 600; }
.mbadge.ok { background: #14331f; color: #4ade80; }
.mbadge.warn { background: #3a2e12; color: #f5c451; }
.mbadge.dim { color: var(--text-dim); }
.msg-ok { color: #4ade80; } .msg-run { color: var(--accent); } .msg-err { color: #f59ca0; } .msg-dim { color: var(--text-dim); }

.bill-amt { width: 100%; border-collapse: collapse; margin: 6px 0; }
.bill-amt td { padding: 3px 6px; border-bottom: 1px dashed #c8ced8; }
.bill-amt td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bill-amt tr.total td { border-top: 2px solid #9aa4b2; border-bottom: none; font-weight: 700; }
.slip .wm { position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%) rotate(-18deg); font-size: 44px; color: rgba(220,60,60,.16); font-weight: 800; letter-spacing: .2em; pointer-events: none; }
.slip.rel { position: relative; }

/* 在庫履歴照会(Q4121) タイムライン・フィード（ワイヤー EFZJY 準拠） */
.hist-feed { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.hist-item { display: flex; gap: 12px; padding: 10px 12px; background: #0f1828; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 8px; }
.hist-item .k { flex: 0 0 auto; align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #1b2538; }
.hist-item .hmain { flex: 1 1 auto; min-width: 0; }
.hist-item .hmain .ct { font-size: 13px; color: var(--text); line-height: 1.5; }
.hist-item .hmain .ct b { color: #fff; }
.hist-item .hmain .ct .arw { color: var(--accent); font-weight: 700; margin: 0 5px; }
/* 名変の 元/先 ペアで「変更なし＝元と同値」を示す注記（Q4121 は変更のない側も元と同値で返す） */
.hist-item .hmain .ct .unchanged { color: var(--text-dim); font-size: 10px; margin-left: 4px; }
.hist-item .hmain .dt { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--text-dim); }
.hist-item .hmain .dt b { color: var(--text-muted); font-weight: 600; }
.hist-item .meta { flex: 0 0 auto; text-align: right; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.hist-item .meta .d { color: var(--text-muted); font-weight: 600; font-size: 12px; margin-bottom: 2px; }
.hist-item.k-in    { border-left-color: #2f6b4f; } .hist-item.k-in .k    { color: #7ee0a0; }
.hist-item.k-name  { border-left-color: #5a4b86; } .hist-item.k-name .k  { color: #c9a8ff; }
.hist-item.k-move  { border-left-color: #2f5a86; } .hist-item.k-move .k  { color: #7ab8ff; }
.hist-item.k-shelf { border-left-color: #2f6b66; } .hist-item.k-shelf .k { color: #7fe0d6; }
.hist-item.k-out   { border-left-color: #4a5568; } .hist-item.k-out .k   { color: #cdd7e3; }
.hist-item.k-disp  { border-left-color: #6b2f3a; } .hist-item.k-disp .k  { color: #f59ca0; }
.hist-item.k-edit  { border-left-color: #6b5a2f; } .hist-item.k-edit .k  { color: #e8c97a; }