/* ホールのハンディ（2026-10-07。居酒屋向けUI案 §4.4。index.php の #hall-handy。描画は admin-hall-handy.js）。
   スマホ（縦）で片手で使う全画面です。2026-10-16 から3画面です（ユーザー指示）。
     卓を選ぶ（呼び出しの赤帯 → 切替 → 卓の格子）→ 注文（上にテーブル番号 → 同じ大きさの商品のマス）→ カート（中身と合計 → 送る）。
   色の意味は現場の画面の約束どおり: 緑＝利用中、琥珀＝会計待ち、赤＝呼び出し、紫＝ご案内済み、青＝片付け中。
   押す場所は最小 48px、主操作（送る）は 58px 以上です（§5）。iPad の横でも使えるよう、幅に応じて列を増やします。 */
.hall-handy {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #f4f6f5;
    color: var(--ink);
}

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

.hall-handy::backdrop {
    background: #f4f6f5;
}

.handy-head {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 10px;
    padding: 10px 14px;
}

.handy-head h2 {
    font-size: 18px;
    margin: 0;
}

.handy-head .handy-calls {
    background: #fde3df;
    border-radius: 999px;
    color: #a52a1e;
    font-size: 13px;
    font-weight: 900;
    padding: 4px 10px;
}

.handy-head button {
    min-height: 44px;
    padding: 8px 14px;
}

/* 呼び出しの件数は押せます（どの画面からでも卓を選ぶ画面へ戻り、赤帯の「向かう」を押せる）。閉じるだけを右端へ寄せます。 */
.handy-head .handy-calls {
    border: 0;
    min-height: 36px;
    padding: 4px 12px;
}

.handy-head [data-handy-close] {
    margin-left: auto;
}

/* 中身はここだけがスクロールします。端まで行っても後ろのホールの画面へスクロールを渡しません（2026-10-16、ユーザー指示
   「ハンディは画面いっぱいに埋め尽くして、下の画面を出さない」。後ろのページを止めるのは admin.css の末尾の html:has(dialog:modal)）。 */
.handy-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0 12px;
}

/* 卓の格子（卓を選ぶ画面）。どの卓も同じ大きさのマスで、名前と席の状態。前に選んだ卓は黒地、呼び出しのある卓には赤い点。
   押すとその卓の注文画面へ進みます（2026-10-16、ユーザー指示「卓を選んでから注文画面」）。 */
.handy-tables {
    background: #fff;
    display: grid;
    gap: 8px;
    grid-auto-rows: 72px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr));
    padding: 10px 12px;
}

.handy-table {
    align-content: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    display: grid;
    gap: 2px;
    justify-items: center;
    min-width: 0;
    padding: 4px;
    position: relative;
}

