.order-toolbar {
    display: grid;
    /* 180px は「下限」であって実寸ではありません。fr 展開の結果、実トラックは
       iPad縦=198px / iPad横=210px / Desktop=249px になります。
       固定4カラムだと iPad縦(768px)で最小幅ぎりぎりに並び、「並び替え」の
       プルダウンが窮屈になって隣とぶつかっていました。 */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #f7faf9;
}

/* 表示するステータスの絞り込み。既定は「注文依頼」だけです。
   .order-toolbar と同じ枠のトーンにそろえています（どちらも「今日の注文を見る」操作なので、
   別物の枠に見えると設定の一部だと誤解されます）。 */
.order-status-filter {
    display: grid;
    gap: 13px;
    margin-bottom: 18px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #f7faf9;
}

.order-status-filter-head {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    justify-content: space-between;
}

.order-status-filter-head strong {
    font-size: 14px;
}

.order-status-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.order-status-filter-actions button {
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    white-space: nowrap;
}

.order-status-group {
    display: grid;
    gap: 7px;
}

.order-status-group-title {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
}

/* 固定カラム数のブレークポイントは使いません。iPad縦(768px)で枠からはみ出した
   経緯があるため、幅に応じて自然に折り返させます（.order-toolbar と同じ判断）。 */
.order-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* admin.css の label{display:grid} のままだと、チェックとラベルが縦に割れます。
   ★ input の width はここで指定しません。admin.css:7-19 のリセット
     （input[type="checkbox"]{width:16px…}）が正で、上書きすると iPad/iPhone Safari で
     チェックの箱が親幅いっぱいに広がり、ラベルが枠外へ押し出されます。 */
.order-status-chip {
    align-items: center;
    background: #fff;
    border: 1px solid #c2d6cf;
    border-radius: 999px;
    color: #40504c;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
    padding: 7px 13px;
    white-space: nowrap;
}

/* gap で間隔を作るので、UA既定の margin は打ち消します（.category-chip と同じ）。 */
.order-status-chip input {
    margin: 0;
}

.order-status-chip:has(input:checked) {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* 件数は選んでいないバケツにも出します。これが「既定で注文依頼だけを表示しても
   要返金の注文を見落とさない」ための唯一の手がかりなので、薄くしすぎません。 */
.order-status-count {
    margin-left: 3px;
    font-variant-numeric: tabular-nums;
}

/* 上の .order-toolbar は「今日の注文を見る」操作、こちらは「期間をまとめて書き出す」操作です。
   目的が違うので、枠を分けて取り違えを防いでいます。 */
.order-export {
    display: grid;
    /* こちらは p.muted が grid-column:1/-1 で全トラックを占有するため、auto-fit の
       「空トラックを潰す」働きが効きません。入力欄が横に伸びすぎないよう上限を切り、
       左詰めにします（伸びきると CSVダウンロード が終了日の欄に重なって見えます）。 */
    grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
    justify-content: start;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
}

.order-export p.muted {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px;
}

.order-toolbar > *,
.order-export > * {
    min-width: 0;
}

/* ---- iPad（Safari）の表示日の欄（2026-10-08、ユーザー報告：タブレットの横画面で表示日が「並び替え」に重なる） ----
   テーブル割当の .resv-toolbar と同じ対策です（admin-reservations.css）。Safari の date の欄は appearance:auto のままだと
   width を守らず中身の幅で広がり、隣の列へはみ出します。label（admin.css で display:grid）の列も、中の欄の最小幅で
   広がらないよう minmax(0, 1fr) にします。 */
.order-toolbar > label {
    grid-template-columns: minmax(0, 1fr);
}

.order-toolbar input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    display: block;
    line-height: 1.4;
    max-width: 100%;
    min-height: 44px;
    min-width: 0;
}

.order-toolbar input[type="date"]::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
}

/* CSVの出力期間と「注文を追加」の日付・時刻にも、同じ対策を入れます（2026-10-15）。背景は変数なので夜の配色でもそのままです。 */
.order-export input[type="date"],
.staff-order-when input[type="date"],
.staff-order-when input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    background: var(--card);
    display: block;
    line-height: 1.4;
    max-width: 100%;
    min-height: 44px;
    min-width: 0;
}

.order-export input[type="date"]::-webkit-date-and-time-value,
.staff-order-when input[type="date"]::-webkit-date-and-time-value,
.staff-order-when input[type="time"]::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
}

/* 表示日の「前日」「今日」「翌日」（2026-10-14、ユーザー指示。admin.js の setOrderDate() / shiftOrderDate()）。
   予約管理の .resv-day-steps と同じ形です。表示日の欄のすぐ右（狭い画面では下）に並べ、指で押せる高さにします。 */
.order-day-steps {
    display: flex;
    gap: 8px;
}

/* 3つを均等に分けて1行に収めます（2026-10-15）。折り返すと iPad縦で「翌日」だけが2段目に落ちていました。 */
.order-day-steps button {
    flex: 1 1 0;
    min-height: 44px;
    min-width: 0;
    padding: 9px 6px;
    white-space: nowrap;
}

/* 1fr トラックいっぱいに伸ばさず、文字幅のままにします。 */
.order-toolbar > button,
.order-export > button {
    justify-self: start;
    white-space: nowrap;
}

