/* ============================================================
   pos-orderboard.css — オーダーボード共通デザイン（正本1本）
   2026-07-31 水谷さん指示「ホールの画面と厨房の画面のデザインが違いすぎる。統一して」

   ここ1本で以下2つの見た目が決まる:
     ① ホール（レジの「オーダー」タブ）= 持っていく人が消し込む画面
     ② 厨房（/kds/）      = 作る人（キッチン/ドリンク）が消し込む画面

   ★どちらも「白ベース・同じカード・同じ文字サイズ」（2026-07-31 水谷さん裁定）。
   ★色はテーマ変数（--surface / --line / --accent …）を使う。テーマは店ごと。
     変数が無い環境でも壊れないよう、全て fallback 付きで書く。
   ★文字サイズは dev-rules §1-0（12px以下禁止・薄い色禁止）準拠。補助情報も 14px を下回らない。
   ★店が選ぶのは「1枚のカードに出す品数(行数)」。横に何列並ぶかは画面幅まかせ
     （2026-07-31 水谷さん指示「商品のメニューの列＝表示する数。カウンターは1、ラーメン屋は2」）。
     行数を小さくするほどカードが小さくなり、盤面に並ぶ枚数が増える。
   ============================================================ */

/* ── 面（レジ側はタブの中、KDS は画面全体） ── */
.order-view{
  flex:1;padding:14px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg,#f5f7fa);
}
/* オーダーボードとして使う面だけ「画面に固定して中でスクロール」にする。
   ★同じ .order-view を席管理ビューも使っているので、この指定を .order-view 本体に書かないこと
     （書くと席管理の中身が切れて見えなくなる）*/
