/* テーブル管理タブ（2026-09-23、ユーザー指示。034。旧テーブルQRタブと座席タブを統合）。描画は admin-table-board.js。
   状態の色は5つです。空席＝緑（案内できる）／ご案内済み＝紫（QRを渡して最初の注文待ち）／利用中＝青／
   会計待ち＝橙（動いてほしい）／片付け中＝灰。色だけに頼らず、カードの右上に必ず状態の文字を出します。 */

/* テーブルの追加・店舗全体のメニュー区分。営業中はほぼ触らないので畳んでおきます（テーブルが0卓のときだけ開く）。 */
.table-settings {
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--card);
}

.table-settings > summary {
    cursor: pointer;
    font-weight: 900;
}

.table-settings[open] > summary {
    margin-bottom: 12px;
}

.table-settings > .muted {
    margin: 8px 0 12px;
}

.table-add {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.table-add > input {
    flex: 1 1 180px;
    width: auto;
}

.table-add > .table-menu-channel {
    flex: 1 1 360px;
    min-width: 0;
}

/* スマホでは「メニュー区分」を1行に使います（2026-10-15）。「店舗の設定に従う（いまは「通常」）」が
   約200pxの欄では後ろ半分が切れていました。 */
@media (max-width: 760px) {
    .table-add > input,
    .table-add > .table-menu-channel {
        flex-basis: 100%;
    }
}

.seat-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #f7faf9;
}

.seat-vacancy {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
}

.seat-vacancy strong {
    color: var(--brand-dark);
    font-size: 28px;
}

.seat-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.seat-count {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: #e8efec;
    color: #43544f;
    font-size: 13px;
    font-weight: 800;
}