.order-connection {
    border-radius: 999px;
    background: #e4f3ee;
    color: #087563;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.order-connection.error,
.notification-failed {
    background: #fff0f0 !important;
    color: #b83535 !important;
}

.order-card {
    border-left: 7px solid #78909c;
}

.order-card.order-type-onsite_dine_in {
    border-left-color: #6f42c1;
}

.order-card.order-type-scheduled_dine_in {
    border-left-color: #087563;
}

.order-card.order-type-takeout {
    border-left-color: #d97904;
}

.order-card.is-terminal {
    opacity: .62;
    background: #f6f7f7;
}

.order-card-main {
    min-width: 0;
}

.order-card-heading {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
}

.order-number {
    margin-left: auto;
}

.fulfillment-badge,
.payment-badge,
.order-table {
    display: inline-flex;
    align-items: center;
    border-radius: 9px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 900;
}

/* 支払いの印（admin.js の orderPaymentBadge）。区分の印の隣に同じ大きさで並べます。
   店頭払いは代金を受け取る注文なので琥珀色で目立たせ、決済済みは落ち着いた色にします。 */
.payment-badge.is-pay-at-store {
    background: #fff4d6;
    color: #8a5a00;
}

.payment-badge.is-paid {
    background: #e8efec;
    color: #43544f;
}

.fulfillment-badge.onsite_dine_in {
    background: #eee7fb;
    color: #5e35a2;
}

.fulfillment-badge.scheduled_dine_in {
    background: #dff5ec;
    color: #08634f;
}

.fulfillment-badge.takeout {
    background: #fff0db;
    color: #a55400;
}

.order-table {
    background: #5e35a2;
    color: #fff;
    font-size: 15px;
}

.order-time-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.order-time-grid > div {
    display: grid;
    gap: 3px;
    min-width: 150px;
    padding: 9px 11px;
    border-radius: 10px;
    background: #f4f7f6;
}

.order-time-grid span {
    font-size: 11px;
    color: var(--muted);
    font-weight: 800;
}

.order-time-grid strong {
    font-size: 14px;
}

.order-items {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line);
}

.order-items li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--line);
    align-items: center;
}

.order-items li strong {
    font-size: 15px;
}

.order-summary {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 13px;
}

.order-summary > strong {
    margin-left: auto;
}

.order-status {
    border-radius: 999px;
    background: #edf1ef;
    padding: 5px 9px;
    font-size: 12px;
}

.order-status.is-cancelled {
    background: #f6e2e2;
    color: #8a2b2b;
}

.order-status.is-refund-failed {
    background: #f7dcdc;
    color: #7a1f1f;
    font-weight: 600;
}

/* 入金済みなのに渡してはいけない注文（要返金・不正の疑い）。
   決済待ちより強く出します。放置すると返金漏れか、不正利用に商品を渡すことになります。 */
.order-status.is-money-attention {
    background: #7a1f1f;
    color: #fff;
    font-weight: 700;
}

/* 調理が終わって渡し待ちの注文。作業が1段進んだことが分かればよいので、
   上の is-money-attention（渡してはいけない注文）より必ず弱く出します。
   同じ強さにすると、要返金の注文が提供可能の列に埋もれます。 */
.order-status.is-cooked {
    background: #e3eefa;
    color: #24537f;
}

/* 渡し終えた注文。もう手を動かす必要がないので、いちばん静かな色にします。 */
.order-status.is-served {
    background: #eef1f0;
    color: var(--muted);
}

/* 決済結果が届いていない注文。無色のままだと止まっていることに気づけない。 */
.order-status.is-payment-stale {
    background: #fdeee0;
    color: #8a4b12;
    font-weight: 600;
}

.order-alert {
    background: #fdeee0;
    border: 1px solid #f0cfae;
    border-radius: 12px;
    color: #8a4b12;
    font-weight: 700;
    margin-bottom: 12px;
    padding: 12px 14px;
}

/* 入金があり返金・確認が要る注文の警告。決済待ちの橙より強く出します。
   放置すると返金漏れになるか、不正利用に商品を渡すことになります。 */
.order-alert.is-money-attention {
    background: #7a1f1f;
    border-color: #641a1a;
    color: #fff;
}

/* 選んでいなくても、要対応が残っているチップだけは色で分かるようにします。
   他の9個と同じ白いチップの中の (1) は、忙しい時間帯にまず読まれません。 */
.order-status-chip.is-money-attention {
    border-color: #7a1f1f;
    color: #7a1f1f;
}

.order-status-chip.is-money-attention:has(input:checked) {
    background: #7a1f1f;
    border-color: #7a1f1f;
    color: #fff;
}

.order-empty {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 180px;
    border: 2px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
}

@media (max-width: 760px) {
    /* .order-toolbar / .order-export はここで畳みません。
       auto-fit が iPhone 幅で自動的に1列を選びます。 */
    .order-items li {
        grid-template-columns: 1fr auto;
    }

    .order-items li span:last-child {
        grid-column: 1 / -1;
    }

    .order-number,
    .order-summary > strong {
        margin-left: 0;
    }
}

/* オプションは厨房が何を作るかそのものです。商品名の下に別行で出します。 */
.order-item-name {
    display: grid;
    gap: 2px;
}

.order-item-options {
    color: var(--warning);
    font-size: 12px;
    font-weight: 800;
}

/* テーブル名の横に出す、注文した時点のメニュー区分（ランチ／ディナーなど）。通常メニューの注文には出ません。 */
.order-menu-channel {
    background: #fff;
    border-radius: 6px;
    color: #5e35a2;
    font-size: 12px;
    margin-left: 8px;
    padding: 2px 7px;
}

/* ============================================================
   かんばん（2026-09-22、ユーザー指示。admin-order-board.js）
   ============================================================
   列の入れ物・列・ゴースト・落とし先の色は admin-boards.css の .board-columns / .board-column /
   .board-column-head / .board-column-cards / .board-ghost / .is-drop-target / .is-drop-denied を借ります。
   ここに書くのは、注文のカードの形と「その他」の畳み、経過時間の色、詳細のポップアップだけです。 */

.order-board-hint {
    margin: 0 0 10px;
}

/* ---- 田の字（2026-09-28、ユーザー指示） ----
   調理中とお渡しできる品が一目で分かる表示板にします。左上＝注文依頼、右上＝提供可能、
   左下＝提供完了、右下＝その他。「その他」から独立させた列（.is-extra）は、田の字の下に横長の枠で足します。
   列の順は admin-order-board.js の orderBoardColumnKeys() が決め、ここは並べ方だけです。
   ★ admin-boards.css の .board-columns（商品のボードと共有。横スクロールの列）は書き換えず、ここで上書きします。
   高さは画面に合わせます（2段で以前の max(460px, 76vh) とほぼ同じ。固定値で頭打ちにしない）。 */
.order-board .board-columns {
    grid-auto-flow: row;
    grid-auto-rows: max(220px, 28vh);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, max(300px, 38vh));
    height: auto;
    overflow-x: visible;
}