.order-view.ob-fixed{display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* 見出しは左、操作は右にまとめる（space-between だと要素の数だけ間延びして崩れる・2026-07-31）*/
.order-head{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:10px;flex:none;flex-wrap:wrap;row-gap:8px}
.order-head .ob-split{margin-left:auto}
.order-head .order-head-sub{margin-left:8px}
.order-head-title{font-size:16px;font-weight:800;color:var(--text,#0a1020)}
.order-head-title .ohm-note{font-size:14px;font-weight:600;color:var(--text-sub,#4b5563);margin-left:10px}
.order-head-sub{font-size:15px;font-weight:800;color:var(--accent,#2f5282);font-variant-numeric:tabular-nums}

/* 盤面 ＋ 右の一覧モニター */
.order-body{flex:1;display:flex;gap:12px;min-height:0}

/* ── カードの並び（ホールも厨房も同じ格子）──
   ★店（端末）が選ぶのは「1枚のカードに出す品数（行数）」（2026-07-31 水谷さん指示）。
     カウンター=1 / ラーメン屋=2 / 定食=4 / 居酒屋=6〜8。
     行数を減らすとカードが小さくなり、盤面に並ぶ枚数が自然に増える（2ならたくさん入る）。
   ★横に何列並ぶかは指定しない＝画面の幅で自動（カードの最小幅300px）。
   ★あふれた品はカードの中でスクロール＋「↓あとN品」。席名と できた は常に見える。
   ★align-items:start が必須。同じ段の短いカードが引き伸ばされない。
   ★--ob-chrome = その画面でカード以外に使っている高さ（ヘッダー等）。画面ごとに指定する。 */
.order-list{
  flex:1;min-width:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line,#d4dae5) transparent;
  display:grid;gap:12px;align-content:start;align-items:start;
  --ob-chrome:176px;--ob-row:48px;--ob-lines:4;
  --ob-head:45px;--ob-more:26px;--ob-foot:56px;
  /* ★タイル1枚の高さは計算で確定させる（見出し＋品数×行の高さ＋あとN品の帯＋ボタン）。
     段の高さ(grid-auto-rows)も同じ値に固定し、カードは height:100% でぴったり収める。
     ここを「中身なり」にすると、Chromeが段の高さを再計算せずカードがはみ出して
     下の段と重なる（2026-07-31 実機で発生: 段357px・カード517px）。 */
  /* +4px = カードの枠線(上下2px)ぶん。これを足さないと品目欄が4px足りず、
     ちょうど収まる件数でも「あと1品」と出てしまう（2026-07-31 実測で発見）*/
  --ob-tile:calc(var(--ob-head) + var(--ob-lines) * var(--ob-row) + var(--ob-more) + var(--ob-foot) + 4px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  grid-auto-rows:var(--ob-tile);
}
.order-list::-webkit-scrollbar{width:8px}
.order-list::-webkit-scrollbar-track{background:transparent}
.order-list::-webkit-scrollbar-thumb{background:var(--line,#d4dae5);border-radius:4px}
.order-empty{
  grid-column:1/-1;text-align:center;color:var(--text-sub,#4b5563);
  padding:56px 20px;font-size:15px;font-weight:600;
}

/* ── 右の一覧モニター（盤面に出ていない注文も含めて席順に全部出す）──
   10卓・15卓になっても「どこがまだか」を1画面で握るための欄。開閉できる。 */
.order-side{
  width:200px;flex:none;display:flex;flex-direction:column;min-height:0;
  background:var(--surface,#fff);border:1px solid var(--line,#d4dae5);border-radius:10px;overflow:hidden;
}
.order-side[hidden]{display:none}
.os-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;flex:none;
  background:var(--accent-soft,#e5edf7);border-bottom:1px solid var(--line-soft,#e4e8f0);
  font-size:15px;font-weight:800;color:var(--accent,#2f5282);
}
.os-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.os-row{
  display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;
  border-bottom:1px solid var(--line-soft,#e4e8f0);-webkit-tap-highlight-color:transparent;
}
.os-row:active{background:var(--accent-soft,#e5edf7)}
.os-tbl{font-size:16px;font-weight:800;color:var(--text,#0a1020);min-width:36px}
.os-qty{font-size:14px;font-weight:700;color:var(--text-sub,#4b5563);white-space:nowrap}
.os-ela{margin-left:auto;font-size:14px;font-weight:800;color:var(--text-sub,#4b5563);font-variant-numeric:tabular-nums;white-space:nowrap}
.os-row.late1 .os-ela{color:var(--warn,#c2410c)}
.os-row.late2 .os-ela{color:var(--err,#b91c1c)}
.os-empty{padding:20px 12px;text-align:center;font-size:14px;font-weight:600;color:var(--text-sub,#4b5563)}
/* 一覧から選んだカードを光らせる */
.order-card.flash{animation:ob-flash 1.4s ease-out}
@keyframes ob-flash{0%,55%{box-shadow:0 0 0 4px var(--accent,#2f5282)}100%{box-shadow:none}}

/* 提供履歴（押し間違いを戻すため・2026-07-31 水谷さん指示）*/
.order-view.ob-fixed{position:relative}
.ob-hist{
  position:absolute;right:14px;top:54px;width:360px;max-height:70%;z-index:30;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface,#fff);border:1px solid var(--line,#d4dae5);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.ob-hist[hidden]{display:none}
.ob-hist-head{
  display:flex;align-items:center;justify-content:space-between;padding:9px 12px;flex:none;
  background:var(--accent-soft,#e5edf7);border-bottom:1px solid var(--line-soft,#e4e8f0);
  font-size:15px;font-weight:800;color:var(--accent,#2f5282);
}
.ob-hist-list{flex:1;overflow-y:auto}
.ob-hist-row{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line-soft,#e4e8f0)}
.ob-hist-t{font-size:14px;font-weight:700;color:var(--text-sub,#4b5563);font-variant-numeric:tabular-nums;flex:none}
.ob-hist-b{font-size:15px;font-weight:800;color:var(--text,#0a1020);flex:none;min-width:44px}
.ob-hist-n{flex:1;font-size:14px;font-weight:600;color:var(--text-sub,#4b5563);line-height:1.3}
.ob-hist-undo{
  flex:none;padding:7px 12px;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;
  background:var(--surface,#fff);border:1px solid var(--err,#b91c1c);border-radius:6px;color:var(--err,#b91c1c);
}
.ob-hist-undo:disabled{border-color:var(--line,#d4dae5);color:var(--text-sub,#4b5563);cursor:default}
.ob-hist-empty{padding:20px 12px;text-align:center;font-size:14px;font-weight:600;color:var(--text-sub,#4b5563)}
/* 「1枚に出す品数」の切替（ヘッダーの幅を食わないようプルダウン・2026-07-31 水谷さん指示）*/
.ob-split{display:flex;align-items:center;gap:6px;flex:none}
.ob-split .lb{font-size:14px;font-weight:700;color:var(--text-sub,#4b5563)}
.ob-split select, .ob-sidebtn{
  padding:7px 10px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;
  background:var(--bg,#f5f7fa);border:1px solid var(--line,#d4dae5);border-radius:6px;color:var(--text-sub,#4b5563);
  -webkit-tap-highlight-color:transparent;
}
.ob-split select{padding-right:6px}
.ob-sidebtn.on{background:var(--accent,#2f5282);border-color:var(--accent,#2f5282);color:#fff}

/* ── 1カード＝1回の注文（席の1ラウンド / カウンター1件）── */
.order-card{
  /* ★枠は常に2px。太さを状態で変えたり、影で足したりしない（線が二重・不揃いに見える原因）*/
  background:var(--surface,#fff);border:2px solid var(--line,#d4dae5);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column;
  height:100%;min-height:0;   /* 枠（--ob-tile）にぴったり。どの注文も同じ大きさ＝枠の統一 */
}
/* 入りきらない品があるカードの合図（描画後にJSが入れる）。
   ★席名と「できた／全部提供した」は必ず画面に残す＝押せないボタンを作らない、が最優先。
     入りきらない品はカードの中でスクロールし、何品隠れているかをここに出す。 */
.order-more{
  flex:none;height:var(--ob-more,26px);display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:var(--warn,#c2410c);
  background:color-mix(in srgb, var(--warn,#c2410c) 12%, var(--surface,#fff) 88%);
  border-top:1px solid var(--line-soft,#e4e8f0);
}
/* 隠れている品が無いカードでも場所だけ取る＝どのカードも同じ高さになる（枠の統一）*/
.order-more.none{visibility:hidden}
/* 「↓あとN品」を押すとカードが伸びて全部出る（2026-07-31 水谷さん指示・もう一度押すと戻る）*/
.order-more{cursor:pointer}
.order-more:active{filter:brightness(.95)}
.order-card.expanded{height:100%}
.order-card.expanded .order-items{overflow-y:auto}
/* 遅れの合図: 8分で橙・15分で赤（ホール・厨房で同じ基準）
   ★変えるのは枠の「色」だけ。太さを足したり影を重ねたりしない
     （2026-07-31 水谷さん指摘「枠が汚い・線の太さと細さが」→ 二重線の除去）*/
.order-card.late1{border-color:var(--warn,#c2410c)}
.order-card.late2{border-color:var(--err,#b91c1c)}

.order-card-head{
  display:flex;align-items:center;gap:9px;padding:9px 12px;
  height:var(--ob-head,45px);flex:none;box-sizing:border-box;
  background:var(--accent-soft,#e5edf7);border-bottom:1px solid var(--line-soft,#e4e8f0);
}
.order-card-table{font-size:18px;font-weight:800;color:var(--accent,#2f5282);line-height:1.2}
.order-card-time{font-size:14px;color:var(--text-sub,#4b5563);font-weight:600;font-variant-numeric:tabular-nums}
.order-card-elapsed{margin-left:auto;font-size:14px;font-weight:800;color:var(--text-sub,#4b5563);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 品数（中でスクロールして下が隠れていても「何品あるか」が分かる）*/
.order-card-count{
  font-size:14px;font-weight:800;color:var(--text-sub,#4b5563);white-space:nowrap;
  background:var(--surface,#fff);border:1px solid var(--line,#d4dae5);border-radius:100px;padding:2px 9px;
}
.order-card.late1 .order-card-elapsed{color:var(--warn,#c2410c)}
.order-card.late2 .order-card-elapsed{color:var(--err,#b91c1c)}

/* ── 品目欄（選んだ品数ぶんの高さで固定）──
   ★1品しかない注文でも枠の大きさは同じ（2026-07-31 水谷さん指示「枠は統一しないとダメ」）。
     .order-scroll の高さ＝ 選んだ品数 × --ob-row。JSが描画のたびに入れる。
   ★品数が多いカードはこの中だけがスクロールする（ヘッダーとボタンは常に画面に残る）*/
.order-scroll{position:relative;flex:1;min-height:0;overflow:hidden}
/* ★カード内のスクロールバーは出さない。枠のすぐ内側に灰色の縦線が並ぶと「線が汚い」原因になる。
   隠れている品は「↓あとN品」の帯で分かるので、バー無しでも迷わない（指では普通にスクロールできる）*/
.order-items{scrollbar-width:none;-ms-overflow-style:none}
.order-items::-webkit-scrollbar{width:0;height:0;display:none}
.order-items{display:flex;flex-direction:column;height:100%;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.order-item{
  display:flex;align-items:center;gap:10px;padding:0 12px;
  height:var(--ob-row,48px);flex:none;   /* ★1行の高さは固定（品名が2行でも変わらない）*/
  border-bottom:1px solid var(--line-soft,#e4e8f0);cursor:pointer;box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;transition:background .1s;
}
.order-item:last-child{border-bottom:none}
.order-item:active{background:var(--accent-soft,#e5edf7)}
/* 長い品名は2行まで（1行の高さが決まっているので、はみ出さずに収める）*/
.order-item-name{
  flex:1;font-size:15px;font-weight:700;color:var(--text,#0a1020);line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.order-item-qty{font-size:16px;font-weight:800;color:var(--accent,#2f5282);white-space:nowrap;font-variant-numeric:tabular-nums}
/* ★数量の見た目は個数に関わらず同じ（×1 と ×2 で扱いを変えない・2026-07-31 水谷さん指示）*/
/* ★チェック枠は最初は「空」。タップして初めて✓が入る（2026-07-31 水谷さん指示）
   最初から✓を描いていると「もうチェック済み」に見えてしまう */
.order-item-check{
  width:32px;height:32px;flex-shrink:0;border:2px solid var(--line,#d4dae5);border-radius:7px;
  display:flex;align-items:center;justify-content:center;color:#fff;background:var(--surface,#fff);
}
.order-item-check svg{width:19px;height:19px}
.order-item:active .order-item-check{border-color:var(--ok,#16a34a)}
/* ★タップは「選ぶ」だけ。確定は下のボタン（2026-07-31 水谷さん指示=ポンと押して消えるのは危ない）
   選んだ行は緑、数量が複数の品はチェック枠に「選んだ個数」が出る */
.order-item.sel{background:color-mix(in srgb, var(--ok,#16a34a) 10%, var(--surface,#fff) 90%)}
.order-item-check.on{background:var(--ok,#16a34a);border-color:var(--ok,#16a34a);color:#fff}
.order-item-check .n{font-size:17px;font-weight:800;line-height:1}

/* 消し込み済みを画面に残す場合（厨房の個別消し込み）*/
.order-item.served{opacity:.4}
.order-item.served .order-item-name{text-decoration:line-through}
/* ★キッチンが「できた」を押した品（＝これから運ぶ品）。ホール画面で目立たせる
   2026-07-31 水谷さん指示「キッチンができたら色/点滅。放置される可能性があるから」*/
.order-item.ready{background:color-mix(in srgb, var(--ok,#16a34a) 14%, var(--surface,#fff) 86%)}
/* できあがりの合図は「緑の枠に数字」だけ（文言は入れない・2026-07-31 水谷さん指示）*/
.ob-ready-tag{
  min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;color:#fff;background:var(--ok,#16a34a);
  border-radius:7px;padding:0 8px;white-space:nowrap;flex:none;font-variant-numeric:tabular-nums;
}
.order-card.ready{border-color:var(--ok,#16a34a)}
/* 点滅は端末ごとに ON/OFF（.order-list.blink が付いている時だけ光る）*/
.order-list.blink .order-card.ready{animation:ob-ready-blink 1.5s ease-in-out infinite}
@keyframes ob-ready-blink{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}50%{box-shadow:0 0 0 5px rgba(22,163,74,.5)}}
/* タップできない行（カウンター注文の個別消し込みは未対応）*/
.order-item.static{cursor:default}
.order-item.static:active{background:transparent}

/* ── コース（親見出し＋子行）── */
.order-course-head{
  display:flex;align-items:center;gap:9px;padding:9px 12px;
  background:color-mix(in srgb, var(--accent-soft,#e5edf7) 60%, var(--surface,#fff) 40%);
  border-bottom:1px solid var(--line-soft,#e4e8f0);border-left:4px solid var(--accent,#2f5282);
}
.order-course-head-name{flex:1;font-size:16px;font-weight:800;color:var(--accent,#2f5282);line-height:1.3}
.order-course-head-left{font-size:14px;font-weight:700;color:var(--text-sub,#4b5563);white-space:nowrap}
.order-item.course-sub{padding-left:22px;height:auto;min-height:var(--ob-row,48px)}
.order-item.course-sub .order-item-name{font-size:15px}

/* ── まとめて消し込むボタン（ホール=全部提供した / 厨房=できた）── */
.order-card-foot{
  padding:8px 10px;border-top:1px solid var(--line-soft,#e4e8f0);flex:none;
  height:var(--ob-foot,56px);box-sizing:border-box;display:flex;gap:8px;
}
.order-serve-all{
  flex:1;height:100%;padding:0;border:0;border-radius:7px;
  background:var(--ok,#16a34a);color:#fff;font-size:15px;font-weight:800;
  cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;
}
.order-serve-all:active{filter:brightness(.92)}
/* 何も選んでいない時は押せない（誤操作で全部消えるのを防ぐ）*/
.order-serve-all:disabled{background:var(--line,#d4dae5);color:var(--surface,#fff);cursor:default}
/* 「全部」は別ボタン（このカードを丸ごと完了）*/
.order-serve-rest{
  flex:none;width:84px;height:100%;padding:0;border:2px solid var(--ok,#16a34a);border-radius:7px;
  background:var(--surface,#fff);color:var(--ok,#16a34a);font-size:15px;font-weight:800;
  cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;
}
.order-serve-rest:active{background:var(--ok,#16a34a);color:#fff}

/* ── 狭い画面（iPhone・ハンディ）は1列・一覧は畳む ── */
@media (max-width:820px){
  .order-list{grid-template-columns:1fr}
  .ob-split{display:none}
  .order-side{display:none}
  .order-view{padding:10px}
}