.handy-table strong {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.handy-table small {
    font-size: 11px;
    font-weight: 800;
}

.handy-table.is-seated { background: #f7f3fd; border-color: #b9a2e3; }
.handy-table.is-occupied { background: #dcefe9; border-color: #9fd3c3; }
.handy-table.is-bill_requested { background: #fff1d6; border-color: #f0c26a; }
.handy-table.is-cleaning { background: #e8f0fb; border-color: #8fb6e8; }
.handy-table.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* 注文画面・カート画面のいちばん上のテーブル番号（2026-10-16、ユーザー指示「上にテーブル番号を表示」）。
   お客様の注文画面の卓名（.table-label-head）と同じ30pxです。右の「卓を変える」で卓を選ぶ画面へ戻ります。 */
.handy-table-head {
    align-items: center;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 8px 14px;
}

.handy-table-title {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    min-width: 0;
}

.handy-table-title small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

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

.handy-table-status,
.handy-table-channel {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 2px 8px;
}

.handy-table-head > button {
    flex: none;
    min-height: 44px;
    padding: 8px 14px;
}

.handy-table.has-call::after {
    background: var(--danger);
    border: 2px solid #fff;
    border-radius: 999px;
    content: "";
    height: 12px;
    position: absolute;
    right: -4px;
    top: -4px;
    width: 12px;
}

/* 呼び出し（赤）とお客様からの会計の依頼（琥珀）。 */
.handy-alerts {
    display: grid;
    gap: 4px;
    padding: 0 12px;
}

.handy-alert {
    align-items: center;
    background: #fde3df;
    border: 1px solid #f3b4ab;
    border-radius: 10px;
    color: #7a1f14;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    justify-content: space-between;
    padding: 6px 10px;
}

.handy-alert.is-bill {
    background: #fff1d6;
    border-color: #f0c26a;
    color: #6b4400;
}

.handy-alert button {
    background: #fff;
    border: 0;
    border-radius: 8px;
    color: inherit;
    flex: none;
    font-size: 13px;
    font-weight: 900;
    min-height: 40px;
    padding: 0 12px;
}

.handy-seg {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr 1fr;
    padding: 0 12px;
}

.handy-seg button {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-weight: 800;
    min-height: 44px;
}

.handy-seg button[aria-selected="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.handy-count {
    background: #e8ecea;
    border-radius: 999px;
    color: #56635f;
    font-size: 12px;
    margin-left: 4px;
    padding: 2px 8px;
}

.handy-seg button[aria-selected="true"] .handy-count {
    background: #fff;
    color: var(--ink);
}

.handy-error,
.handy-notice {
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    margin: 0 12px;
    padding: 8px 12px;
}

.handy-error { background: #fbe9e7; color: var(--danger); }
.handy-notice { background: #fff3df; color: #7c5316; }

.handy-empty {
    padding: 18px 12px;
    text-align: center;
}

/* 商品のマス。どのカテゴリーのマスも同じ幅・同じ高さです（2026-10-16、ユーザー指示「縦と横を合わせる」）。
   以前は、よく出る品（幅104px〜・高さ68px〜）と全メニュー（96px〜・56px〜）で大きさが違い、長い名前や
   2択の札（たれ／塩）で1つずつ高さが変わっていました。iPhone（375px）で3列、幅に応じて列が増えます。
   名前は3行まで出し、あふれた分は「…」です（全文は読み上げの名前と、オプションの小窓の見出し）。
   注文画面は最初から全メニューです（同日、ユーザー指示。よく出る品だけを先に出す段と「全メニュー」のマスはやめた）。 */
.handy-grid {
    display: grid;
    gap: 6px;
    grid-auto-rows: 96px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr));
}

.handy-item {
    display: grid;
    min-width: 0;
    position: relative;
}

.handy-item-main {
    align-content: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    display: grid;
    gap: 2px;
    justify-items: center;
    line-height: 1.15;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 6px 4px;
    text-align: center;
    /* iOS のダブルタップ拡大を止め、長押し（売り切れ）の選択も出さない。 */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.handy-item-main .handy-item-name {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: 14px;
    font-weight: 900;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.handy-item-main small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* オプションのある品の印。押すとオプションの小窓が開きます（2026-10-16。2択の札はやめた）。 */
.handy-item-main .handy-item-option {
    color: var(--brand-dark);
}

.handy-item.is-in-cart .handy-item-main {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}

/* 売り切れ。灰色＋取り消し線で、位置は変えません（指が覚えた場所を失わないため）。長押しで戻せます。 */
.handy-item.is-sold-out .handy-item-main {
    background: #eef1f0;
    color: var(--muted);
}

.handy-item.is-sold-out .handy-item-name {
    text-decoration: line-through;
}

.handy-badge {
    align-items: center;
    background: var(--brand);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    min-width: 24px;
    padding: 0 6px;
    pointer-events: none;
    position: absolute;
    right: -6px;
    top: -6px;
}

/* 全メニュー（検索とカテゴリー）。注文画面を開いたときから出します。 */
.handy-all {
    display: grid;
    gap: 10px;
    padding: 0 12px;
}

.handy-search-label {
    font-size: 12px;
}

.handy-search-label input {
    min-height: 44px;
}

.handy-category h4 {
    font-size: 13px;
    margin: 0 0 6px;
}

.handy-cart,
.handy-confirm {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 10px;
    margin: 0 12px;
    padding: 12px;
}

.handy-cart-head {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.handy-cart h4,
.handy-confirm h4 {
    font-size: 15px;
    margin: 0;
}

.handy-lines,
.handy-confirm-items,
.handy-warnings {
    display: grid;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.handy-lines li {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto auto;
    padding: 6px 0;
}

.handy-line-name small {
    color: var(--muted);
    display: block;
    font-size: 12px;
}

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

.handy-line-qty button,
.handy-lines li > button {
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
}

.handy-confirm-items li {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto auto;
}

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

.handy-warning {
    background: #fff3df;
    border-radius: 10px;
    color: #7c5316;
    padding: 10px 12px;
}

.handy-warning p {
    margin: 0 0 6px;
}

.handy-warning label {
    align-items: center;
    display: flex;
    gap: 8px;
}

/* カートの中の、サーバが計算した結果（明細・合計・お知らせ・確認が要る点）。カートの枠の中に続けて出します。 */
.handy-cart .handy-confirm {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    margin: 0;
    padding: 10px 0 0;
}

.handy-total {
    font-size: 15px;
    font-weight: 800;
    margin: 0;
    text-align: right;
}

.handy-total strong {
    font-size: 22px;
}

.handy-notices {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
    padding-left: 1.2em;
}

.handy-check-loading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.handy-check-loading button {
    min-height: 44px;
}

/* 運ぶ先のカード。卓を大きく、できてからの時間、品の一覧、「運んだ」。 */
.handy-carry {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    padding: 0 12px;
}

.handy-carry-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 6px;
    padding: 10px 12px;
}

.handy-carry-card.is-pending {
    opacity: .55;
    pointer-events: none;
}

.handy-carry-card header {
    align-items: baseline;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.handy-carry-card header strong {
    font-size: 20px;
}

.handy-carry-card header span {
    color: var(--warning);
    font-size: 12px;
    font-weight: 800;
}

.handy-carry-card ul {
    display: grid;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.handy-carry-card li {
    display: flex;
    font-size: 15px;
    justify-content: space-between;
}

.handy-carry-card li small {
    color: var(--muted);
    display: block;
    font-size: 12px;
}

.handy-carry-card li b {
    font-size: 17px;
}

.handy-carry-card > button {
    min-height: 52px;
}

/* 下の固定バー。左は「卓を変える」（カート画面では「メニューに戻る」）、右は「カートを見る（N点）」（カート画面では
   「テーブル 7 へ送る」）。主な操作は右（親指の下）です。卓を選ぶ画面では出しません。 */
.handy-foot {
    background: #fff;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr 2fr;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}

.handy-foot button {
    border-radius: 14px;
    font-size: 15px;
    min-height: 58px;
}

.handy-foot .handy-send {
    font-size: 17px;
}