.order-board .board-column.is-extra {
    grid-column: 1 / -1;
}

/* 枠の見出しを大きくし、注文依頼（調理中）は琥珀、提供可能（お渡しできる）は緑で塗り分けます。
   色は既存の配色（.board-count.is-empty・.board-warning と .badge.on）と同じです。 */
.order-board .board-column-head {
    padding: 12px 14px;
}

.order-board .board-column-head h4 {
    font-size: 20px;
}

.order-board .board-column-head .board-count {
    font-size: 14px;
    padding: 4px 11px;
}

.order-board [data-order-column="requested"] {
    border-top: 5px solid #c98a2e;
}

.order-board [data-order-column="requested"] .board-column-head {
    background: #fff3df;
    border-radius: 9px 9px 0 0;
}

.order-board [data-order-column="requested"] .board-column-head h4 {
    color: #7c5316;
}

.order-board [data-order-column="cooked"] {
    border-top: 5px solid var(--brand);
}

.order-board [data-order-column="cooked"] .board-column-head {
    background: #dff5ec;
    border-radius: 9px 9px 0 0;
}

.order-board [data-order-column="cooked"] .board-column-head h4 {
    color: #08634f;
}

/* 枠の中はカードを横にも並べます（入るだけ）。「終了 N件」と「注文はありません」は枠の幅いっぱいです。 */
.order-board-cards,
.order-board-done-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

.order-board-cards > .order-board-done,
.order-board-cards > .board-empty {
    grid-column: 1 / -1;
}

/* 独立させる列のチェックとCSVの持ち出しは、ボードの下です（admin.js の renderOrders()。2026-09-28）。 */
.order-monitor > .order-list + .order-status-filter {
    margin-top: 18px;
}

.order-monitor > :last-child {
    margin-bottom: 0;
}

/* ---- 表示の切替（2026-09-28、ユーザー指示。admin-order-board.js） ----
   表示日の操作欄の最後の行に、「4つの枠／注文依頼と提供可能」の切替などを置きます。
   「全画面で表示」は2026-10-14に帯の「全画面」へ移しました（admin.js の setAppFullscreen()）。
   2026-10-08（ユーザー報告）から左寄せです。右寄せだと1段目（表示日・並び替え…）と左端がそろわず、崩れて見えました。
   選んでいる側は、左メニューの現在地（.tabs button.active）と同じ濃い色の白抜きです。 */
.order-view-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.order-layout-switch {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: inline-flex;
    overflow: hidden;
}

.order-layout-switch button {
    background: transparent;
    border-radius: 0;
    color: var(--muted);
    font-size: 13px;
    padding: 9px 14px;
    white-space: nowrap;
}

.order-layout-switch button + button {
    border-left: 1px solid var(--line);
}

/* スマホでは、切替を全幅にしてボタンを均等に分けます（2026-10-15）。「4つの枠／注文依頼と提供可能」は
   折り返さない作りなので、320px で約9pxはみ出し、ページが横に動いていました。「標準／大／特大」もそろえます。 */
@media (max-width: 560px) {
    .order-layout-switch,
    .order-text-switch { display: flex; width: 100%; }
    .order-layout-switch button,
    .order-text-switch button { flex: 1 1 0; line-height: 1.3; min-width: 0; white-space: normal; }
}

.order-layout-switch button[aria-pressed="true"] {
    background: var(--ink);
    color: #fff;
}

/* 「注文依頼と提供可能」だけのときは、2枠を左右に並べて高さを2段ぶん使います（ほかの枠は描きません）。 */
.order-board.is-layout-two .board-columns {
    grid-template-rows: max(460px, 70vh);
}

/* 一覧のカードは admin.css で 2列グリッド（本文＋右のボタン）です。かんばんでは縦に積みます。 */
.order-board-card {
    cursor: pointer;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    padding: 11px 12px 11px 10px;
    /* iOS のダブルタップ拡大を止め、指での縦スクロールは残します（none にしてはいけない）。 */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.order-board-card:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.order-board-card.is-movable {
    cursor: grab;
}

.order-board-card.is-dragging {
    opacity: .45;
}

/* サーバの応答待ち（進めた直後）。5秒以内に取り直しで置き換わります。 */
.order-board-card.is-pending {
    opacity: .55;
    pointer-events: none;
}

.order-board-card strong {
    font-size: 14px;
}

.order-board-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.order-board-head .board-handle {
    flex: none;
    height: 32px;
    width: 26px;
}

.order-board-head .fulfillment-badge,
.order-board-head .payment-badge {
    font-size: 11px;
    padding: 5px 8px;
}

/* テーブル名・注文番号は、離れた場所からも読めるよう大きめです（田の字の表示板。2026-09-28）。 */
.order-board-head .order-table {
    font-size: 17px;
    padding: 5px 10px;
}

.order-board-head .order-number {
    font-size: 17px;
    margin-left: 0;
}

.order-board-party {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.order-board-when {
    align-items: baseline;
    display: flex;
    gap: 7px;
}

.order-board-when span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.order-board-when strong {
    font-size: 15px;
}

.order-board-items {
    border-top: 1px solid var(--line);
}

.order-board-items li {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 6px 2px;
}

.order-board-items li strong {
    font-size: 14px;
}

.order-board-foot {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: space-between;
}

/* 経過時間。注文依頼・提供可能の列だけ、時間が経つほど強い色になります（admin-order-board.js の定数）。 */
.order-elapsed {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.order-elapsed.is-elapsed-warn {
    color: #9a6412;
}

.order-elapsed.is-elapsed-late {
    color: #b83535;
}

.order-board-actions button {
    border-radius: 8px;
    font-size: 13px;
    padding: 8px 12px;
    width: 100%;
}

/* 「その他」の中の終了した注文。見返すための一覧なので畳んでおきます。 */
.order-board-done {
    border-top: 1px dashed var(--line);
    margin-top: 6px;
    padding-top: 6px;
}

.order-board-done summary {
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    padding: 6px 4px;
}

.order-board-done-cards {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

/* 落とせる列・落とせない列の色は admin-boards.css と同じです。列の入れ物の外側に付けます。 */
.order-board-column.is-drop-target,
.order-board-column.is-drop-denied {
    transition: none;
}

/* 詳細のポップアップ。中身は一覧で使っていたフルカード（orderCard）そのままです。 */
.order-detail-dialog {
    max-width: min(640px, calc(100vw - 32px));
}

.order-detail-dialog-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 16px 20px 0;
}

.order-detail-dialog-head h2 {
    font-size: 17px;
    margin: 0;
}

.order-detail-dialog-head button {
    border-radius: 8px;
    font-size: 13px;
    padding: 7px 12px;
}

.order-detail-body {
    max-height: min(78vh, 720px);
    overflow: auto;
    padding: 12px 20px 20px;
}

.order-detail-body .order-card {
    grid-template-columns: 1fr;
}

@media (max-width: 760px) {
    /* スマートフォンでは田の字にすると1枠が170px前後になり、商品名が読めません。同じ順
       （注文依頼→提供可能→提供完了→その他→独立させた列）で縦1列に積みます。ページ全体は横に伸ばしません。 */
    .order-board .board-columns {
        grid-auto-rows: auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        height: auto;
        scroll-snap-type: none;
    }

    .order-board .board-column {
        max-height: 60vh;
        scroll-snap-align: none;
    }

    .order-board .board-column-head h4 {
        font-size: 18px;
    }

    /* 上の .order-board.is-layout-two の1段指定は詳細度が高いので、縦1列をここで取り返します。 */
    .order-board.is-layout-two .board-columns {
        grid-template-rows: none;
    }

    .order-detail-dialog-head {
        padding: 14px 16px 0;
    }

    .order-detail-body {
        padding: 10px 14px 16px;
    }
}

/* ---- 全画面で表示（2026-09-28、ユーザー指示。2026-10-14 から帯の「全画面」） ----
   iPad で田の字の4枠（または注文依頼と提供可能の2枠）を、ページのスクロールなしで画面に収めます。
   admin.js の renderAppFullscreen() が、全画面かつ注文・予約タブのときだけ body.is-order-display を付けます。
   ・帯（ヘッダー）と左メニューは、全画面の共通の規則（admin.css の「全画面」）が隠します。左メニューは引き出しになるので、ここでは隠しません。
   ・ここで隠すのは 編集中の欄・公開の帯・Square審査の帯・パネルの見出し・操作の説明・
     下のチェック欄とCSV欄・並び替えと順序。値はそのまま保ちます。
   ・★隠さないもの：お知らせ音の帯（#order-sound-bar）・契約の帯（#billing-banner）・ボードの上の警告の帯（.order-alert）。
     厨房のiPadでこそ気づいてほしい知らせです。
   ・高さは #editor → #tab-orders → .order-monitor → #order-list → .order-board → .board-columns と、
     min-height:0 で残りを渡していきます。どこかで min-height:0 が抜けると、枠が中身の高さに伸びてページがスクロールします。
   ・selector は body.is-board-wide を含めます。admin-boards.css の body.has-side-nav.is-board-wide main（左メニューの幅の余白）に勝つためです。 */
@media (min-width: 761px) {
    body.is-order-display .editor-head,
    body.is-order-display #publication-bar,
    body.is-order-display #square-review-banner,
    body.is-order-display .order-monitor > .panel-head > div:first-child,
    body.is-order-display .order-board-hint,
    body.is-order-display .order-monitor > .order-status-filter,
    body.is-order-display .order-monitor > .order-export,
    body.is-order-display .order-toolbar > label:has(#order-sort),
    body.is-order-display .order-toolbar > label:has(#order-direction) {
        display: none;
    }

    body.is-board-wide.is-order-display main,
    body.has-side-nav.is-board-wide.is-order-display main {
        margin: 0;
        max-width: none;
        /* 上の60pxは、全画面の浮かせたボタン（左上のメニュー・右上の全画面をやめる）の場所です（admin.css の「全画面」）。 */
        padding: 60px 10px 8px;
    }

    body.is-order-display #editor {
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: calc(100vh - 68px);
        height: calc(100dvh - 68px);
    }

    body.is-order-display #editor > aside {
        flex: none;
        margin: 0;
    }

    body.is-order-display #tab-orders {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    /* 上の1行＝左に表示日の操作、右に注文を追加・接続中。下にボード。 */
    body.is-order-display .order-monitor {
        align-items: center;
        display: grid;
        flex: 1 1 auto;
        gap: 8px 12px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
        padding: 8px 10px;
    }

    body.is-order-display .order-monitor > .panel-head {
        align-items: center;
        gap: 8px;
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    body.is-order-display .order-toolbar {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        padding: 6px 10px;
    }

    body.is-order-display .order-toolbar > label {
        align-items: center;
        display: flex;
        gap: 6px;
        white-space: nowrap;
    }

    body.is-order-display .order-toolbar input {
        padding: 6px 8px;
        width: auto;
    }

    /* 幅は字数で決めます。appearance:none にした Safari の date の欄は、width:auto だと幅が中身に合わず崩れます（テーブル割当と同じ）。 */
    body.is-order-display .order-toolbar input[type="date"] {
        min-height: 38px;
        width: 10.5em;
    }

    body.is-order-display .order-toolbar > button,
    body.is-order-display .order-monitor > .panel-head button {
        padding: 8px 12px;
    }

    body.is-order-display .order-day-steps button {
        min-height: 38px;
        padding: 8px 12px;
    }

    /* 全画面でも左から続けて並べます（右端へ寄せない。2026-10-08）。 */
    body.is-order-display .order-view-controls {
        flex-basis: 100%;
    }

    body.is-order-display .order-monitor > .order-list {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        gap: 8px;
        grid-column: 1 / -1;
        grid-row: 2;
        min-height: 0;
    }

    body.is-order-display .order-list > .order-alert {
        flex: none;
        margin: 0;
    }

    body.is-order-display .order-board {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    body.is-order-display .order-board .board-columns {
        flex: 1 1 auto;
        grid-auto-rows: minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        min-height: 0;
        padding-bottom: 0;
    }

    body.is-order-display .order-board.is-layout-two .board-columns {
        grid-template-rows: minmax(0, 1fr);
    }
}

/* ============================================================
   品ごとの伝票（2026-10-05、ユーザー指示。admin-order-board.js）
   ============================================================
   進行状況の3つの枠に並ぶのは、注文ではなく品ごとの伝票です（居酒屋の厨房向け）。
   ・注文依頼 … 伝票1枚＝1品。「先頭の帯＋商品名＋×個数」だけの小さな札を敷き詰めます。
                帯は、提供目標まで1分以上＝緑、1分未満＝黄、超過＝赤です。色は文字でも分かるようにします
                （「あと 8分」「3分超過」）。
   ・提供可能・提供完了 … 運ぶ先ごとのカード。卓番号（持ち帰りは4桁の注文番号）を大きく出します。
   ★ touch-action:none は伝票の帯（つかむ場所）だけです。札の本体に付けると、枠を指でスクロールできません。 */

/* 表示日の下の「朝5時で切り替わります」。 */
.order-date-note {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

/* 横に並ぶ幅（561px以上）では、注記を欄の下へ浮かせます（2026-10-15）。
   .order-toolbar は下端そろえ（align-items:end）なので、注記がラベルの中にあると、表示日の欄だけが
   注記の高さぶん（約23px）上へずれ、隣の「並び替え」「前日／今日／翌日」と段違いになっていました。
   浮かせた注記が次の段に重ならないよう、段の間を広げます。1列のスマホは今までどおりです。 */
@media (min-width: 561px) {
    .order-toolbar { row-gap: 26px; padding-bottom: 28px; }
    .order-toolbar > label:has(.order-date-note) { position: relative; }
    .order-date-note { left: 0; position: absolute; top: calc(100% + 3px); white-space: nowrap; }
}

/* 注文依頼の枠は、札を小さく敷き詰めます（1枚が小さいほど、たくさんの品を一度に見渡せます）。 */
.order-board-cards.is-tickets {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 164px), 1fr));
}

/* 伝票の無い注文（古い応答など）は、今までどおりの注文のカードを枠の幅いっぱいに出します。 */
.order-board-cards.is-tickets > .order-board-card {
    grid-column: 1 / -1;
}

.serving-ticket {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 108px;
    overflow: hidden;
    position: relative;
    /* iOS のダブルタップ拡大を止め、指での縦スクロールは残します（none にしてはいけない）。 */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.serving-ticket:focus-visible,
.serving-destination:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.serving-ticket.is-movable,
.serving-destination.is-movable {
    cursor: grab;
}

.serving-ticket.is-dragging,
.serving-destination.is-dragging {
    opacity: .45;
}

/* サーバの応答待ち（進めた直後）。応答が返ると、取り直しで置き換わります。 */
.serving-ticket.is-pending,
.serving-destination.is-pending,
.serving-destination-row.is-pending {
    opacity: .55;
    pointer-events: none;
}

/* 先頭の帯。提供目標までの残りです。ここがつかむ場所です（touch-action:none）。 */
.serving-band {
    background: #0d8a6a;
    color: #fff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1.2;
    padding: 7px 10px;
    touch-action: none;
}

.serving-ticket.is-band-soon .serving-band {
    background: #f2c230;
    color: #3b2c00;
}

.serving-ticket.is-band-late .serving-band {
    background: #c63b2f;
    color: #fff;
}

.serving-ticket.is-band-late {
    border-color: #e0a59f;
}

/* 新着の伝票（2026-10-07。居酒屋向けUI案 §4.3）。前回の描画に無かった伝票だけ、3秒だけ太い枠で光ります
   （admin-order-board.js の servingIsNew() / scheduleServingNewFade()）。明るい配色では白＋濃い枠、夜の配色では白い枠です（夜は admin-dark.css）。
   動きを減らす設定の端末では点滅せず、枠だけ出します。 */
.serving-ticket.is-new {
    animation: serving-new-flash 1s steps(2, jump-none) 3;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink);
}

@keyframes serving-new-flash {
    50% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .serving-ticket.is-new {
        animation: none;
    }
}

/* 上に商品名（幅いっぱい）、下の右に個数。折り目があるときは、個数を折り目の左へ寄せます。 */
.serving-body {
    align-content: space-between;
    display: grid;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 10px 9px;
}

.serving-body > .serving-quantity {
    font-size: 26px;
    justify-self: end;
}

.serving-name strong {
    display: block;
    font-size: 17px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.serving-options {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.serving-quantity {
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

/* 右下の折り目（同じ商品の伝票が2枚以上あるときだけ）。折った紙の角に、同じ商品の合計数を出します。
   押すと、同じ商品の伝票をまとめて移す小窓が開きます。指で押せるよう 48px 四方です。 */
.serving-ticket.has-fold .serving-body > .serving-quantity {
    margin-right: 46px;
}

.serving-fold {
    align-items: flex-start;
    background: linear-gradient(135deg, #ffd98a 0 50%, var(--paper) 50% 100%);
    border-radius: 9px 0 0 0;
    bottom: 0;
    box-shadow: -2px -2px 5px rgba(60, 40, 0, .16);
    color: #5a3d06;
    height: 48px;
    justify-content: flex-start;
    padding: 6px 0 0 8px;
    position: absolute;
    right: 0;
    width: 48px;
}

.serving-fold span {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: 1;
}

/* 運ぶ先のカード（提供可能・提供完了）。 */
.serving-destination {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 6px solid var(--brand);
    border-radius: 12px;
    cursor: pointer;
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.serving-destination-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.serving-destination-head .board-handle {
    flex: none;
    height: 34px;
    width: 26px;
}

.serving-destination-label {
    font-size: 22px;
    line-height: 1.2;
}

.serving-waiting {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    margin-left: auto;
    white-space: nowrap;
}

.serving-destination-items {
    border-top: 1px solid var(--line);
}

.serving-destination-items li {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 6px 2px;
}

.serving-destination-items li span:last-child {
    grid-column: auto;
}

.serving-destination-items .serving-quantity {
    font-size: 18px;
}

.serving-destination-rest {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

/* 提供完了は、もう手を動かさないので静かな色にします。 */
.serving-destination.is-served {
    background: #f8faf9;
    border-left-color: #b8c7c1;
}

.serving-destination.is-served .serving-destination-label {
    color: #52625e;
    font-size: 17px;
}

.serving-destination.is-served .serving-destination-items li strong,
.serving-destination.is-served .serving-quantity {
    color: #64716e;
    font-size: 13px;
}

/* 「注文依頼と提供可能」だけのときは、札の多い注文依頼の枠を広く取ります。 */
.order-board.is-layout-two .board-columns {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

/* ---- 折り目の小窓・運ぶ先の小窓 ----
   土台は注文の詳細と同じ（.confirm-dialog .order-detail-dialog）です。余白は子の要素の padding で取ります。 */
.serving-dialog .order-detail-dialog-head h2 small {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
}

.serving-dialog-body {
    display: grid;
    gap: 8px;
    max-height: min(60vh, 520px);
    overflow: auto;
    padding: 12px 20px;
}

.serving-dialog-actions {
    padding: 4px 20px 18px;
}

.serving-dialog-actions button {
    font-size: 16px;
    padding: 14px 18px;
    width: 100%;
}

.serving-batch-row {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto auto;
    padding: 10px 12px;
}

.serving-batch-row input[type="checkbox"] {
    height: 22px;
    width: 22px;
}

.serving-batch-where {
    color: var(--ink);
    font-size: 16px;
    font-weight: 900;
}

.serving-batch-what {
    color: var(--muted);
    font-size: 12px;
}

.serving-batch-band {
    background: #0d8a6a;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    padding: 4px 9px;
    white-space: nowrap;
}

.serving-batch-band.is-band-soon {
    background: #f2c230;
    color: #3b2c00;
}

.serving-batch-band.is-band-late {
    background: #c63b2f;
}

.serving-batch-row .serving-quantity,
.serving-destination-row .serving-quantity {
    color: var(--ink);
    font-size: 20px;
}

.serving-destination-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 8px 0;
}

.serving-destination-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.serving-destination-row-actions button {
    border-radius: 8px;
    font-size: 13px;
    padding: 9px 12px;
    white-space: nowrap;
}

/* スマホでは、ボタンの列を2段目の全幅へ下ろします（2026-10-15）。auto の列はボタン3つの幅（約309px）まで
   広がるので、1段のままだと商品名の列が 0px になり、商品名とボタンが重なっていました。 */
@media (max-width: 560px) {
    .serving-destination-row { grid-template-columns: minmax(0, 1fr) auto; }
    .serving-destination-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---- 注文の詳細の「提供の予定」（admin.js の orderServingSchedule） ---- */
.serving-schedule {
    border-top: 1px solid var(--line);
    margin-top: 12px;
    padding-top: 12px;
}

.serving-schedule h4 {
    font-size: 14px;
    margin: 0 0 8px;
}

.serving-schedule-rows {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.serving-schedule-row {
    align-items: center;
    border-bottom: 1px dashed var(--line);
    display: grid;
    gap: 8px;
    grid-template-columns: 50px minmax(0, 1fr) auto auto 118px;
    padding: 6px 0;
}

.serving-schedule-time {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

.serving-schedule-row .serving-quantity {
    font-size: 16px;
}

.serving-schedule-row.is-served .order-item-name strong,
.serving-schedule-row.is-served .serving-schedule-time {
    color: #7a8783;
}

.serving-schedule-shift {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.serving-schedule-shift button {
    border-radius: 8px;
    font-size: 12px;
    padding: 7px 8px;
    white-space: nowrap;
}

.serving-course {
    background: #f7faf9;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-top: 10px;
    padding: 10px 12px;
}

.serving-course-head {
    align-items: baseline;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.serving-course-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 4px;
}

.serving-course-controls button {
    border-radius: 8px;
    font-size: 13px;
    padding: 8px 12px;
}

/* admin.css の label{display:grid} のままだと、チェックと文字が縦に割れます。 */
.serving-cascade {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 6px;
}

@media (max-width: 760px) {
    /* スマートフォンは縦1列です（上の .order-board.is-layout-two の2列を取り返します）。 */
    .order-board.is-layout-two .board-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .serving-dialog-body {
        padding: 10px 14px;
    }

    .serving-dialog-actions {
        padding: 4px 14px 14px;
    }

    .serving-batch-row {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .serving-batch-what {
        display: none;
    }

    .serving-schedule-row {
        grid-template-columns: 46px minmax(0, 1fr) auto;
    }

    .serving-schedule-row .order-status,
    .serving-schedule-shift {
        grid-column: 2 / -1;
        justify-content: flex-start;
        justify-self: start;
    }
}

/* ---- 注文の明細の変更（036） ---- */
/* 明細を変えた行・すべて取り消した行。変更前の値は小さく添え、取り消した行は薄く取消線にします。 */
.order-items li.is-adjusted-away {
    color: var(--muted);
}

.order-item-before {
    color: var(--warning);
    display: block;
    font-size: 12px;
    font-weight: 800;
}

.order-item-cancelled {
    color: var(--danger);
    font-size: 13px;
    font-weight: 900;
}

.order-total-before {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.order-adjustment-pending {
    margin: 8px 0 0;
}

.order-adjustments {
    border-top: 1px dashed var(--line);
    margin-top: 12px;
    padding-top: 10px;
}

.order-adjustments h4 {
    font-size: 13px;
    margin: 0 0 6px;
}

.order-adjustments ol {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.order-adjustment {
    background: #f7faf9;
    border-radius: 10px;
    padding: 8px 10px;
}

.order-adjustment.is-reverted {
    opacity: .6;
}

.order-adjustment-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 13px;
}

.order-adjustment-head small {
    color: var(--muted);
    margin-left: auto;
}

.order-adjustment ul {
    font-size: 13px;
    margin: 6px 0 0;
    padding-left: 18px;
}

.order-adjustment ul small {
    color: var(--muted);
    margin-left: 4px;
}

.order-adjustment-note {
    color: var(--muted);
    font-size: 12px;
    margin: 6px 0 0;
    overflow-wrap: anywhere;
}

.order-adjustment-refund.is-refunded {
    background: #dff5ec;
    color: #08634f;
}

.order-adjustment-refund.is-failed {
    background: #f4e8e8;
    color: var(--danger);
}

/* 「明細を変更」と「キャンセル」（2026-10-20）のポップアップ。見た目の土台は .confirm-dialog（admin-settings.css）です。 */
.order-adjust-dialog,
.order-cancel-dialog {
    max-width: min(640px, calc(100vw - 32px));
}

.order-adjust-dialog form,
.order-cancel-dialog form {
    display: grid;
    gap: 12px;
    max-height: min(86vh, 820px);
    overflow: auto;
}

/* 会計済みでレジで払った注文の取消：お返しする金額と方法。 */
.cancel-refund {
    display: grid;
    gap: 8px;
}

.cancel-refund p {
    margin: 0;
}

.adjust-lines {
    display: grid;
    gap: 10px;
}

.adjust-line {
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 8px 12px;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 10px 12px 12px;
}

.adjust-line legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-weight: 900;
    padding: 0 4px;
}

.adjust-line legend small,
.adjust-line legend span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.adjust-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    grid-column: 1 / -1;
}

.adjust-quick button {
    font-size: 12px;
    padding: 6px 10px;
}

.adjust-summary {
    background: #f5f8f7;
    border-radius: 10px;
    padding: 10px 12px;
}

.adjust-summary ul {
    font-size: 13px;
    margin: 0 0 8px;
    padding-left: 18px;
}

.adjust-summary p {
    margin: 0 0 4px;
}

.adjust-refund strong {
    color: var(--danger);
}

.adjust-error {
    background: #fff0f0;
    border-radius: 8px;
    color: var(--danger);
    font-weight: 800;
    margin: 0;
    padding: 8px 12px;
}

@media (max-width: 560px) {
    .adjust-line {
        grid-template-columns: 1fr;
    }
}

/* 店舗入力の注文（037。2026-09-24）の「注文を追加」ポップアップ。土台は .confirm-dialog（admin-settings.css）です。
   iPad の横向きでメニューとカートを左右に並べ、狭い画面では縦に積みます。 */
.staff-order-dialog {
    max-width: min(960px, calc(100vw - 24px));
    width: 100%;
}

.staff-order-dialog form {
    display: grid;
    gap: 12px;
    max-height: min(92vh, 900px);
    overflow: auto;
}

.staff-order-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.staff-order-head h2 {
    margin: 0;
}

.staff-order-types {
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
}

.staff-order-types legend {
    font-weight: 900;
    margin-bottom: 6px;
}

.staff-order-types label {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.staff-order-types input,
.staff-order-warning input {
    width: auto;
}

.staff-order-where,
.staff-order-when {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* ホールから開いた卓固定の注文の、いちばん上のテーブル番号（2026-10-16、ユーザー指示「上にテーブル番号を表示」）。
   ハンディの .handy-table-head と同じ30pxです。卓を選ぶ注文（キッチンの入口）では出しません。 */
.staff-order-table-head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin: 0 0 8px;
}

.staff-order-table-head small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.staff-order-table-head strong {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.staff-order-table-head span {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 2px 8px;
}

.staff-order-columns {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.staff-order-menu,
.staff-order-cart {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
}

.staff-order-category h4,
.staff-order-cart h4 {
    font-size: 14px;
    margin: 6px 0;
}

/* 商品のマス。よく出る品もカテゴリーの品も、どのマスも同じ幅・同じ高さです（2026-10-16、ユーザー指示「縦と横を合わせる」）。
   以前は、よく出る品（幅124px〜・高さ64px〜）とカテゴリーの品（150px〜・56px〜）で大きさが違い、長い名前で1つずつ高さが変わっていました。
   名前は3行まで（admin-staff-order.js の staffOrderProductInner()）。iPhone の幅で2列、幅に応じて列が増えます。 */
.staff-order-products {
    display: grid;
    gap: 8px;
    grid-auto-rows: 96px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 124px), 1fr));
}

.staff-order-product {
    align-content: center;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    display: grid;
    gap: 2px;
    justify-content: stretch;
    justify-items: start;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 6px 10px;
    text-align: left;
}

.staff-order-product-name {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: 14px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.staff-order-product small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-order-product .staff-order-product-option {
    color: var(--brand-dark);
}

.staff-order-product.is-sold-out {
    background: #fbf3f3;
}

/* オプションのある商品を押したときに、注文を追加の上へ重ねて開く選択画面（2026-09-24）。
   指で押すので、選択肢は1行ずつ44px以上の高さにします。 */
.staff-order-option-dialog {
    max-width: min(560px, calc(100vw - 24px));
    width: 100%;
}

.staff-order-option-dialog form {
    display: grid;
    gap: 12px;
    max-height: min(88vh, 820px);
    overflow: auto;
}

.staff-order-option-dialog h2 {
    margin: 0;
}

.staff-order-option-dialog .staff-option-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}

.staff-order-option-dialog .staff-option-price small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.staff-option-group {
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 8px 10px 10px;
}

.staff-option-group legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    padding: 0 4px;
}

.staff-option-rule {
    background: #eff9f6;
    border-radius: 999px;
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 800;
    padding: 2px 8px;
}

.staff-option-choice {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
}

.staff-option-choice span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.staff-option-choice small {
    color: var(--muted);
    font-weight: 800;
    white-space: nowrap;
}

.staff-option-choice:has(input:checked) {
    background: #eff9f6;
    border-color: var(--brand-dark);
}

.staff-option-choice:has(input:disabled) {
    cursor: not-allowed;
    opacity: .5;
}

.staff-option-quantity {
    align-items: center;
    display: flex;
    gap: 10px;
    font-weight: 900;
}

.staff-option-quantity button {
    min-height: 44px;
    min-width: 44px;
}

.staff-option-quantity strong {
    font-size: 18px;
    min-width: 2ch;
    text-align: center;
}

.staff-order-option-dialog .staff-option-hint {
    margin: 0;
}

.staff-option-hint:empty {
    display: none;
}

.staff-order-lines {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.staff-order-lines li {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.staff-order-line-name {
    display: grid;
}

.staff-order-line-name small {
    color: var(--muted);
    font-size: 12px;
}

.staff-order-qty {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.staff-order-qty button,
.staff-order-lines li > button {
    font-size: 13px;
    padding: 6px 10px;
}

.staff-order-contact {
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 8px 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 10px 12px 12px;
}

.staff-order-contact legend {
    font-weight: 900;
    padding: 0 4px;
}

.staff-order-contact .muted {
    grid-column: 1 / -1;
    margin: 0;
}

.staff-order-notice,
.staff-order-channel {
    background: #eff9f6;
    border-radius: 8px;
    font-size: 13px;
    margin: 0;
    padding: 8px 12px;
}

.staff-order-confirm {
    display: grid;
    gap: 8px;
}

.staff-order-confirm p {
    margin: 0;
}

.staff-order-confirm-items {
    display: grid;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.staff-order-confirm-items li {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 6px 0;
}

.staff-order-confirm-items small {
    color: var(--muted);
    display: block;
    font-size: 12px;
}

.staff-order-total strong {
    font-size: 18px;
}

.staff-order-warnings {
    background: #fff3df;
    border: 1px solid #eed39d;
    border-radius: 10px;
    padding: 10px 12px;
}

.staff-order-warnings h4 {
    color: #7c5316;
    margin: 0 0 6px;
}

.staff-order-warnings ul {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.staff-order-warning p {
    margin: 0 0 4px;
}

.staff-order-warning label {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

/* 店舗入力の注文の印。注文カード・かんばん・テーブルの明細で共用します。 */
.staff-entry-badge {
    background: #e7eefb;
    color: #274a8a;
}

.order-party {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

@media (max-width: 760px) {
    .staff-order-columns,
    .staff-order-contact {
        grid-template-columns: 1fr;
    }
}

/* ---- 持ち場の切替・未提供の合計・文字の大きさ・夜の配色（2026-10-07。居酒屋向けUI案 §4.3） ----
   夜の配色の色は 2026-10-10 から店舗管理の全体に効かせるため、admin-dark.css にあります（ここはボタンの形だけ）。
   持ち場の切替は「4つの枠」の切替と同じ見た目（.order-layout-switch）です。 */
.order-station-switch,
.order-text-switch {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: inline-flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.order-station-switch button,
.order-text-switch button {
    background: transparent;
    border-radius: 0;
    color: var(--muted);
    font-size: 13px;
    padding: 9px 14px;
    white-space: nowrap;
}

.order-station-switch button + button,
.order-text-switch button + button {
    border-left: 1px solid var(--line);
}

.order-station-switch button[aria-pressed="true"],
.order-text-switch button[aria-pressed="true"] {
    background: var(--ink);
    color: #fff;
}

/* 隣の切替（.order-text-switch）と同じ外枠を付けて高さをそろえます（2026-10-15。枠が無いと2px低かった）。
   背景は変数なので、夜の配色でもそのまま夜の面になります。 */
.order-dark-toggle {
    background: var(--card);
    border: 1px solid var(--line);
    font-size: 13px;
    padding: 9px 14px;
    white-space: nowrap;
}

/* 未提供の合計（All-day view）。ボードの上に横1列。押すと折り目の小窓（同じ商品をまとめて移す）が開きます。 */
.serving-totals {
    align-items: center;
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.serving-totals-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    margin-right: 4px;
}

/* 長い商品名は折り返します（2026-10-13）。1行のまま（nowrap）だと、スマホで名前の長い品が1つあるだけで
   キッチンのパネルが画面より広がり、ページが横に伸びてヘッダーと中身がずれた。数量（×2）だけは割りません。 */
.serving-total {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    max-width: 100%;
    min-height: 40px;
    overflow-wrap: anywhere;
    padding: 6px 12px;
    text-align: left;
}

.serving-total b {
    color: #9a6412;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
    white-space: nowrap;
}

.serving-late-count {
    background: var(--danger);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    margin-left: auto;
    padding: 6px 12px;
    white-space: nowrap;
}

.serving-late-count.is-empty {
    background: #e4ebe8;
    color: var(--muted);
}

/* 文字の大きさ（標準／大／特大）。伝票の商品名・数量・帯・運ぶ先のラベルだけを大きくします（1.5m離れた厨房で読むため）。 */
#tab-orders.is-text-large .serving-name strong { font-size: 22px; }
#tab-orders.is-text-large .serving-quantity { font-size: 32px; }
#tab-orders.is-text-large .serving-band { font-size: 15px; }
#tab-orders.is-text-large .serving-destination-label { font-size: 26px; }
#tab-orders.is-text-large .serving-destination-items li strong { font-size: 17px; }
#tab-orders.is-text-large .order-board-cards.is-tickets { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
#tab-orders.is-text-xlarge .serving-name strong { font-size: 26px; }
#tab-orders.is-text-xlarge .serving-quantity { font-size: 40px; }
#tab-orders.is-text-xlarge .serving-band { font-size: 17px; }
#tab-orders.is-text-xlarge .serving-destination-label { font-size: 30px; }
#tab-orders.is-text-xlarge .serving-destination-items li strong { font-size: 19px; }
#tab-orders.is-text-xlarge .serving-total { font-size: 18px; min-height: 48px; }
#tab-orders.is-text-xlarge .serving-total b { font-size: 22px; }
#tab-orders.is-text-xlarge .order-board-cards.is-tickets { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* 「注文を追加」の「よく出る品」（商品の「「とりあえず」に出す」。2026-10-07。居酒屋向けUI案 §4.4）。
   先頭に大きなボタンで並べ、探さずに押せるようにします（ハンディの定番グリッド）。 */
/* 帯は左右をメニューの枠（.staff-order-menu の余白12px）いっぱいまで広げ、中の幅を下のカテゴリーと同じにします（2026-10-16）。
   左右に余白と枠があると、よく出る品のマスだけ幅が狭くなり（375pxで132pxと143px）、縦の線がそろいませんでした。 */
.staff-order-quick {
    background: #f3f8f6;
    border: solid #cfe3dc;
    border-width: 1px 0;
    margin: 0 -12px 10px;
    padding: 8px 12px 10px;
}

/* よく出る品も、マスの大きさはほかの品と同じです（2026-10-16）。枠の色だけで見分けます。 */
.staff-order-product.is-quick {
    border-color: var(--brand);
}