.seat-count.is-seated { background: #efe8fb; color: #5a3a91; }
.seat-count.is-occupied { background: #e3eefb; color: #1d4f8a; }
.seat-count.is-bill_requested { background: #fdecd6; color: #8a4b08; }
.seat-count.is-cleaning { background: #eceeee; color: #4d5654; }

/* iPad縦（768px）で3列、横で4〜5列、スマホで2列になる幅です（メニュー区分とQRが入るので座席タブより広め）。 */
.seat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

/* 状態によって中身（注文・依頼元・QR）の数が変わるので、縦に積んでボタンだけを下へ寄せます。 */
.seat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 150px;
    padding: 14px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: var(--card);
}

.seat-card.is-vacant { border-color: #9fd3c4; background: #f1faf6; }
.seat-card.is-seated { border-color: #b9a2e3; background: #f7f3fd; }
.seat-card.is-occupied { border-color: #9cbde6; background: #f3f8fe; }
.seat-card.is-bill_requested { border-color: #e7a14a; background: #fff6ea; }
.seat-card.is-cleaning { border-color: #c5cbca; background: #f4f5f5; }

.seat-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    justify-content: space-between;
}

.seat-label {
    font-size: 17px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.seat-status {
    flex: none;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 900;
}

.seat-card.is-vacant .seat-status { color: var(--brand-dark); }
.seat-card.is-seated .seat-status { color: #5a3a91; }
.seat-card.is-occupied .seat-status { color: #1d4f8a; }
.seat-card.is-bill_requested .seat-status { background: #e27d12; color: #fff; }
.seat-card.is-cleaning .seat-status { color: #4d5654; }

.seat-elapsed {
    min-height: 1.4em;
    margin: 0;
    font-size: 15px;
    font-weight: 900;
}

.seat-elapsed.is-elapsed-warn { color: var(--warning); }
.seat-elapsed.is-elapsed-late { color: var(--danger); }

.seat-orders {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.seat-source {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e27d12;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.seat-actions {
    display: grid;
    gap: 6px;
    margin-top: auto;
}

/* 指で押すので、ボタンは44px以上の高さにします。 */
.seat-actions button {
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    font-size: 14px;
}

.seat-actions .muted {
    font-weight: 800;
}

.seat-empty {
    margin: 0;
}

/* カードの中のメニュー区分。カードの幅に収めます（.table-menu-channel の既定は min-width: 200px）。 */
.seat-card .table-menu-channel {
    min-width: 0;
    margin: 0;
}

.seat-card .table-menu-channel select {
    width: 100%;
}

/* 「QRコードを表示」（新しいタブでQRだけを開く）と「注文を追加」。状態ごとのボタンの下に、どのカードでも同じ位置に並べます。
   カードが広ければ横に2つ、狭ければ縦に積みます（文字が切れないように）。QRが止まっている空席・片付け中は
   「注文を追加」だけになり、1つで横幅いっぱいに広がります。 */
.seat-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, .12);
}

.seat-tools .button-link,
.seat-tools button {
    flex: 1 1 130px;
    width: auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 8px 6px;
    font-size: 13px;
    white-space: nowrap;
}

/* 明細画面の見出しの下に出す「お会計の依頼があります」。 */
.table-bill-note {
    margin: 8px 0 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: #fdecd6;
    color: #8a4b08;
    font-size: 13px;
    font-weight: 900;
}

@media (max-width: 760px) {
    .seat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .seat-card {
        min-height: 140px;
        padding: 12px;
    }
}

/* ---- フロアマップ（2026-10-07。居酒屋向けUI案 §4.5・IZAKAYA_UI_PLAN.md §7。描画は admin-table-board.js の floorMapHtml()） ----
   区画（カウンター／テーブル／座敷…）ごとの枠に、8列の格子で卓を置きます。色は状態、数字は経過時間と未提供の品数。
   色の約束: 緑＝利用中、琥珀＝会計待ち・2時間に近い、紫＝ご案内済み、青＝片付け中、灰＝空席、赤い点＝呼び出し。 */
.table-board-tools { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; }
.table-view-switch { display: inline-flex; gap: 4px; }
.table-view-switch button { background: #fff; border: 1px solid var(--line); color: var(--ink); min-height: 40px; padding: 8px 14px; }
.table-view-switch button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.table-board-tools [data-layout-edit], .table-board-tools [data-layout-add-zone] { min-height: 40px; padding: 8px 14px; }
.table-layout-hint { flex-basis: 100%; margin: 0; }
.floor-map { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 680px), 1fr)); }
/* 卓は1マス76px（760px以下は64px）より細くしません（2026-10-15、ユーザー指示「卓の大きさを保ち横送り」）。
   8列を画面の幅に押し込むと、iPhoneで1マス約30px・iPad縦で約67pxになり、「110」が「11／0」に割れていました。
   収まらない区画は、区画の枠（.floor-zone）の中だけで横に送ります。ページ全体は横に動きません。
   ★overflow を付けた区画は、grid の自動の最小幅が 0 になるので、.floor-map の列（画面幅）を押し広げません。
   ★呼び出しの赤い点（.has-call::after。-5px）は区画の余白 10px の中に収まるので切れません。
   ★区画を横に並べるのは、8列×76px が入る幅（680px）があるときだけです。 */
.floor-zone { border: 1px dashed #c5d1cc; border-radius: 12px; display: grid; gap: 8px; overflow-x: auto; padding: 10px; }
.floor-zone h5 { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .08em; margin: 0; }
.floor-zone-name { font-size: 14px; font-weight: 900; min-height: 40px; }
/* 段の高さは、区画の中でいちばん高い段にそろえます（2026-10-16、ユーザー指示「空席だけが並んでいる段の枠が、ほかより縦が短い」）。
   高さの決まっていない grid では、1fr の段は「いちばん中身の多い段」の高さになり、全部の段が同じ高さになります。
   以前の minmax(76px, auto) は段ごとに中身の高さだったので、名前と「空席」だけの段が低くなっていました。 */
.floor-grid { display: grid; gap: 6px; grid-template-columns: repeat(8, minmax(76px, 1fr)); grid-template-rows: repeat(var(--floor-rows, 1), minmax(76px, 1fr)); }
.floor-cell { background: #f7faf9; border: 1px dashed #c5d1cc; border-radius: 10px; min-height: 76px; padding: 0; }
.floor-cell:hover { background: #e8f5ef; border-color: var(--brand); }
/* 卓は自分のマスの中に収めます（2026-10-13）。列が auto だと卓の中身（「15:06」など折り返せない文字）の幅まで広がり、
   スマホ（1マス約31px）で隣の卓の下へ潜り込んでいました。収まらない文字は卓の中で折り返し、はみ出した分は隠します。
   ★呼び出しの赤い点（.has-call::after）の基準は .floor-table-wrap なので、overflow:hidden で切れません
     （卓を動かしているあいだだけ .is-dragging が position:relative になり、点は隠れます）。 */
.floor-table-wrap { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); min-width: 0; position: relative; }
/* 卓の中身は、どの卓も左上から並べます（2026-10-16）。button の共通の justify-content:center（admin.css）が残っていると、
   「空席」など文字の短い卓だけ中身が真ん中に寄り、隣の卓と左端がそろいませんでした（卓が広くなって目立った）。
   ★値は下の .floor-table の行に書いてあります（justify-content: stretch）。 */
/* 配置の編集中は、卓の下に「幅2」の段があります。段の高さがそろって卓の枠が伸びたとき、伸びるのは卓のほうにします。 */
.floor-table-wrap.is-editing { grid-template-rows: 1fr auto; }
.floor-table { align-content: space-between; background: #fff; border: 2px solid var(--line); border-radius: 12px; color: var(--ink); display: grid; gap: 2px; justify-content: stretch; justify-items: start; line-height: 1.2; min-height: 76px; min-width: 0; overflow: hidden; overflow-wrap: anywhere; padding: 8px 8px; text-align: left; width: 100%; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.floor-table .floor-no { font-size: 18px; font-weight: 900; }
.floor-table .floor-st { font-size: 12px; font-weight: 800; }
.floor-table .floor-mn { font-size: 16px; font-weight: 900; }
.floor-table .floor-pend { color: #5a3a91; font-size: 11px; font-weight: 800; }
.floor-table .floor-mn.is-elapsed-warn { color: var(--warning); }
.floor-table .floor-mn.is-elapsed-late { color: var(--danger); }
.floor-table.is-vacant { background: #eef1f0; border-color: #dfe5e2; color: #6c7975; }
.floor-table.is-seated { background: #f7f3fd; border-color: #b9a2e3; }
.floor-table.is-occupied { background: #e4f5ee; border-color: #78c7ab; }
.floor-table.is-occupied.is-long { background: #fff6e4; border-color: #e9a93a; }
.floor-table.is-bill_requested { background: #fff1d6; border-color: #e9a93a; }
.floor-table.is-bill_requested .floor-st { color: #8a5a00; }
.floor-table.is-cleaning { background: #e8f0fb; border-color: #8fb6e8; color: #2a4a73; }
.floor-table.has-call::after { background: var(--danger); border: 2px solid #fff; border-radius: 999px; content: ""; height: 14px; position: absolute; right: -5px; top: -5px; width: 14px; }
.floor-table.is-selected { box-shadow: 0 0 0 3px var(--brand); }
.floor-table.is-dragging { opacity: .7; position: relative; z-index: 3; }
.floor-map.is-editing .floor-table { cursor: grab; touch-action: none; }
/* ドラッグ中に、離すとどうなるかの印（admin-table-board.js の markFloorDropTarget()。2026-10-09）。
   空いているマスは枠、卓の上は差し込む側に縦の線（格子の隙間 6px の真ん中）。 */
.floor-cell.is-drop-target { background: #e8f5ef; border: 2px solid var(--brand); }
.floor-table-wrap.is-drop-before::before,
.floor-table-wrap.is-drop-after::after { background: var(--brand); border-radius: 2px; bottom: 0; content: ""; pointer-events: none; position: absolute; top: 0; width: 4px; z-index: 2; }
.floor-table-wrap.is-drop-before::before { left: -5px; }
.floor-table-wrap.is-drop-after::after { right: -5px; }
.floor-tile-tools { display: flex; gap: 4px; }
.floor-tile-tools button { font-size: 11px; min-height: 28px; padding: 2px 8px; }
.floor-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; }
.floor-legend .is-occupied { color: #1f9d6a; }
.floor-legend .is-bill { color: #c2850a; }
.floor-legend .is-seated { color: #5a3a91; }
.floor-legend .is-cleaning { color: #2b6cb0; }
.floor-legend .is-vacant { color: #8a9793; }
.floor-legend .is-call { color: var(--danger); }
@media (max-width: 760px) {
    .floor-grid { grid-template-columns: repeat(8, minmax(64px, 1fr)); grid-template-rows: repeat(var(--floor-rows, 1), minmax(64px, 1fr)); }
    .floor-table, .floor-cell { min-height: 64px; }
    /* 1マスが細いので、左右の余白を詰めて文字の幅を空けます。 */
    .floor-table { padding: 6px 4px; }
    .floor-table .floor-no { font-size: 15px; }
    /* 区画名の入力欄は16pxにします。16px未満だと iPhone がタップで画面を拡大します（admin.css の末尾の説明）。 */
    .floor-zone-name { font-size: 16px; }
}

/* スマホ（560px以下）は、1マスを区画の幅の半分にして、画面に卓が2つずつ並ぶようにします（2026-10-16、ユーザー指示
   「横スクロール多めでいいので、今の2列を使って配置を並べる。スマホは2列に並べるがせいぜい」）。64pxのマスでは、
   卓が細く縦に長くなっていました。残りの列は区画の中で横に送ります。
   ・100cqi は区画（.floor-zone）の中身の幅です。区画を container にするのはスマホの幅だけです。
   ・列の数は --floor-cols（admin-table-board.js の floorMapHtml()）。見るときは卓が置いてある右端の列まで、
     配置の編集中は8列すべてです。右の空いた列まで描くと、何も無い所を横に送ることになるためです。
   ・container の単位が使えない古いブラウザでは、この指定は無視され、上の64pxのマスのままです。 */
@media (max-width: 560px) {
    .floor-zone { container-type: inline-size; }
    .floor-grid { grid-template-columns: repeat(var(--floor-cols, 8), calc((100cqi - 6px) / 2)); }
}

/* ---- レジでお客様に見せる「お客様向け画面」（2026-09-28、ユーザー指示。index.php の #checkout-display） ----
   テーブル明細の「お客様向け画面」から開く全画面です。iPadなどをお客様へ向けて見せます。描画は admin-table-board.js の
   renderCheckoutDisplay()。横長では左に「ご注文内容」、右に「合計金額」の2枚、縦長・狭い画面では縦に重ねます。
   ご注文が多いときは左のカードの中だけをスクロールし、合計金額は常に見えるようにします。 */
.checkout-display {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #f4f5f3;
    color: var(--ink);
}

.checkout-display[open] {
    display: flex;
    flex-direction: column;
}

.checkout-display::backdrop {
    background: #f4f5f3;
}

.checkout-display-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px clamp(16px, 3vw, 32px);
    color: var(--muted);
    font-size: 14px;
}

.checkout-display-head p {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    font-weight: 800;
}

.checkout-display-head button {
    padding: 8px 14px;
    font-size: 13px;
}

.checkout-display-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(14px, 2.2vw, 28px);
    padding: 0 clamp(16px, 3vw, 32px) clamp(16px, 3vw, 32px);
}

.checkout-display-items,
.checkout-display-total,
.checkout-display-thanks {
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.checkout-display-items {
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 2.6vw, 32px);
}

.checkout-display-items-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: clamp(12px, 1.6vw, 18px);
    border-bottom: 1px solid var(--line);
}

.checkout-display-items-head h2 {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 32px);
}

.checkout-display-items-head span {
    font-size: clamp(15px, 1.6vw, 20px);
    font-weight: 800;
    white-space: nowrap;
}

.checkout-display-items ul {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.checkout-display-items li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px clamp(14px, 2.4vw, 40px);
    padding: clamp(14px, 1.8vw, 22px) 0;
    border-bottom: 1px solid var(--line);
    font-size: clamp(16px, 1.7vw, 21px);
}

.checkout-display-items li:last-child {
    border-bottom: 0;
}

.checkout-display-name {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.checkout-display-name small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .72em;
    font-weight: 700;
}

.checkout-display-qty {
    color: var(--muted);
    font-size: .9em;
    white-space: nowrap;
}

.checkout-display-amount {
    min-width: 4.5em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.checkout-display-total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(20px, 3vw, 40px);
    background: #f9faf8;
    text-align: center;
}

.checkout-display-total > p {
    margin: 0 0 8px;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 900;
}

/* 合計金額は折り返さず、必ず1行にします（2026-09-28 ユーザー指示。タブレットで ¥100,000 が2行に折れていた）。
   ここの大きさは上限で、枠に収まらない桁数のときは admin-table-board.js の fitCheckoutTotal() が実際の幅を測って縮めます。 */
.checkout-display-total > strong {
    display: block;
    font-size: clamp(52px, 8.5vw, 112px);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

.checkout-display-breakdown {
    display: grid;
    gap: 10px;
    margin: clamp(18px, 2.4vw, 32px) 0 0;
    padding-top: clamp(14px, 2vw, 24px);
    border-top: 1px solid var(--line);
    text-align: left;
}

.checkout-display-breakdown div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--muted);
    font-size: clamp(15px, 1.6vw, 19px);
}

.checkout-display-breakdown dt,
.checkout-display-breakdown dd {
    margin: 0;
}

.checkout-display-breakdown dd {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 消費税の行のあとに支払いの行が続くときは、点線で分けます（税の内訳と、レジで受け取る額を混ぜて読ませない）。 */
.checkout-display-breakdown div + .checkout-display-paid {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.checkout-display-breakdown .checkout-display-due {
    color: var(--ink);
    font-size: clamp(17px, 1.9vw, 23px);
    font-weight: 900;
}

.checkout-display-thanks {
    grid-column: 1 / -1;
    display: grid;
    place-content: center;
    padding: 24px;
    text-align: center;
}

.checkout-display-thanks h2 {
    margin: 0 0 12px;
    font-size: clamp(28px, 4vw, 48px);
}

.checkout-display-thanks p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(16px, 1.8vw, 22px);
}

@media (max-width: 760px), (orientation: portrait) {
    .checkout-display-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }
}

/* 「店員を呼ぶ」（050）。お客様が押した用件をカードに赤い帯で出し、「対応した」で消します。 */
.seat-call {
    align-items: center;
    background: #fde3df;
    border: 1px solid #f3b4ab;
    border-radius: 10px;
    color: #7a1f14;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 800;
    gap: 8px;
    justify-content: space-between;
    margin: 8px 0 0;
    padding: 6px 10px;
}

.seat-call button {
    background: #fff;
    border: 1px solid #f3b4ab;
    border-radius: 8px;
    color: #7a1f14;
    font-size: 13px;
    font-weight: 800;
    min-height: 36px;
    padding: 0 12px;
    white-space: nowrap;
}

.seat-call small {
    color: #a0463a;
    font-weight: 700;
}

/* 用件の文は縮めて折り返し、「対応した」は縮めません（2026-10-15）。スマホの2列のカードでは、
   ボタンがカードの外へ出て、用件が1文字ずつ縦に並んでいました。760px以下は縦に積んでボタンを全幅にします。 */
.seat-call > span { flex: 1 1 8em; min-width: 0; }
.seat-call button { flex: none; }

@media (max-width: 760px) {
    .seat-call { align-items: stretch; flex-direction: column; }
    .seat-call button { width: 100%; }
}

/* iPhone SE などの狭い幅（400px以下）では、2列にすると卓名が1文字ずつ折れ、
   「QRコードを表示」の文字がボタンの枠を越えるので、カードを1列にします（2026-10-15）。 */
@media (max-width: 400px) {
    .seat-grid { grid-template-columns: minmax(0, 1fr); }
}

/* テーブルQRのポップアップ（#table-qr-dialog。2026-10-15）。ホールのカードの「QRコードを表示」で開き、QR画像だけを出す。 */
.qr-dialog { max-width: min(360px, calc(100vw - 32px)); }
.qr-dialog-image { display: flex; justify-content: center; margin: 12px 0; }
.qr-dialog-image img { width: min(240px, 70vw); height: auto; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }