.save-ok{font-size:11px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;background:var(--gbg);color:var(--gtx)}
.save-ing{font-size:11px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;background:var(--sur2);color:var(--tx3)}
.save-dirty{font-size:11px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;background:#FEF3C7;color:#92400E}
.save-error{font-size:11px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;background:#FEE2E2;color:#B91C1C}
/* フェーズ1: op-hd右端を1グループにまとめ右寄せ（通信インジケータ・保存バッジ・保存ボタン） */
.op-hd-right{margin-left:auto;display:flex;align-items:center;gap:8px}
/* フェーズ1: 通信インジケータ（オフライン時のみ表示・オレンジ）。アプリのamberトークンを使い「オフライン関連」を統一色に */
.net-indicator{font-size:11px;display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;background:var(--abg);color:var(--atx);border:0.5px solid var(--abd);font-weight:600;white-space:nowrap}
.net-indicator i{font-size:12px}
/* フェーズ1: オフライン保存バッジ（退避済み・復帰後に再保存を、の意味）。未保存(淡黄)と区別するためamber系＋枠線 */
.save-offline{font-size:11px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;background:var(--abg);color:var(--atx);border:0.5px solid var(--abd);white-space:nowrap}
/* フェーズ1: オンライン復帰の再保存うながし（青系） */
.save-reonline{font-size:11px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;background:var(--bbg);color:var(--btx);border:0.5px solid var(--bbd);white-space:nowrap}
/* フェーズ2: 未送信アウトボックスのバッジ（未送信があるときだけ表示・クリックで再送） */
.outbox-badge{font-size:11px;display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;background:#FEE2E2;color:#B91C1C;border:0.5px solid #F0B4B4;font-weight:600;white-space:nowrap;cursor:pointer;font-family:var(--fn)}
.outbox-badge:hover{background:#FBD5D5}
.outbox-badge:disabled{opacity:.6;cursor:default}
.outbox-badge i{font-size:12px}
.outbox-badge.sent{background:var(--gbg);color:var(--gtx);border-color:var(--gbd)}
.outbox-badge.pulse{animation:obPulse 1s ease-in-out 0s 3}
@keyframes obPulse{0%,100%{box-shadow:0 0 0 0 rgba(185,28,28,0)}50%{box-shadow:0 0 0 4px rgba(185,28,28,.28)}}
/* 3-A: 競合バッジ（赤系）と競合ダイアログ */
.save-conflict{font-size:11px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;background:#FEE2E2;color:#B91C1C;white-space:nowrap}
.conflict-overlay{position:fixed;inset:0;background:rgba(0,0,0,.38);display:flex;align-items:center;justify-content:center;z-index:3000}
.conflict-box{background:var(--sur,#fff);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.28);max-width:420px;width:calc(100% - 48px);padding:20px 22px;font-family:var(--fn)}
.conflict-title{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:#B91C1C;margin-bottom:10px}
.conflict-title i{font-size:18px}
.conflict-msg{font-size:13px;line-height:1.7;color:var(--tx2,#4A4A47);margin-bottom:18px}
.conflict-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.conflict-actions button{font-size:13px;font-weight:600;padding:8px 16px;border-radius:8px;cursor:pointer;font-family:var(--fn);border:0.5px solid transparent}
.conflict-actions .cf-reload{background:var(--bbg,#E6F1FB);color:var(--btx,#0C447C);border-color:var(--bbd,#85B7EB)}
.conflict-actions .cf-reload:hover{filter:brightness(.96)}
.conflict-actions .cf-overwrite{background:#FEE2E2;color:#B91C1C;border-color:#F0B4B4}
.conflict-actions .cf-overwrite:hover{filter:brightness(.97)}
.conflict-actions .cf-cancel{background:var(--sur2,#F2F1EE);color:var(--tx2,#4A4A47);border-color:var(--bd,#E0DED8)}
.conflict-actions .cf-cancel:hover{background:var(--sur3,#E8E7E3)}
.op-hd{background:var(--sur);border-bottom:0.5px solid var(--bd);padding:8px 20px;display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative;flex-wrap:wrap}
.op-sel{border:0.5px solid var(--bd2);border-radius:var(--r);padding:5px 10px;font-size:13px;font-weight:500;background:var(--sur);color:var(--tx);cursor:pointer;min-width:220px;font-family:var(--fn)}
.add-panel{position:absolute;background:var(--sur);border:0.5px solid var(--bd2);border-radius:var(--r);padding:12px 16px;z-index:200;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.add-panel.hidden{display:none}
.op-cnt{flex:1;overflow-y:auto;padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.card{background:var(--sur);border:0.5px solid var(--bd);border-radius:var(--rl);min-width:0}
.card.wc{border-color:var(--gbd);border-width:1px}
.card.nc{border-color:var(--abd);border-width:1px}
.ch.wh{background:var(--gbg)}
.ch.nh{background:var(--abg)}

.ch{padding:7px 12px;display:flex;align-items:center;gap:6px;border-bottom:0.5px solid var(--bd);border-radius:var(--rl) var(--rl) 0 0}

.ch-num{font-size:10px;color:var(--tx3);background:var(--sur3);border-radius:20px;padding:1px 7px;font-weight:500}
.ch-title{font-size:12px;font-weight:500;color:var(--tx);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig{display:grid;grid-template-columns:1fr 1fr;border-bottom:0.5px solid var(--bd)}
.ic{padding:7px 12px;display:flex;flex-direction:column;gap:4px}
.ic:first-child{border-right:0.5px solid var(--bd)}
.if{display:flex;align-items:center;gap:4px;min-height:23px}
.il{font-size:10px;color:var(--tx3);white-space:nowrap;min-width:62px}
.ii{border:none;border-bottom:0.5px solid transparent;padding:2px 3px;font-size:12px;background:transparent;color:var(--tx2);font-family:var(--fn);flex:1;min-width:0}
.ii:hover{border-bottom-color:var(--bd2)}
.ii:focus{outline:2px solid #378ADD;outline-offset:-1px;background:#E8F2FF;border-radius:4px;color:var(--tx);box-shadow:0 0 0 4px rgba(55,138,221,.15)}
.isel{border:none;border-bottom:0.5px solid transparent;padding:2px 3px;font-size:12px;background:transparent;color:var(--tx2);font-family:var(--fn);flex:1;cursor:pointer}
.isel:focus{outline:2px solid #378ADD;outline-offset:-1px;background:#E8F2FF;border-radius:4px;color:var(--tx);box-shadow:0 0 0 4px rgba(55,138,221,.15)}
.sw{position:relative;flex:1;min-width:0}
.sw-in{border:none;border-bottom:0.5px solid transparent;padding:2px 3px;font-size:12px;background:transparent;color:var(--tx2);font-family:var(--fn);width:100%}
.sw-in:hover{border-bottom-color:var(--bd2)}
.sw-in:focus{outline:none;color:var(--tx)}
.sg-box{position:absolute;top:calc(100% + 3px);left:0;min-width:230px;background:var(--sur);border:0.5px solid var(--bd2);border-radius:var(--r);z-index:300;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.12);max-height:210px;overflow-y:auto;display:none}
.sg-it{padding:6px 10px;cursor:pointer;display:flex;gap:8px;align-items:baseline;border-bottom:0.5px solid var(--bd);font-size:12px}
.sg-it:last-child{border-bottom:none}
.sg-it.sl,.sg-it:hover{background:var(--bbg);color:var(--btx)}
.sg-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-cd{font-size:10px;color:var(--tx3);white-space:nowrap;margin-left:auto}
.sg-it.sl .sg-cd,.sg-it:hover .sg-cd{color:var(--btx)}
.bks{padding:8px 12px}
.bk-sc{overflow-x:auto}
.bk-in{min-width:280px}
.gh{display:grid;gap:2px;margin-bottom:2px;align-items:center}
.gr{display:grid;gap:2px;align-items:center;margin-bottom:2px}
.g-gr{font-size:10px;color:var(--tx3);text-align:center}
.nv{font-size:11px;font-weight:600;color:var(--tx);text-align:center}
.dl{height:0.5px;background:var(--bd);margin:3px 0}
.qi{border:0.5px solid var(--bd2);border-radius:4px;padding:3px 5px;font-size:11px;background:var(--sur);color:var(--tx);font-family:var(--fn);width:100%;text-align:right}
.qi:focus{outline:none;border-color:#378ADD;box-shadow:0 0 0 2px var(--bbg)}
.qi.z{color:var(--tx3)}
.bsw{position:relative}
.b-in{border:0.5px solid var(--bd2);border-radius:4px;padding:3px 6px;font-size:11px;background:var(--sur);color:var(--tx);font-family:var(--fn);width:100%}
.b-in:focus{outline:none;border-color:#378ADD;box-shadow:0 0 0 2px var(--bbg)}
.b-in::placeholder{color:var(--tx3)}
.b-box{position:absolute;top:calc(100% + 2px);left:0;min-width:210px;background:var(--sur);border:0.5px solid var(--bd2);border-radius:var(--r);z-index:9999;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.12);max-height:240px;overflow-y:auto;display:none}
.b-it{padding:5px 10px;cursor:pointer;display:flex;gap:6px;align-items:baseline;border-bottom:0.5px solid var(--bd);font-size:11px}
.b-it:last-child{border-bottom:none}
.b-it.sl,.b-it:hover{background:var(--bbg);color:var(--btx)}
.b-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-fl{font-size:10px;color:var(--tx3);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-it.sl .b-fl,.b-it:hover .b-fl{color:var(--btx)}
.b-cd{font-size:10px;color:var(--tx3);white-space:nowrap;margin-left:auto}
.b-it.sl .b-cd,.b-it:hover .b-cd{color:var(--btx)}
.tot-ok{font-size:11px;font-weight:600;color:var(--gtx);text-align:right}
.tot-warn{font-size:11px;font-weight:600;color:var(--atx);text-align:right}
.inv-ok{font-size:10px;color:var(--gtx);text-align:center}
.inv-warn{font-size:10px;color:var(--atx);text-align:center;font-weight:600}
.add-buyer{width:100%;font-size:11px;color:var(--tx3);background:none;border:0.5px dashed var(--bd2);border-radius:4px;padding:4px;cursor:pointer;text-align:center;margin-top:4px;font-family:var(--fn);display:flex;align-items:center;justify-content:center;gap:3px}
.add-buyer:hover{background:var(--sur2);color:var(--tx2)}
.del{background:none;border:none;cursor:pointer;color:var(--tx3);padding:0;font-size:13px;line-height:1}
.del:hover{color:var(--rtx)}
.op-ft{background:var(--sur);border-top:0.5px solid var(--bd);padding:8px 16px;display:flex;gap:6px;align-items:center;flex-shrink:0}

/* === 閲覧モード（過去日）=== */
body.readonly .card{background:#FAFAF8;border-color:var(--bd)}
body.readonly .ch{background:var(--sur2)}
body.readonly .card *{color:var(--tx3)}
body.readonly .card input,body.readonly .card select,body.readonly .card textarea{background:transparent;border-color:transparent;color:var(--tx3);pointer-events:none}
body.readonly .card .ch-num,body.readonly .card .ch-title{color:var(--tx2)}
body.readonly .card .bge{opacity:.7}
body.readonly .card .del,body.readonly .card .add-buyer,body.readonly .card .grid-header{display:none !important}
body.readonly .add-buyer-row{display:none !important}
body.readonly .op-hd .btn-s{display:none !important}
body.readonly .ft .ftbtn{opacity:.5;pointer-events:none}
.future-empty{display:none;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:var(--tx3);text-align:center;gap:14px}
.future-empty i{font-size:48px;color:var(--bd2)}
.future-empty .msg{font-size:13px}

/* === カードヘッダーの販売日入力欄 === */
.ch-saledate-wrap{display:inline-flex;align-items:center;gap:6px;margin-left:4px;cursor:pointer}
.ch-saledate-lbl{font-size:10px;color:var(--tx3);font-weight:500}
.ch-saledate{border:0.5px solid var(--bd2);border-radius:4px;padding:2px 4px;font-size:11px;background:var(--sur);color:var(--tx);font-family:var(--fn);cursor:pointer}
.ch-saledate:focus{outline:none;border-color:#378ADD;box-shadow:0 0 0 2px var(--bbg)}
body.readonly .ch-saledate{pointer-events:none;background:transparent;border-color:transparent;color:var(--tx3)}

/* === ビュー切替トグル === */
.view-toggle{display:inline-flex;align-items:center;background:var(--sur2);border:0.5px solid var(--bd2);border-radius:var(--r);padding:2px;margin-left:4px;gap:2px}
.vt-btn{background:transparent;border:none;border-radius:4px;padding:4px 8px;cursor:pointer;color:var(--tx3);display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:var(--fn)}
.vt-btn:hover{background:var(--sur);color:var(--tx2)}
.vt-btn.on{background:var(--sur);color:var(--btx);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.vt-btn i{font-size:14px}
.vt-btn:focus-visible{outline:2px solid #378ADD;outline-offset:1px;box-shadow:0 0 0 4px rgba(55,138,221,.2)}

/* === マトリクスビュー === */
.matrix-cnt{flex:1;overflow:auto;padding:14px 16px;background:#FAFAF7;min-height:0}
.matrix-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:var(--tx3);text-align:center;gap:14px;border:0.5px dashed var(--bd2);border-radius:var(--rl);background:var(--sur)}
.matrix-empty i{font-size:48px;color:var(--bd2)}
.matrix-empty-title{font-size:14px;font-weight:600;color:var(--tx2)}
.matrix-empty-msg{font-size:12px;line-height:1.7}

.matrix-wrap{background:#fff;border:1px solid #D8D4CC;border-radius:var(--rl);overflow:visible;display:inline-block;min-width:100%}
.mxt{border-collapse:separate;border-spacing:0;width:auto;background:#fff;font-size:12px;font-family:var(--fn);table-layout:auto}
.mxt th, .mxt td{border:1px solid #E5E1D8;padding:0;vertical-align:middle;white-space:nowrap;background:#fff;height:30px}

/* 列幅の定義 */
/* 左固定列: 買人名＋備考を1つの結合セル(colspan=2/250px)に収め、見出しの角セルと同一構造にしてズレを防ぐ */
.mxt-buyer-fixed{width:250px;min-width:250px;max-width:250px;padding:0}
.mxt-bf{display:flex;align-items:center;width:250px;height:100%}
.mxt-bf-name{position:relative;width:150px;overflow:hidden;border-right:1px solid #E5E1D8}
.mxt-bf-memo{width:100px;overflow:hidden}
.mxt-cell{min-width:64px;width:64px}
.mxt-total-c,.mxt-total-h{min-width:64px;width:64px}

/* 左側固定: 買人結合セル（メタ情報行はcolspan=2でラベル列を担当） */
.mxt-buyer-fixed{position:sticky;left:0;z-index:5;background:#fff;color:var(--tx);text-align:left;border-right:1px solid #C8C6BF !important}
/* 買人サジェスト表示中は、その行を最前面に出してドロップダウンが他のセルに隠れないようにする */
.mxt-buyer-fixed:focus-within{z-index:10000}
/* メタ情報行の左ラベル（colspan=2、widthはname+memo分） */
.mxt-meta-lbl{position:sticky;left:0;z-index:6;background:#F4F1EB !important;color:var(--tx2);font-weight:600;font-size:11px;text-align:center;border-right:1px solid #C8C6BF !important;width:250px;min-width:250px;padding:5px 8px}
.mxt-meta-val{text-align:center;color:var(--tx2);font-size:11px;background:#FAFAF7 !important;padding:5px 8px}
.mxt-meta:nth-child(odd) .mxt-meta-val{background:#fff !important}

/* 等階級行 */
.mxt-grade-th{background:#F4F1EB !important;color:var(--tx);font-weight:700;text-align:center;font-size:12px;padding:5px 8px}
.mxt-grade .mxt-corner{position:sticky;left:0;z-index:6;background:#F4F1EB !important;color:var(--tx2);font-weight:600;text-align:center;border-right:1px solid #C8C6BF !important;width:250px;min-width:250px;padding:5px 8px}

/* 入荷数行 */
.mxt-nyuka .mxt-corner{position:sticky;left:0;z-index:6;background:#FFFBED !important;color:#7A5C00;font-weight:700;text-align:center;border-right:1px solid #C8C6BF !important;width:250px;min-width:250px;padding:5px 8px}
.mxt-nyuka-c{background:#FFFBED !important;color:#7A5C00;font-weight:700;text-align:right;font-size:13px;padding:5px 8px}

/* 買人セル入力欄 */
.mxt-buyer-in{width:100%;min-width:0;border:none;background:transparent;font-size:12px;font-family:var(--fn);color:var(--tx);padding:5px 8px;font-weight:500}
.mxt-buyer-in:focus{outline:2px solid #378ADD;outline-offset:-2px;background:#E8F2FF}
.mxt-buyer-in::placeholder{color:var(--tx3);font-weight:400}
.mxt-memo-in{width:100%;min-width:0;border:none;background:transparent;font-size:11px;font-family:var(--fn);color:var(--tx2);padding:5px 8px}
.mxt-memo-in:focus{outline:2px solid #378ADD;outline-offset:-2px;background:#E8F2FF;color:var(--tx)}
.mxt-memo-in::placeholder{color:var(--tx3)}
.mxt-qty-in{width:100%;border:none;background:transparent;font-size:13px;font-family:var(--fn);color:var(--tx);padding:5px 8px;text-align:right}
.mxt-qty-in:focus{outline:2px solid #378ADD;outline-offset:-2px;background:#E8F2FF}
.mxt-qty-in:hover:not(:focus){background:#FFFCF3}
.mxt-qty-in::placeholder{color:var(--tx3);opacity:.5}
.mxt-qty-in::-webkit-outer-spin-button,
.mxt-qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* 買人サジェストボックス（マトリクス用） */
.mxt-buyer-fixed .b-box{position:fixed;min-width:240px;background:var(--sur);border:0.5px solid var(--bd2);border-radius:var(--r);z-index:9999;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.12);max-height:240px;overflow-y:auto;display:none}

/* 買人行ホバー */
.mxt-buyer:hover td:not(.mxt-buyer-fixed){background:#FAFAF7}
.mxt-buyer:hover .mxt-buyer-fixed{background:#F4F1EB}
.mxt-buyer-new .mxt-buyer-in,
.mxt-buyer-new .mxt-memo-in,
.mxt-buyer-new .mxt-qty-in{background:#FFFEF7}
.mxt-buyer-new .mxt-buyer-fixed{background:#FFFEF7 !important;border-top:1.5px dashed var(--bd2) !important}
.mxt-buyer-new td:not(.mxt-buyer-fixed){background:#FFFEF7;border-top:1.5px dashed var(--bd2)}

/* 在庫数行 */
.mxt-zaiko .mxt-corner{position:sticky;left:0;z-index:6;background:#EAF5EF !important;color:#1E6B3E;font-weight:700;text-align:center;border-right:1px solid #C8C6BF !important;width:250px;min-width:250px;padding:5px 8px}
.mxt-zaiko-c{background:#EAF5EF !important;color:#1E6B3E;font-weight:700;text-align:right;font-size:13px;padding:5px 8px}

/* 合計列（右端） */
.mxt-total-h{background:#F4F1EB !important;color:var(--tx2);font-weight:700;text-align:center;font-size:11px;position:sticky;right:0;z-index:4;border-left:1px solid #C8C6BF !important;padding:5px 8px}
.mxt-total-c{background:#F8F6F0 !important;color:var(--tx);font-weight:700;text-align:right;font-size:13px;position:sticky;right:0;z-index:4;border-left:1px solid #C8C6BF !important;padding:5px 8px}
.mxt-nyuka .mxt-total-c{background:#FFFBED !important;color:#7A5C00}
.mxt-zaiko .mxt-total-c{background:#EAF5EF !important;color:#1E6B3E}

/* sticky上部行: 等階級行と入荷数行のみを画面上部に固定 */
.mxt thead{position:relative}
.mxt-grade > th,
.mxt-grade > td{position:sticky;top:0;z-index:4}
.mxt-grade .mxt-corner{z-index:7}
.mxt-grade .mxt-total-h{z-index:6}
.mxt-nyuka > th,
.mxt-nyuka > td{position:sticky;top:30px;z-index:4}
.mxt-nyuka .mxt-corner{z-index:7}
.mxt-nyuka .mxt-total-c{z-index:6}

/* 在庫数行: sticky下部固定は不要、自然に最下段に表示 */
.mxt tfoot{position:relative}

/* === カード ドラッグ&ドロップ === */
.card{cursor:default}
.card.dragging{opacity:.35;transform:scale(.97);transition:transform .15s,opacity .15s;cursor:grabbing}
.ch[data-drag-handle="1"]{cursor:grab}
.ch[data-drag-handle="1"]:active{cursor:grabbing}
/* 入力欄やボタンの上ではgrabカーソルを無効化 */
.ch[data-drag-handle="1"] input,
.ch[data-drag-handle="1"] button,
.ch[data-drag-handle="1"] label.card-check,
.ch[data-drag-handle="1"] label.ch-saledate-wrap{cursor:auto}
.ch[data-drag-handle="1"] button.card-del{cursor:pointer}
.ch[data-drag-handle="1"] label.card-check input,
.ch[data-drag-handle="1"] label.card-check{cursor:pointer}
/* ドロップ位置インジケーター */
.card-drop-indicator{
  background:var(--btx);
  border-radius:var(--rl);
  min-height:140px;
  min-width:0;
  box-shadow:0 0 0 2px var(--bbd) inset, 0 4px 12px rgba(12,68,124,.15);
  background:linear-gradient(180deg, var(--bbg) 0%, #D8E9F9 100%);
  border:2px dashed var(--btx);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--btx);font-weight:600;
  animation:dropPulse 1.2s ease-in-out infinite;
}
.card-drop-indicator::before{
  content:"ここにドロップ";
}
@keyframes dropPulse{
  0%,100%{opacity:.85}
  50%{opacity:.55}
}
body.readonly .card{cursor:default !important}
body.readonly .card[draggable]{pointer-events:auto}

/* === カード追加・削除ボタン === */
.card-add-btn{background:var(--sur);border:0.5px dashed var(--bd2);border-radius:var(--rl);padding:14px;min-height:150px;cursor:pointer;color:var(--tx3);font-family:var(--fn);font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
.card-add-btn:hover{background:var(--bbg);border-color:var(--bbd);color:var(--btx)}
.card-del{background:none;border:none;cursor:pointer;color:var(--tx3);padding:3px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;transition:all .15s}
.card-del:hover{background:rgba(220,53,69,.1);color:var(--rtx)}
.card-del i{font-size:14px}
/* PDF出力対象選択チェックボックス */
.card-check{margin-left:auto;display:flex;align-items:center;justify-content:center;gap:4px;padding:3px 6px;cursor:pointer;border-radius:var(--r);transition:background .15s}
.card-check:hover{background:var(--sur2)}
.card-check-lbl{font-size:9px;color:var(--tx3);font-weight:600;letter-spacing:0.05em;user-select:none}
.card-check input[type="checkbox"]{width:15px;height:15px;cursor:pointer;accent-color:var(--btx);margin:0}
.card-check input[type="checkbox"]:checked + *,
.card-check:has(input:checked) .card-check-lbl{color:var(--btx)}
body.readonly .card-check{display:none !important}
body.readonly .card-del,body.readonly .card-add-btn{display:none !important}

/* サジェスト入力欄もフォーカス時は青枠 */
.sw:has(.sw-in:focus){outline:2px solid #378ADD;outline-offset:-1px;background:#E8F2FF;border-radius:4px;box-shadow:0 0 0 4px rgba(55,138,221,.15)}

/* フォーカス中の入力欄のラベルを強調 */
.if:has(.nyuka-in:focus) .il,
.if:has(.sw:has(.sw-in:focus)) .il{color:#378ADD;font-weight:600}
.if:has(.nyuka-in:focus),
.if:has(.sw:has(.sw-in:focus)){background:rgba(55,138,221,.04);border-radius:4px}

/* === 空状態ガイド === */
.empty-guide{display:flex;align-items:center;justify-content:center;padding:60px 20px;grid-column:1 / -1;position:relative}
.empty-guide-inner{text-align:center;max-width:520px;position:relative}
.empty-guide-icon{width:72px;height:72px;border-radius:50%;background:var(--bbg);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--btx)}
.empty-guide-icon i{font-size:32px}
.empty-guide-title{font-size:16px;font-weight:600;color:var(--tx);margin-bottom:8px}
.empty-guide-msg{font-size:12px;color:var(--tx3);line-height:1.8}
.empty-arrow{position:absolute;top:-60px;left:-90px;font-size:48px;color:var(--btx);transform:rotate(-15deg)}
@media (max-width:900px){.empty-arrow{display:none}}
body.readonly .empty-guide{display:none !important}

/* === 等階級×売先 マトリクス表 === */
/* 新C案: マトリクス領域をカード内スクロールにし、ヘッダー＋入荷数行をsticky固定 */
.grade-wrap{border-top:0.5px solid var(--bd);padding:0;overflow-x:auto;overflow-y:auto;max-width:100%;max-height:480px;background:#FAFAF7}
.mx{border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #D8D4CC;display:inline-table;width:auto;margin:14px 16px}
.mx th, .mx td{border:1px solid #E5E1D8;padding:0;vertical-align:middle}

/* sticky: 等階級ヘッダー行と入荷数行を grade-wrap 内の上部に固定 */
.mx thead th{position:sticky;top:0;z-index:20;background:#F4F1EB;box-shadow:inset 0 -1px 0 #C8C6BF}
.mx-nyuka td{position:sticky;top:32px;z-index:18;box-shadow:inset 0 -1px 0 #C8C6BF}

.mx-rowlabel{font-size:11px;color:var(--tx2);font-weight:600;text-align:center;white-space:nowrap;padding:6px 10px;vertical-align:middle;min-width:64px;background:#F4F1EB}
/* 等階級ヘッダー（編集可・ホバーで×） */
.mx-gh{position:relative;padding:0;min-width:74px}
.ghead{width:100%;border:none;border-radius:0;padding:7px 6px;font-size:12px;font-weight:700;text-align:center;font-family:var(--fn);color:var(--tx);background:transparent}
.ghead::placeholder{color:var(--tx3);opacity:.5;font-weight:400}
.ghead:focus{outline:2px solid #378ADD;outline-offset:-2px;background:#E8F2FF;box-shadow:none}
.gcol-del{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:var(--rtx,#DC3545);color:#fff;border:1.5px solid var(--sur);cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;z-index:5}
.gcol-del i{font-size:11px}
.mx-gh:hover .gcol-del{display:flex}
/* 数量セル（入荷数・分荷数 共通） */
.mcell{padding:0;background:#fff;min-width:74px}
.gnum{width:100%;border:none;border-radius:0;padding:7px 6px;font-size:13px;text-align:right;font-family:var(--fn);color:var(--tx);background:transparent}
.gnum:focus{outline:2px solid #378ADD;outline-offset:-2px;background:#E8F2FF;box-shadow:none}
.gnum:hover:not(:focus){background:#FFFCF3}
/* 等階級ヘッダー行と入荷数行は薄黄色 */
.mx-gh{background:#FFFBED}
.mx-nyuka .mcell{background:#FFFBED}
.mx-nyuka .gnum{font-weight:700;color:#7A5C00}
.mx-nyuka .gnum:hover:not(:focus){background:#FFF7D6}
/* 備考列ヘッダー・セル（一番右） */
.mx-memo-h{font-size:11px;color:var(--tx2);font-weight:600;text-align:center;min-width:100px;background:#F4F1EB;padding:6px}
.mx-memo-c{padding:0;text-align:center;background:#fff;min-width:100px}
.bmemo, .zaiko-memo{width:100%;border:none;border-radius:0;padding:7px 6px;font-size:11px;font-family:var(--fn);color:var(--tx);background:transparent}
.bmemo:focus, .zaiko-memo:focus{outline:2px solid #378ADD;outline-offset:-2px;background:#E8F2FF;box-shadow:none}
.bmemo::placeholder, .zaiko-memo::placeholder{color:var(--tx3);opacity:.5}
.bmemo:hover:not(:focus), .zaiko-memo:hover:not(:focus){background:#FFFCF3}
.mx-nyuka .mx-memo-c, .mx-zaiko .mx-memo-c{background:#F4F1EB}
/* 売先（買人）セル + 右上× */
.mx-buyer{position:relative;padding:0;min-width:130px;background:#fff}
.bsw{position:relative}
.bsw .b-in{width:100%;border:none;border-radius:0;padding:7px 8px;font-size:12px;background:transparent;color:var(--tx);font-family:var(--fn)}
.bsw .b-in:focus{outline:2px solid #378ADD;outline-offset:-2px;background:#E8F2FF;box-shadow:none}
.bsw .b-in:hover:not(:focus){background:#FFFCF3}
.bsw .b-in::placeholder{color:var(--tx3);opacity:.6}
.brow-del{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:var(--rtx,#DC3545);color:#fff;border:1.5px solid var(--sur);cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;z-index:5}
.brow-del i{font-size:11px}
.mx-buyer:hover .brow-del{display:flex}
body.readonly .gcol-del,body.readonly .brow-del{display:none !important}

/* 品目行の保存ボタン */
.btn-save-item{display:inline-flex;align-items:center;gap:5px;background:var(--btx);color:#fff;border:none;border-radius:var(--r);padding:7px 18px;font-size:12px;font-weight:600;font-family:var(--fn);cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-save-item:hover{opacity:.88}
.btn-save-item.saved{background:#1F9D55}
body.readonly .btn-save-item{display:none !important}

/* 品目削除ボタン */
.btn-del-item{color:var(--rtx,#DC3545)}
.btn-del-item:hover{background:#FDEDED;border-color:#F5C2C7}
body.readonly .btn-del-item{display:none !important}

/* 合計列（計） */
.mx-total-h{font-size:11px;color:var(--tx2);font-weight:700;text-align:center;min-width:56px;background:#F4F1EB;padding:6px}
.mx-total-c{text-align:right;padding:7px 8px;background:#F8F6F0;min-width:56px;line-height:1.4}
.mx-total-c span{display:inline;font-size:13px;font-weight:700;color:var(--tx)}
.brow-total{color:var(--tx)}
.nyuka-total{color:#7A5C00}
.zaiko-total{color:var(--btx,#2C7A4B)}
/* 在庫数行 */
.mx-zaiko .mx-rowlabel{color:var(--btx,#2C7A4B);font-weight:700;background:#EAF5EF}
.mx-zaiko-c{text-align:right;padding:7px 8px;background:#EAF5EF;min-width:74px;font-size:13px;font-weight:700;color:var(--btx,#2C7A4B);line-height:1.4}
.mx-zaiko-c span{display:inline;background:transparent;font-weight:inherit;color:inherit}
.zaiko-cell.minus{color:#DC3545}
.mx-zaiko .mx-total-c{background:#EAF5EF;padding:7px 8px;line-height:1.4}

/* カードステータスバッジ */
.bg-doing{background:#E3F2FD;color:#1565C0}
.bg-done{background:#E8F5E9;color:#2E7D32}

/* パターンC: 在庫カード（前日繰越） */
.card.card-zaiko{border-color:#A8C9B5;background:#F4FAF6}
.card.card-zaiko .ch{background:#EAF5EF}

/* カード型フィルタ（全て/入荷/在庫） */
.cf-btn{font-size:12px;font-weight:600;padding:4px 10px}
.vt-sep{width:1px;height:16px;background:var(--bd2);margin:0 2px;display:inline-block}
#op-cnt.cf-nyuka .card.card-zaiko{display:none}
#op-cnt.cf-zaiko .card:not(.card-zaiko){display:none}
#op-cnt.cf-zaiko .card-add-btn{display:none}
.card-filter{display:inline-flex;align-items:center;gap:2px}
.footer-sep{width:1px;height:18px;background:var(--bd2);margin:0 10px;display:inline-block;align-self:center}

/* [入荷をコピー] バー */
#nyuka-copy-bar{grid-column:1 / -1;display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px 12px;border:1px dashed var(--bd2);border-radius:var(--r);background:transparent}
.ncb-label{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--tx2)}
.ncb-date{font-family:var(--fn);font-size:12px;padding:4px 8px;border:0.5px solid var(--bd2);border-radius:var(--r);color:var(--btx)}
.ncb-btn{display:inline-flex;align-items:center;gap:5px;font-family:var(--fn);font-size:12px;font-weight:600;padding:5px 12px;border:0.5px solid var(--bbd);border-radius:var(--r);background:var(--bbg);color:var(--btx);cursor:pointer}
.ncb-btn:hover{filter:brightness(0.97)}

/* C-3b: 初回 DB 取得中のローディング表示 */
.op-loading{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:8px;padding:32px 16px;color:var(--tx2);font-size:13px}
.op-loading .ti{font-size:18px;animation:op-loading-spin 0.8s linear infinite}
@keyframes op-loading-spin{to{transform:rotate(360deg)}}

/* C-4 4b: 小分け列ヘッダーに小分け元（親）の等階級名を表示 */
.kobun-parent{display:block;font-size:9px;font-weight:600;color:#1565C0;line-height:1.2;margin-bottom:1px;min-height:11px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* C-4 4b(マトリクス): 小分け列ヘッダーに小分け元（親）の等階級名を表示 */
.mxt-kobun-parent{display:block;font-size:9px;font-weight:600;color:#1565C0;line-height:1.2;margin-bottom:1px}

/* === 編集できる欄の“記入感”：当日モードのみ。過去日/読取専用は対象外。
      下線はinset box-shadowでレイアウトを動かさない。:focus時は既存の青ハイライトに譲る === */
body:not(.readonly) .nyuka-in:not([readonly]):not([disabled]):not(:focus),
body:not(.readonly) .ch-saledate:not([readonly]):not([disabled]):not(:focus),
body:not(.readonly) .mxt-qty-in:not([readonly]):not([disabled]):not(:focus),
body:not(.readonly) .mxt-buyer-in:not([readonly]):not([disabled]):not(:focus),
body:not(.readonly) .mxt-memo-in:not([readonly]):not([disabled]):not(:focus),
body:not(.readonly) .grade-sub:not([readonly]):not([disabled]):not(:focus){
  background:#FFFDF7;
  box-shadow: inset 0 -1px 0 #EBE0C4;
  border-radius:4px;
}
body:not(.readonly) .nyuka-in:not([readonly]):not([disabled]):hover:not(:focus),
body:not(.readonly) .ch-saledate:not([readonly]):not([disabled]):hover:not(:focus),
body:not(.readonly) .mxt-qty-in:not([readonly]):not([disabled]):hover:not(:focus),
body:not(.readonly) .mxt-buyer-in:not([readonly]):not([disabled]):hover:not(:focus),
body:not(.readonly) .mxt-memo-in:not([readonly]):not([disabled]):hover:not(:focus),
body:not(.readonly) .grade-sub:not([readonly]):not([disabled]):hover:not(:focus){
  background:#FFFBEC;
  box-shadow: inset 0 -1px 0 #E2D2A2;
}