/* 文字は大きめに保つこと。
   tkinter版で「文字が小さい」との指摘を受けて全体を拡大した経緯がある（2026-07-17）。
   小さくしないこと。 */

:root {
  --fs: 15px;
  --border: #b9c2cc;
  --bg-head: #eef2f6;
  /* サイドバーの幅。**発注書の枠（.orderfile-panel）もこの値の右隣から始まる**ので、
     たたむときは1か所（body.nav-closed）で両方が動くようにしている。 */
  --nav-w: 190px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Meiryo", "Yu Gothic UI", system-ui, sans-serif;
  font-size: var(--fs);
  color: #16202b;
  background: #f7f9fb;
}

/* ===== 画面の切り替え（左のサイドバー・2026-08-23）=====
   「発注書伝票登録」と「注文依頼確認一覧」の2つを行き来する。両方の画面で同じものを出す。

   幅は190pxに抑えている。**入力画面の表（最小1080px）を押し出さないため。**
   1366pxのノートでも 1366-190=1176 で、パネルの最大幅1180pxにほぼ収まる。 */

.shell { display: flex; align-items: stretch; min-height: 100vh; }
.shell-main { flex: 1 1 auto; min-width: 0; }

.sidenav {
  width: var(--nav-w); flex: 0 0 var(--nav-w);
  background: #1c334a; color: #fff;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidenav-brand { display: flex; gap: 10px; align-items: center; padding: 12px 14px; }
.sidenav-toggle {
  margin-left: auto; flex: 0 0 auto;
  width: 22px; height: 26px; padding: 0;
  background: transparent; border: 1px solid rgba(255, 255, 255, .35); border-radius: 3px;
  color: #fff; font-size: 13px; line-height: 1;
}
.sidenav-toggle:hover { background: rgba(255, 255, 255, .15); }
.sidenav-brand .who b { display: block; font-size: 15px; line-height: 1.3; }
.sidenav-brand .who small { display: block; font-size: 11px; color: #b9c8d6; }

.sidenav ul {
  list-style: none; margin: 0; padding: 8px 10px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid; gap: 4px;
}
.sidenav a {
  display: block; padding: 9px 11px; border-radius: 5px;
  color: #fff; text-decoration: none; font-size: 14px; line-height: 1.4;
}
.sidenav a small { display: block; font-size: 11px; color: #b9c8d6; }
.sidenav a:hover { background: rgba(255, 255, 255, .1); }
/* いま見ている画面。**押しても何も起きないので、押せそうに見せない** */
.sidenav a[aria-current="page"] { background: #fff; color: #1c334a; font-weight: bold; }
.sidenav a[aria-current="page"] small { color: #5a6673; font-weight: normal; }

/* たたんだ状態（2026-08-26 経理依頼）。**細い帯とボタンだけ残す。**
   幅ごと消すと戻すものが画面から無くなるので、そこまではやらない。 */
body.nav-closed { --nav-w: 30px; }
body.nav-closed .sidenav-brand { padding: 8px 4px; gap: 0; justify-content: center; }
body.nav-closed .sidenav-brand .who,
body.nav-closed .sidenav ul { display: none; }
body.nav-closed .sidenav-toggle { margin-left: 0; }

/* ログイン中の表示（2026-08-27 No.42）。サイドバーのいちばん下に寄せる */
.sidenav-user {
  margin-top: auto; padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sidenav-user .who-role { font-size: 13px; color: #d7e2ec; }
.sidenav-user .logout { color: #b9c8d6; font-size: 12px; }
.sidenav { display: flex; flex-direction: column; }
body.nav-closed .sidenav-user { display: none; }

/* ===== ログイン画面（2026-08-27 No.42）=====
   **営業はスマホから開く。**押すもの・打つものを小さくしない。 */
body.login-page { display: flex; align-items: center; justify-content: center;
                  min-height: 100vh; padding: 16px; }
.login-box {
  width: 100%; max-width: 360px; background: #fff;
  border: 1px solid var(--border); border-radius: 6px; padding: 20px 22px 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.login-box h1 { font-size: 18px; margin: 0 0 16px; }
.login-box label { display: block; margin: 12px 0 4px; font-weight: bold; font-size: 14px; }
.login-box input { width: 100%; padding: 9px 10px; font-size: 16px; }
.login-box button { width: 100%; margin-top: 18px; padding: 11px; font-size: 16px; }
.login-box .banner { margin: 0 0 4px; }

/* 狭い画面では上に回して横並びにする（営業はスマホで見る）。HTMLは同じまま */
@media (max-width: 860px) {
  .shell { display: block; }
  .sidenav { width: auto; flex: none; position: static; height: auto; }
  .sidenav-brand { padding: 10px 12px; }
  .sidenav ul { grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0 10px 10px; border-top: 0; }
  /* スマホでは上の帯なので、たたんでも横幅は詰めずリンクだけ隠す */
  body.nav-closed { --nav-w: auto; }
  body.nav-closed .sidenav-brand { padding: 10px 12px; gap: 10px; justify-content: flex-start; }
  body.nav-closed .sidenav-brand .who { display: inline; }
  body.nav-closed .sidenav-toggle { margin-left: auto; }
}

header {
  display: flex; align-items: baseline; gap: 20px;
  padding: 8px 16px; background: #24405c; color: #fff;
}
header h1 { font-size: 17px; margin: 0; }
.master-info { font-size: 13px; opacity: .95; }
.master-info .warn { color: #ffd45e; font-weight: bold; }

main { padding: 10px 16px 24px; }

.pane-top { max-width: 1180px; }
.pane-bottom { max-width: 1180px; margin-top: 14px; }

fieldset {
  border: 1px solid var(--border); border-radius: 5px;
  margin: 0 0 10px; padding: 8px 12px 12px; background: #fff;
}
legend { font-weight: bold; padding: 0 6px; }

.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.row.center { justify-content: center; margin: 12px 0; }
.row.settings { background: #fff; border: 1px solid var(--border); border-radius: 5px; padding: 8px 12px; }
.row.qty { margin-top: 8px; }

label { white-space: nowrap; }
label.radio { font-weight: normal; }

input[type=text], input[type=number], select, button {
  font-size: var(--fs); font-family: inherit;
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: #fff;
}
input[type=number] { width: 90px; }
#dest-search, #prod-search { width: 420px; }
/* 納品先コードは4〜5桁なので短くてよい（2026-09-03）。名称検索と同じ幅だと、
   すぐ下の検索欄とどちらに打つのか紛らわしい。 */
#dest-code-search { width: 130px; }
input.date { width: 150px; }
input:focus, select:focus { outline: 2px solid #2b7de9; outline-offset: 0; }
input:disabled { background: #eceff2; color: #8a949e; }

/* 出荷日：既定値と違うときはオレンジ、形式エラーは赤（変更の見落とし防止） */
#ship-date.changed { color: #d2691e; font-weight: bold; }
#ship-date.invalid { color: #c00; font-weight: bold; }

.hint { color: #5a6673; font-size: 13px; }

/* 検索候補。既定の2行表示はtkinter版に合わせている。
   **右下をドラッグして縦に広げられる**（2026-08-20 経理依頼）。似た名前が並ぶ取引先を
   探すとき、2行だと候補を見比べられないため。selectそのものはブラウザによって
   resizeが効かないので、包んだdivを伸ばして中のselectを高さいっぱいに追従させている。 */
/* ★既定を5行にした（2026-09-04 経理依頼）。2行だとスクロールしないと見比べられず、
   似た名前が並ぶ取引先を選び間違えるおそれがあった。1行およそ27px。
   min-height は 54px（2行）のまま残してあるので、**狭めたい人は縮められる。** */
.options-wrap {
  margin-top: 6px; height: 135px; min-height: 54px;
  resize: vertical; overflow: hidden;
}
select.options {
  display: block; width: 100%; height: 100%; margin-top: 0;
  font-family: "Consolas", "Meiryo", monospace; font-size: 14px;
}
select.options option { padding: 3px 6px; }

/* 検索欄・候補と、選んだ結果の表とのあいだを空ける（2026-08-20 経理依頼） */
table.grid.dest-detail { margin-top: 12px; }
/* 都道府県とリードタイムは**1列に上下で積む**（2026-09-04 経理依頼）。
   横に2列並べると「リードタイム」の6文字が列の幅を決めてしまい、メモが押し出される。
   `width: 1%` は「中身の幅まで縮める」指定。空いた幅はメモへ回る。 */
table.grid.dest-detail th.lead-head, table.grid.dest-detail td.lead-cell {
  width: 1%; white-space: nowrap; text-align: center; line-height: 1.35;
  padding-left: 8px; padding-right: 8px;
}
/* 見出しは2行になるので少し小さく。値の側は読めるように普通の大きさのまま。
   ★太さは指定しない（2026-09-04 経理依頼）
     `table.grid th` は太さを指定しておらず、この表の他の見出し（コード・名前・
     カナ・メモ）は**ブラウザ既定の太字**。ここだけ `normal` で外していたので揃える。
     幅は動かない。`white-space: nowrap` と `width: 1%` で列は中身の幅まで広がるし、
     Meiryo は全角の字送りが太字でも変わらない（「リードタイム」は 72px のまま）。
     メモが押し出される心配は無い。 */
table.grid.dest-detail th.lead-head { font-size: 12px; }
/* ★色を付けて目立たせる（2026-09-04 経理依頼）。**赤は使わない。**
   同じ表のメモが赤で、配送の注意という別の意味を持っているため。
   この青は「選んだもの」を表す色として画面の他でも使っている（`.selected`）。 */
table.grid.dest-detail td.lead-cell { color: #1149a4; font-weight: bold; }
/* 県が分からない納品先。「―」を目立たせても仕方がないので灰色に落とす */
table.grid.dest-detail td.lead-cell.unknown { color: #7b858f; font-weight: normal; }
/* メモは配送の注意が入って長いので、この表でいちばん広く取る */
table.grid.dest-detail th:nth-child(5),
table.grid.dest-detail td.memo { width: 45%; }
table.grid.prod-detail { margin-top: 12px; }

/* 限定商品・バラ混載不可（2026-08-26 経理依頼）。色は営業確認画面（sales.css）と揃える。
   両方に載っている商品はタグが2つ出る。行の左端の色は限定を優先する。 */
table.grid.prod-detail tr.gentei td:first-child { box-shadow: inset 4px 0 0 #c0392b; }
table.grid.prod-detail tr.bara:not(.gentei) td:first-child { box-shadow: inset 4px 0 0 #6b3fa0; }
table.grid.prod-detail .tag.gentei {
  background: #fdf0ee; color: #c0392b; border: 1px solid #e0b0a8; font-weight: bold;
}
table.grid.prod-detail .tag.bara {
  background: #f4effa; color: #6b3fa0; border: 1px solid #cdbde6; font-weight: bold;
}

.selected { margin-top: 6px; color: #1149a4; font-weight: bold; }
.memo { margin-top: 4px; color: #c00; white-space: pre-wrap; }

.warn-box {
  margin-top: 6px; padding: 6px 10px;
  background: #fff4d6; border: 1px solid #e0b400; border-radius: 4px; color: #6b4b00;
}

/* **その伝票だけ締められなかった**もの（2026-08-27 依頼No.41）。
   警告（黄色）と区別するため赤。1件ずつ 日付・支払区分・納品先 ／ 摘要 の2行で出す。 */
.stop-box {
  margin-top: 6px; padding: 8px 10px;
  background: #fdf0ee; border: 2px solid #c0392b; border-radius: 4px; color: #a3271b;
}
.stop-box .stop-item {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid #eccdc8;
}
.stop-box .stop-item .head { display: block; font-weight: bold; }
.stop-box .stop-item .note {
  display: block; font-family: "Consolas", "Meiryo", monospace; font-size: 13px;
  word-break: break-all;
}

.total { color: #1149a4; font-weight: bold; margin-left: 10px; }

/* 摘要（2026-08-27 依頼No.41）。**発注番号・納品日と同じ行に収める。**
   1日50件を打つ画面なので、行を増やすと明細やキューがそのぶん下へ押し出される。
   余った幅を全部もらい、狭い画面では折り返す（読めなくなるよりはよい）。
   超えたら赤くして登録を止める。 */
#summary-note { flex: 1 1 180px; min-width: 180px; }
#summary-note.over { border-color: #c00; background: #fff5f5; }
.bytes { font-family: "Consolas", "Meiryo", monospace; font-size: 13px; color: #5a6673; }
.bytes.over { color: #c00; font-weight: bold; }

/* 明細確認の摘要（2026-08-27 依頼No.41）。日付の修正欄と同じ見た目に揃える。
   右に、締めたときに実際に販売蔵へ出る文字を出す。 */
.summary-edit { gap: 6px; align-items: center; }
.summary-edit .summary-edit-input {
  flex: 1 1 240px; min-width: 200px; max-width: 520px; padding: 3px 6px;
}
.summary-edit .summary-edit-input:focus { background: #fffbe8; }
.summary-edit .mono {
  font-family: "Consolas", "Meiryo", monospace; font-size: 13px; color: #5a6673;
  white-space: nowrap;
}

button { cursor: pointer; }
button:hover { background: #eef2f6; }
button.primary {
  background: #2b7de9; color: #fff; border-color: #2b7de9;
  font-weight: bold; padding: 8px 26px;
}
button.primary:hover { background: #1c66c7; }

table.grid { width: 100%; border-collapse: collapse; background: #fff; }
table.grid th, table.grid td {
  border: 1px solid var(--border); padding: 5px 8px; text-align: left;
}
table.grid th { background: var(--bg-head); }
table.grid td.num { text-align: right; white-space: nowrap; }
table.grid td.empty { text-align: center; color: #7b858f; }
/* 表の中の注意書き（JAN未登録など）。ヘッダーの .warn は色が違うので表用に別に持つ */
table.grid .warn { color: #c00; font-weight: bold; }

/* 改行をそのまま行として出す（2026-08-27）。摘要のエラーは
   1行目に長さと出荷日、2行目に中身、という形で返している。 */
.banner { min-height: 22px; margin: 6px 0; font-weight: bold; white-space: pre-line; }
.banner.ok { color: #0a7a32; }
.banner.err { color: #c00; }

/* ===== 右下に出すお知らせ（2026-08-27 経理依頼）=====
   エラーのときだけ出す。**打つのに集中していると画面の赤字に気づかない**ため。
   popover で出しているので、明細確認や締めのダイアログより前に出る。
   popover の既定（中央・margin auto）を打ち消して右下へ寄せる。 */
#toast-area {
  position: fixed; inset: auto 16px 16px auto; margin: 0;
  padding: 0; border: 0; background: none; overflow: visible;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  z-index: 100;   /* popover が使えないブラウザ向け */
}
/* 閉じているあいだは畳んでおく。**id指定でブラウザ既定の display:none に勝ってしまう**ため、
   ここで戻す。popover を知らないブラウザではこの行ごと無効になる（＝影響しない）。 */
#toast-area:not(:popover-open) { display: none; }
.toast {
  max-width: 420px; padding: 10px 14px; border-radius: 6px;
  font-weight: bold; line-height: 1.6; cursor: pointer; white-space: pre-line;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  word-break: break-all;
  animation: toast-pop .22s ease-out;
}
.toast.err { background: #fdf0ee; border: 2px solid #c0392b; color: #a3271b; }

/* ぴょこっと出す。**動きは1回だけ**（点滅し続けると入力の邪魔になる） */
@keyframes toast-pop {
  0%   { transform: translateY(14px) scale(.96); opacity: 0; }
  70%  { transform: translateY(-3px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ===== 届いた発注書（2026-08-21）===== */

.recv-toolbar { margin: 0 0 8px; }

/* メール／FAXのタブ（2026-09-01 経理依頼）。
   **押している側だけ濃くする。**タブらしい枠は作らない（ツールバーの中の
   ボタンが3つ並ぶだけ。この一覧は別ウィンドウへも引き出せるので、
   周りの作りに寄りかからない形にしておく）。

   数字は**未処理の残り**。一覧には済も並ぶので行数とは一致しない。
   打ち漏らしを防ぐための数字なので、選んでいないタブでも必ず見えるようにする。 */
.recv-tabs { display: inline-flex; gap: 4px; margin-right: 4px; }
.recv-tab {
  padding: 3px 10px; font-size: 13px; line-height: 1.5;
  border: 1px solid var(--border); background: #fff; color: #3c4855;
  border-radius: 3px; cursor: pointer; white-space: nowrap;
}
.recv-tab:hover { background: #f0f2f5; }
.recv-tab.on { color: #fff; background: #34506e; border-color: #34506e; }
.recv-tab .n { margin-left: 6px; font-weight: bold; color: #1149a4; }
.recv-tab.on .n { color: #fff; }

/* 日送り（2026-09-01 経理依頼）。［前日］は押すたびに1日ずつ遡る。
   ［前日］の数字はその日の未処理。当日だけを出すようにしたぶん、
   **前日に打ち残しがあるかどうかを押す前に見せる。**

   ［今日］は当日以外を見ているあいだ目立たせる。画面を開きっぱなしで日をまたぎ、
   前の日のまま打ち続けるのを防ぐため。**出荷日が既定と違うときと同じ色**にしてある
   （画面の中で「いつもと違う」を表す色を増やさない）。 */
.recv-day {
  padding: 3px 10px; font-size: 13px; line-height: 1.5;
  border: 1px solid var(--border); background: #fff; color: #3c4855;
  border-radius: 3px; cursor: pointer; white-space: nowrap;
}
.recv-day:hover { background: #f0f2f5; }
.recv-day .n { margin-left: 6px; font-weight: bold; color: #1149a4; }
.recv-day.attention {
  color: #d2691e; font-weight: bold; border-color: #d2691e; background: #fff8f1;
}
table.grid.recv { width: auto; min-width: 460px; }
table.grid.recv th.check, table.grid.recv td.check {
  width: 34px; text-align: center; padding-left: 6px; padding-right: 6px;
}
table.grid.recv input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
table.grid.recv td.ts { white-space: nowrap; color: #5a6673; }
/* 片付いたもの（伝票と結んだ／販売蔵入力の印を付けた）。
   **二重に結ぶのを防ぐための目印**。2026-08-28 に販売蔵入力ぶんも同じ扱いにした */
table.grid.recv tr.linked td { background: #f4f7f4; }
/* キャンセルなのにキューに伝票が残っている行（2026-09-11 徳田さん）。
   **行ぜんたいを立たせる。**締まると販売蔵へ流れてしまうので、印だけでは見落とす。
   `tr.linked` のあとに置いて上書きする（キャンセルは済み側に入るため必ず linked が付く）。 */
table.grid.recv tr.cancel-staged td { background: #fdecec; }
table.grid.recv tr.cancel-staged td:first-child { box-shadow: inset 4px 0 0 #b03030; }
.mark.cancel-staged { background: #b03030; color: #fff; }
.linked-mark { color: #0a5c26; font-weight: bold; font-size: 12px; }

/* 人が付ける印（2026-08-28 依頼）。
     販売蔵入力   … 販売蔵へ直に打った発注書
     発注書でない … そもそも発注書でないもの
     キャンセル   … 発注書だったが客先がキャンセルしたもの（2026-09-11）
   紐付けの「済」とは別のことなので**色を分ける。**紐付けと印は両方出す。
   印どうしは同時に立たない（1つを付けると、ほかは落ちる）。

   ボタンは**文字を変えず、付いているあいだ色を変える。**3つ並ぶので、
   どれも「取消」になると、どの印を外すのか分からなくなる。 */
.mark {
  display: inline-block; padding: 0 4px; border-radius: 3px;
  font-weight: bold; font-size: 12px; white-space: nowrap;
}
.mark.direct    { background: #efe7f7; color: #5b3b86; }
.mark.not-order { background: #f7e7e7; color: #8a3b3b; }
.mark.cancel    { background: #ececec; color: #4d4d4d; }

.marks { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
.mark-btn {
  padding: 0 5px; font-size: 11px; line-height: 18px; white-space: nowrap;
  color: #5a6673; background: #fff; border: 1px solid var(--border); border-radius: 3px;
  cursor: pointer;
}
.mark-btn:hover { background: #f0f2f5; }
.mark-btn.on { color: #fff; background: #6b7b8c; border-color: #6b7b8c; }
.mark-btn:disabled { opacity: .5; cursor: default; }
/* ロット割れ（2026-08-21）。登録前のチェックと、キューでの表示 */
/* 明細表の右端に揃える（2026-08-28 依頼）。左端に置くと商品コード列の下に来て、
   明細の一部に見えてしまう。ロット割れは明細ではなく伝票ごとの指定。 */
.lot-break { gap: 4px; margin-bottom: 0; justify-content: flex-end; }
.lot-break .lot-label { color: #5a6673; }
.tag.lot { background: #f7f0dd; color: #85601a; font-weight: bold; }
/* 明細確認でのロット割れ操作。チェックした瞬間に保存される */
.lot-break-edit { gap: 6px; align-items: center; }
.lot-break-edit .lot-label { color: #5a6673; font-weight: bold; }

/* ===== リファックス（2026-09-04）=====
   入力画面の欄はロット割れの下に続けて置き、同じ見た目に揃える。
   1日100件を打つ画面なので、**選ばないときに目に入る量を増やさない。** */
.refax-row { gap: 4px; margin-bottom: 0; justify-content: flex-end;
             flex-wrap: wrap; align-items: center; }
.refax-row .lot-label { color: #5a6673; }
.refax-row .hint { font-size: 11px; }
.refax-row input.yen { width: 80px; text-align: right; }
.refax-row #refax-fax { width: 140px; }
/* 入力待ち（③出荷未定を出して、まだ伝票を入力していない発注書） */
.mark.pending { background: #e7f0f7; color: #1149a4; }
.recv-day.on { color: #fff; background: #1149a4; border-color: #1149a4; }
.recv-day.on .n { color: #fff; }
.mark-btn.refax { color: #1149a4; border-color: #b9c6d8; }
/* リファックス済（2026-09-10）。**二度出しを防ぐためだけの印。**
   「未」の印は作らない（①を出すべき発注書の規則がツールに無い） */
.mark.refax-done { background: #e7f2ea; color: #1f6b3a; }
/* 登録後の小画面の運賃額（②。2026/10/1 にこの行ごと外す） */
.refax-form input.yen { width: 80px; text-align: right; }
/* 運賃額の缶・瓶（2026-09-10）。器の字と欄をくっつけて、2つの欄が別ものだと分かるようにする */
.unchin-one { display: inline-flex; align-items: center; gap: 3px;
              color: #5a6673; margin-right: 6px; }

/* 出来上がった紙の画面。プレビューはそのまま印刷できる実物（PDF） */
.refax-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
              margin-bottom: 8px; }
.refax-head b { font-size: 14px; }
.refax-head .hint { color: #5a6673; }
.refax-preview { width: 100%; height: 60vh; border: 1px solid var(--border);
                 background: #f4f5f7; }
.refax-form { padding: 4px 2px; }
.refax-rotate { gap: 6px; align-items: center; margin-top: 6px; }
.refax-rotate .lot-label { color: #5a6673; }
.refax-pages { gap: 6px; align-items: center; }
/* ④着日ズレ（2026-09-30）。着日ごとに1行、刷る商品にチェックする */
.zure-lines { margin: 6px 0 10px; }
.zure-day { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 4px 0; }
.zure-day label.other { color: #7b858f; }

/* 日付の修正（2026-08-22 依頼No.26）。数量欄と同じ見た目に揃える */
.date-edit { gap: 6px; align-items: center; }
.date-edit .lead-info { margin-left: 8px; font-weight: bold; }
input.date-edit-input {
  width: 108px; text-align: center; padding: 3px 6px;
  font-family: "Consolas", "Meiryo", monospace;
}
input.date-edit-input.small { width: 96px; font-size: 13px; }
input.date-edit-input:focus { background: #fffbe8; }
/* 影響の重さを1行で伝える帯。warn-box より薄く */
.warn-box.slim { margin: 6px 0 10px; padding: 7px 10px; font-size: 12.5px; line-height: 1.7; }
.tag {
  font-size: 11px; padding: 1px 5px; border-radius: 3px;
  background: var(--bg-head); color: #5a6673; margin-left: 4px;
}

/* 営業ステータス（2026-08-27 依頼No.32〜34）。キューと締め画面で同じ色を使う。
   **締められないステータスは無い。**キャンセルだけ締め画面で別の行になる。 */
td.queue-status select.sales-status {
  padding: 3px 6px; font-size: 13px; font-weight: bold;
  border: 1px solid var(--border); border-radius: 4px; background: #fff;
}
td.queue-status select.status-todo    { color: #5a6673; }
td.queue-status select.status-waiting { color: #6b4b00; background: #fff4d6; }
td.queue-status select.status-add     { color: #b06a1e; background: #fdf3e8; }
td.queue-status select.status-cancel  { color: #c0392b; background: #fdf0ee; }
td.queue-status select.status-done    { color: #0a7a32; background: #edf7f0; }

.tag.status { font-weight: bold; }
.tag.status.status-todo    { background: var(--bg-head); color: #5a6673; }
.tag.status.status-waiting { background: #fff4d6; color: #6b4b00; }
.tag.status.status-add     { background: #fdf3e8; color: #b06a1e; }
.tag.status.status-cancel  { background: #fdf0ee; color: #c0392b; }
.tag.status.status-done    { background: #edf7f0; color: #0a7a32; }

/* ===== 本日のキュー ===== */

.queue-toolbar { margin: 0 0 8px; }
table.grid tr.clickable { cursor: pointer; }
table.grid tr.clickable:hover td { background: #eaf3ff; }

/* ===== 補助画面（全明細一覧・明細確認・商品差し替え） ===== */

dialog.sheet {
  border: 1px solid #7d8894; border-radius: 6px; padding: 0;
  width: 900px; max-width: 96vw; max-height: 90vh;
  box-shadow: 0 8px 34px rgba(0, 0, 0, .3);
}
dialog.sheet.wide { width: 1250px; }
dialog.sheet.narrow { width: 620px; }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .35); }

.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; background: #24405c; color: #fff;
  position: sticky; top: 0;
}
.sheet-head b { font-size: 16px; }
.sheet-head .close { padding: 4px 14px; }

/* リファックスの小画面だけ、見出しの帯をつまんで動かせる（2026-09-14 しおりさん依頼）。
   FAX番号は発注書に刷ってあるので、打つには後ろの発注書を見たい。
   **［閉じる］は押す場所のまま。**つまむ場所と重なるので、矢印に戻しておく。
   `moved` が付いているあいだはブラウザの中央寄せをやめ、app.js が場所を決める。 */
#refax-dialog .sheet-head { cursor: move; user-select: none; }
#refax-dialog .sheet-head .close { cursor: pointer; }
#refax-dialog .sheet-head.dragging { opacity: .85; }
/* ★`right`・`bottom` を外すこと。**ブラウザ既定の `inset: 0` が残ったままだと、
     `top` を決めた瞬間に箱が画面の下まで引き伸ばされる**（高さが成り行きのため）。 */
#refax-dialog.moved {
  position: fixed; margin: 0; right: auto; bottom: auto;
}

#all-lines-area, #group-lines-area, .sheet-body {
  padding: 12px 14px 16px; overflow: auto; max-height: calc(90vh - 46px);
}

.dialog-note { color: #3c4855; font-size: 13px; line-height: 1.6; margin-bottom: 8px; }
.dialog-note .sub { color: #6b7785; }
.dialog-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dialog-toolbar .count { color: #5a6673; font-size: 13px; }

/* 列数が多いので横スクロールできるようにする。
   tkinter版では列幅を指定せず数量列が画面外に隠れる不具合があった（2026-07-22）。 */
.table-scroll { overflow-x: auto; }
table.grid.lines { min-width: 1080px; }
table.grid.lines th { white-space: nowrap; }
table.grid.lines td.ts { white-space: nowrap; color: #5a6673; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #dde6ef; }
th.sortable .arrow { margin-left: 4px; color: #2b7de9; }

.prod-cell { min-width: 300px; }
.prod-name { font-weight: bold; }
.prod-code { color: #5a6673; font-size: 13px; margin-left: 6px; }
.tag-warn {
  margin-left: 6px; padding: 1px 6px; border-radius: 3px;
  background: #fff4d6; border: 1px solid #e0b400; color: #6b4b00; font-size: 12px;
}

/* 数量の直接編集。表の中に置くので枠は控えめに */
input.qty-edit { width: 84px; text-align: right; padding: 3px 6px; }
input.qty-edit:focus { background: #fffbe8; }
/* ケース／バラは合計より桁数が少ないので狭くする */
input.qty-edit.small { width: 60px; }
input.qty-edit:disabled { background: #f2f2f2; color: #999; }
/* 入数（×12）は数量欄の**すぐ横**に置く。折り返すと縦に落ちて読みにくいため
   （2026-08-21 経理指摘）。列幅・フォント・ブラウザの既定の入力幅で折り返し位置が
   変わるので、セル側で折り返しを止めて位置を環境に依存させない。 */
.iresu { margin-left: 4px; color: #777; font-size: 11px; white-space: nowrap; }

button.link {
  background: none; border: none; padding: 2px 6px;
  color: #1149a4; text-decoration: underline; font-size: 13px;
}
button.link:hover { background: #eef2f6; }
button.link.danger { color: #c00; }

/* 伝票ごとの削除。明細1本の削除より影響が大きいので、
   ツールバーでは右端に離して置き、他のボタンと同じ色にしない。 */
button.danger { color: #c00; border-color: #d9b3b3; }
button.danger:hover { background: #fdf0f0; }
.dialog-toolbar .del-group { margin-left: auto; }

/* ===== 締め（CSV出力） ===== */

#export-area { padding: 12px 14px 16px; overflow: auto; max-height: calc(90vh - 46px); }

.export-message {
  margin-bottom: 10px; padding: 8px 12px; font-weight: bold;
  background: #e6f5ec; border: 1px solid #0a7a32; border-radius: 4px; color: #0a5c26;
}
/* うまくいかなかったときは赤（2026-08-27 経理指摘。**エラーは赤で統一**） */
.export-message.err {
  background: #fdf0ee; border-color: #c0392b; color: #a3271b;
}
/* 片付け忘れの注意（2026-09-11）。失敗ではないので赤にしない。
   届いた発注書の一覧で行を赤くしているのと同じ話なので、**黄色で分ける。** */
.export-message.warn {
  background: #fff7e0; border-color: #c9931f; color: #7a5600; font-weight: normal;
}
.export-message.warn b { color: #7a5600; }
.export-message .sub { display: inline-block; margin-top: 4px; font-size: 13px; line-height: 1.6; }

table.grid.export-summary { width: auto; min-width: 560px; margin-bottom: 10px; }
/* 締める対象のチェック列。見出しの1つが全選択（2026-08-20 経理依頼） */
table.grid.export-summary th.check, table.grid.export-summary td.check {
  width: 34px; text-align: center; padding-left: 6px; padding-right: 6px;
}
table.grid.export-summary input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }

.note-box {
  margin: 10px 0; padding: 8px 12px; line-height: 1.7; font-size: 13px;
  background: #f2f6fa; border: 1px solid #c6d3e0; border-radius: 4px;
}
.note-box code { background: #fff; padding: 1px 5px; border: 1px solid #ccd; border-radius: 3px; }

.export-actions { margin: 14px 0; }
.export-h { font-size: 15px; margin: 18px 0 6px; }
.skipped { display: inline-block; margin-right: 10px; color: #6b4b00; }
.none { color: #9aa4ae; }

a.dl { color: #1149a4; font-weight: bold; }

/* 締めは元に戻せないので、他のボタンと同じ見た目にしない */
button.primary.danger-action { background: #c0392b; border-color: #c0392b; }
button.primary.danger-action:hover { background: #a5301f; }

/* ===== 発注書を画面の中で開く（2026-08-23）=====

   経理は1日50件前後の発注書を見ながら打つ。Dropboxを別で開いて探す手間が
   そのまま1日50回のロスになるので、入力欄の隣に出す。

   貼り付ける形にしたのは、**開くたびに入力欄が下へずれないため。**
   一覧の中で開くと、その下にある納品先や明細の位置が毎回動いてしまう。

   **左に置いている**（2026-08-24 経理依頼）。発注書を見ながら右の欄へ打つので、
   読む先が左・打つ先が右のほうが目の動きが素直になる。
   左のサイドバーは隠さず、その右隣（--nav-w）から始める。サイドバーをたたむと
   この枠も一緒に左へ寄る（2026-08-26）。 */

table.grid.recv button.open-file {
  border: 0; background: none; padding: 0;
  font: inherit; color: #14539c; text-decoration: underline;
  cursor: pointer; text-align: left;
}
table.grid.recv button.open-file:hover { color: #0a3b73; }

/* `<dialog>` の既定（中央寄せ・幅なり・枠つき）を全部打ち消して、右に貼り付ける。
   明細確認の上にも出せるようにするための器なので、見た目はふつうの枠のまま。 */
.orderfile-panel {
  /* サイドバーの右隣に貼り付ける。たたむと一緒に左へ寄る（2026-08-26） */
  position: fixed; inset: 0 auto 0 var(--nav-w); margin: 0; padding: 0;
  width: 46vw; min-width: 380px; max-width: 820px;
  height: 100vh; max-height: 100vh;
  background: #fff; border: 0; border-right: 1px solid var(--border);
  box-shadow: 2px 0 8px rgba(0, 0, 0, .12);
  z-index: 40;
  overflow: hidden;
}
.orderfile-panel[open] { display: flex; flex-direction: column; }
/* モーダルで開いたときも背景を暗くしない。**後ろの明細確認を見えたままにする** */
.orderfile-panel::backdrop { background: transparent; }
/* 枠が乗る分だけ本文を詰める。入力欄が隠れたままにならないようにする */
body.orderfile-open:not(.orderfile-modal) .shell-main { padding-left: 46vw; }

.orderfile-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg-head);
}
.orderfile-head .name {
  flex: 1 1 auto; min-width: 0; font-weight: bold;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orderfile-head .raw { font-size: 13px; color: #14539c; }
.orderfile-head .close {
  flex: 0 0 auto; font-size: 18px; line-height: 1; padding: 2px 10px; cursor: pointer;
}
.orderfile-error { padding: 14px; color: #c00; }

.orderfile-view { flex: 1 1 auto; width: 100%; border: 0; min-height: 0; }
.orderfile-view.scroll { overflow: auto; padding: 8px; }
/* 拡大していないとき（＝100%）の画像。枠の幅に合わせ、元より大きくはしない。
   **JSが動かなくてもこの見え方になる。**拡大したぶんの幅は app.js が直に入れる。 */
.orderfile-view.scroll img { display: block; max-width: 100%; }

/* 拡大した発注書を、つまんで動かす（2026-09-14 しおりさん依頼）。
   枠の下の細いバーだけでは、拡大した発注書を横へ送れなかった。
   **はみ出しているときだけ手のかたちにする**（`can-pan` は app.js が付け外しする）。 */
.orderfile-view.scroll.can-pan { cursor: grab; }
.orderfile-view.scroll.panning { cursor: grabbing; user-select: none; }

/* スクロールバーを太くする（2026-09-14）。**既定の細さでは、拡大して読んでいる
   途中に横へ送るのに掴めない。**縦も同じ太さに揃える。 */
.orderfile-view.scroll { scrollbar-width: auto; scrollbar-color: #aeb9c4 #eef2f6; }
.orderfile-view.scroll::-webkit-scrollbar { width: 14px; height: 14px; }
.orderfile-view.scroll::-webkit-scrollbar-track { background: #eef2f6; }
.orderfile-view.scroll::-webkit-scrollbar-thumb {
  background: #aeb9c4; border: 3px solid #eef2f6; border-radius: 7px;
}
.orderfile-view.scroll::-webkit-scrollbar-thumb:hover { background: #8b96a2; }

/* 拡大縮小のボタン（2026-08-28 依頼。画像は 2026-09-14 に追加）。
   PDFのビューアに近い操作感にする。
   Excelは**文字の大きさを変えるだけ**で、表の作りは崩さない。`transform: scale()` だと
   縮めてもスクロールの範囲が元のまま残り、かえって扱いにくい。
   画像は幅を変える（縦横の比は崩さない）。 */
.file-zoom { flex: 0 0 auto; display: flex; gap: 2px; }
.file-zoom button {
  padding: 1px 7px; font-size: 12px; line-height: 18px;
  color: #5a6673; background: #fff; border: 1px solid var(--border); border-radius: 3px;
  cursor: pointer;
}
.file-zoom button:hover { background: #f0f2f5; }
/* 真ん中はいまの倍率を出す（69%〜185%）。**幅を決めておかないと桁が変わるたびに
   ＋と−が動いて押しにくい。** */
.file-zoom button[data-file-zoom="reset"] { min-width: 46px; }

/* 伝票番号取込のドラッグ＆ドロップ（2026-09-17 しおりさん依頼）。
   **落とせる場所だと分かる大きさにする。**細い線1本だと狙いを外す。
   持ってきているあいだ（.over）は枠と字の色を変える。 */
.dropzone {
  border: 2px dashed #b6c2cd; border-radius: 6px;
  padding: 16px 14px; margin: 6px 0 10px;
  text-align: center; background: #fbfdff; color: #4a5765;
}
.dropzone.over { border-color: #14539c; background: #eaf2fb; color: #14539c; }
.dropzone .dz-lead { margin: 0 0 8px; font-weight: bold; }
.dropzone .dz-or { margin: 0; font-size: 13px; }
/* いま載っているファイル。**名前を出す。**何を送るのかが分からないまま
   「入れる」を押させない（入れるのはDBを書く操作） */
.dropzone .dz-name { margin: 10px 0 0; font-weight: bold; }
.dropzone .dz-name.none { font-weight: normal; }

/* シートのタブ（2026-09-16 しおりさん依頼）。**表の上に置く。**
   Excelと同じ下ではない。下は9/14に太くした横スクロールバーの真下になり、
   押し間違える（枠は狭いので、札とバーが14pxしか離れない）。
   枠の幅（46vw・最小380px）に入りきらない枚数のときは折り返す。 */
.sheet-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 8px 0; border-bottom: 1px solid var(--border); background: var(--bg-head);
}
.sheet-tab {
  max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 10px; font-size: 13px; cursor: pointer;
  background: #f2f5f8; color: #35424f;
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 4px 4px 0 0;
}
.sheet-tab:hover { background: #e7edf3; }
/* いま出ているシート。**下の罫線を消して表と地続きに見せる** */
.sheet-tab.on {
  background: #fff; color: #14539c; font-weight: bold;
  margin-bottom: -1px; padding-bottom: 5px;
}

/* Excelの発注書を表に直したもの。**罫線が無いと桁がずれて読めない**
   文字の大きさは拡大縮小で差し替わる（既定は13px）。 */
table.sheet { border-collapse: collapse; font-size: 13px; }
table.sheet td {
  border: 1px solid #d5dbe1; padding: 2px 6px;
  /* 折り返さない。**発注書は桁がずれると読めない。**
     幅の上限は文字の大きさに追従させる（em）。px のままだと縮めても
     長い文字のセルが同じ幅で居座り、横幅がなかなか減らない。 */
  white-space: nowrap; max-width: 20em; overflow: hidden; text-overflow: ellipsis;
}

/* 発注書だけのタブ（2026-09-11。注文依頼確認一覧のスマホ用・order_file_page.html）。
   枠の中と同じ作りを画面いっぱいに出す */
body.orderfile-page { display: flex; flex-direction: column; height: 100vh; background: #fff; }

@media (max-width: 900px) {
  /* サイドバーが上へ回るので、左端から画面いっぱいに出す */
  .orderfile-panel { inset: 0; width: 100vw; max-width: none; min-width: 0; }
  body.orderfile-open:not(.orderfile-modal) .shell-main { padding-left: 0; }
}

/* 明細確認に出す「結ばれている発注書」（2026-08-24） */
.order-files { flex-wrap: wrap; gap: 8px 14px; }
.order-files .none { color: #7b858f; }
.order-file { display: inline-flex; align-items: center; gap: 6px; }
.order-file button.open-file {
  border: 0; background: none; padding: 0;
  font: inherit; color: #14539c; text-decoration: underline; cursor: pointer;
}
.order-file button.open-file:hover { color: #0a3b73; }

/* 缶・瓶の合計ケース数（2026-08-24 依頼No.25）。
   ロット割れを判断するための材料なので、件数の隣に静かに置く。樽は数えない。 */
.case-sum {
  font-size: 13px; color: #3c4855;
  background: var(--bg-head); border: 1px solid var(--rule, #d7dee4);
  padding: 2px 10px; border-radius: 2px; white-space: nowrap;
}
.case-sum b { color: #16212c; }
.case-sum-row { margin-bottom: 6px; min-height: 22px; }

/* 届いた発注書：10件ぶんの高さに抑えてスクロール（2026-08-24 経理依頼）。
   1日50件前後届くので、全部並べると下の納品先や明細が押し出される。
   **右下をつまむと縦に広げられる**（resize）。件数が多い日はその場で伸ばせる。 */
.recv-scroll {
  max-height: 336px;          /* 見出し＋10行ぶん */
  overflow: auto;
  resize: vertical;
  border: 1px solid var(--border);
  background: #fff;
  width: auto; min-width: 520px; max-width: 100%;
}
.recv-scroll table.grid.recv { border: 0; min-width: 100%; }
/* 見出しを貼り付けて、スクロールしても列が分かるようにする */
.recv-scroll thead th { position: sticky; top: 0; z-index: 1; }

/* 別ウィンドウへ引き出す（2026-08-27）。見出しをつまんで外へ引く。
   つまめることは形（掴む手のかたち）だけで示す。文字での案内は出さない。 */
#recv-grip { cursor: grab; user-select: none; }
#recv-grip:active,
#recv-grip.dragging { cursor: grabbing; opacity: .55; }
.recv-detached { color: #5a6673; padding: 4px 2px; }

/* 引き出した先の窓（`window.open` で開いた空のページに中身を引っ越している）。
   余白を詰めて、窓の高さいっぱいに広げる。
   こちらでは高さを窓に合わせるため、resize と 10件ぶんの上限を外している。

   ファイル名を押したときの発注書も**この窓の中**に出す（2026-08-27 経理依頼）。
   **発注書が左・一覧が右の横並び**（2026-08-27 経理依頼で左右を入れ替え）。
   発注書のほうを少し広く取る（一覧は打つものを選ぶだけで、読むのは発注書のほうなので）。
   HTMLの並びは一覧が先なので、`order` で入れ替えている。 */
body.recv-window {
  margin: 0; padding: 8px; background: #f4f6f8;
  height: 100vh; display: flex; flex-direction: row; gap: 8px;
}
body.recv-window #recv-area { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
body.recv-window #recv-file {
  order: -1;                    /* ← 発注書を左に持ってくる */
  flex: 1.4 1 0; min-width: 0;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); overflow: hidden;
}
/* **`display: flex` のほうが後から効くので、閉じているときの指定を後ろに置く。** */
body.recv-window #recv-file[hidden] { display: none; }

/* 窓が狭いままだと横並びでは両方とも読めないので、そのときだけ上下に戻す。
   全画面ボタンで広げれば横並びに戻る。
   **上下のときは一覧を上に置く**（選んでから見る、の順になるため `order` を戻す）。 */
@media (max-width: 720px) {
  body.recv-window { flex-direction: column; }
  body.recv-window #recv-area { min-width: 0; min-height: 0; }
  body.recv-window #recv-file { order: 0; min-height: 0; }
}

/* 引き出した窓の中でだけ出すもの（全画面ボタン）。入力画面では意味がないので隠す。 */
.win-only { display: none; }
body.recv-window .win-only { display: inline-block; }
body.recv-window .recv-scroll {
  max-height: none; resize: none;
  flex: 1; min-height: 0; min-width: 0;
}
/* 中の表には触らない。`.recv-scroll table.grid.recv { min-width: 100% }`（上）が
   既に 460px の下限を上書きしており、ここで `min-width: 0` を足すと**そちらまで
   打ち消して**、窓を横に広げたときに見出しの帯と「済」の行の色が
   表の幅までしか伸びなくなる。 */

/* マスタ取込の状態（2026-08-25）。ボタンのすぐ隣に出す。
   画面下のバナーに出していたときは、押した人から見えていなかった。 */
.master-status { margin-left: 8px; font-size: 13px; }
.master-status.working { color: #85601a; }
.master-status.ok { color: #0a7a32; }
.master-status.err { color: #c00; font-weight: bold; }
#master-import[disabled] { opacity: .5; cursor: default; }

/* 伝票番号取込（2026-08-25） */
tr.skipped-row td { background: #f6f7f8; color: #6b7785; }
/* 番号待ち（2026-09-29）。**まだ移さないだけで、異常ではない。**赤にしない */
table.grid .waiting { color: #7a5600; font-weight: bold; }
/* 流れの列（2026-09-29）。［中身を見る］→［○件を入れる］→［○件をコピーする］を左から順に */
.slip-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.slip-flow .flow-arrow { color: #7b858f; font-weight: bold; }
.slip-flow button[disabled] { opacity: .45; cursor: default; }
.ok-mark { color: #0a7a32; font-weight: bold; }
td.path { font-size: 12px; color: #5a6673; word-break: break-all; }


/* ===== 運送会社の休み（2026-09-03 経理依頼） ===== */

/* 欠品商品（2026-09-30 経理依頼）。キューの伝票と明細確認の明細に付ける。
   ロット割れ（.tag.lot）・営業ステータスの色と見分けられるよう、紫系にしている */
table.grid tr.stockout td { background: #f3e8fb; }
table.grid tr.stockout.clickable:hover td { background: #e8d6f5; }
.tag.stockout { background: #7b3fa0; color: #fff; }
.stockout-date { display: block; font-size: 11px; color: #7b3fa0; font-weight: bold; }
.stockout-box { margin: 6px 0 10px; padding: 7px 10px; font-size: 12.5px; line-height: 1.7;
                background: #f3e8fb; border: 1px solid #c9a6e0; border-radius: 4px; }

.carrier-add form { align-items: flex-end; }
.carrier-add .row label { align-self: center; }

.tag-closed { background: #c0392b; color: #fff; border-radius: 3px; padding: 1px 7px; font-size: 12px; }
.tag-open   { background: #2e7d32; color: #fff; border-radius: 3px; padding: 1px 7px; font-size: 12px; }

/* 配送カレンダー。**3か月を横に並べる。**入れた休みが効いているか、祝日が
   正しく拾えているかを目で確かめるためのものなので、小さくてよい。 */
.cal-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
table.cal { border-collapse: collapse; font-size: 13px; }
table.cal caption { font-weight: bold; padding: 6px 0; text-align: left; }
table.cal th, table.cal td {
  border: 1px solid var(--border); width: 30px; height: 26px;
  text-align: center; padding: 0; background: #fff;
}
table.cal th { background: #eef2f6; font-weight: normal; }
table.cal th.sun { color: #c0392b; }
table.cal td.blank { background: #f7f8fa; border-color: #eceff2; }
/* 運送会社が休みの日。日曜・祝日・入れた長期休暇がすべてここに入る */
table.cal td.closed { background: #f9dcd8; color: #8e2c20; }
/* **人が入れた日は濃く塗る。**自動の休み（日曜・祝日）と見分けが付かないと、
   押したときにどちらへ動くのか分からない（2026-09-09） */
table.cal td.reg-closed { background: #eda69a; color: #6d1f13; font-weight: bold; }
table.cal td.reg-opened { background: #d3e9d7; color: #1f5c2c; font-weight: bold; }
table.cal td.today { outline: 2px solid #2b7de9; outline-offset: -2px; font-weight: bold; }

/* 日付を押して休みを入れる（2026-09-09 経理依頼）。**マスいっぱいのボタン**にして、
   狙いを外さないようにする。色はマス側で塗るので、ボタンは透かしておく。 */
table.cal td button {
  display: block; width: 100%; height: 100%; min-height: 26px;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; color: inherit; font: inherit; line-height: 26px;
  cursor: pointer;
}
table.cal td button:hover { background: rgba(43, 125, 233, .18); }
table.cal td button:focus-visible { outline: 2px solid #2b7de9; outline-offset: -2px; }

.cal-legend {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  list-style: none; margin: 6px 0 10px; padding: 0;
  font-size: 12px; color: var(--muted);
}
.cal-legend li { display: flex; align-items: center; gap: 6px; }
.cal-legend .sw {
  width: 16px; height: 14px; border: 1px solid var(--border); background: #fff;
}
.cal-legend .sw.auto-closed { background: #f9dcd8; }
.cal-legend .sw.reg-closed { background: #eda69a; }
.cal-legend .sw.reg-opened { background: #d3e9d7; }

/* EDI受信分取込の貼り付け欄（2026-10-01 経理依頼）。Excelからコピーした表をそのまま貼る */
.edi-paste { margin-top: 14px; }
.edi-paste textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 6px 0 8px;
  font-family: var(--mono, monospace); font-size: 12px; white-space: pre; tab-size: 8;
}

/* 本日のキューから営業の対応履歴を開く（2026-10-01）。状況のプルダウンの下に小さく */
td.queue-status .note-link { display: block; margin-top: 2px; font-size: 12px; color: #1f5fae; }

/* 営業が電話で受けた数量変更（2026-10-02 経理依頼）。本日のキューと明細確認で目立たせる。
   欠品（赤系）と見分けるため、オレンジ系にする */
.tag.qty-changed { background: #ff9f1a; color: #fff; border: 1px solid #e08600; font-weight: bold; }
table.grid tr.qty-changed td { background: #fff1dc; }
table.grid tr.qty-changed td:first-child { box-shadow: inset 4px 0 0 #ff9f1a; }