/*
 * テーブルの会計のポップアップ（#settle-dialog）と、会計後のポップアップのお釣りの表示です（2026-10-04）。
 * レジで受け取る金額を一番大きく見せます。iPadで打ちやすいよう、支払い方法と預かり金は指で押せる大きさにします。
 */
/* 2026-10-07: テンキーと金種ボタンを足したので広げました（居酒屋向けUI案 §4.6）。761px以上は左に明細・右に支払いの2列（下の .settle-columns）。 */
.settle-dialog { max-width: 560px; width: calc(100vw - 32px); }
.settle-table { margin: 0 0 8px; }
.settle-amounts { display: grid; gap: 6px; margin: 0 0 14px; }
.settle-amounts > div { align-items: baseline; display: flex; justify-content: space-between; }
.settle-amounts dt { color: #5b6661; }
.settle-amounts dd { font-variant-numeric: tabular-nums; margin: 0; }
.settle-due { border-top: 1px solid #d9dedb; padding-top: 8px; }
.settle-due dt { color: inherit; font-weight: 700; }
.settle-due dd { font-size: 1.9rem; font-weight: 700; }
.settle-methods { border: 1px solid #d9dedb; border-radius: 12px; margin: 0 0 12px; padding: 10px 12px 12px; }
.settle-methods legend { font-weight: 700; padding: 0 4px; }
.settle-method-list { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settle-method { align-items: center; border: 1px solid #d9dedb; border-radius: 10px; cursor: pointer; display: flex; gap: 8px; min-height: 44px; padding: 6px 10px; }
.settle-method:has(input:checked) { border-color: #0b7a63; box-shadow: inset 0 0 0 1px #0b7a63; }
.settle-method input { flex: 0 0 auto; height: 18px; margin: 0; width: 18px; }
.settle-tendered { display: block; font-weight: 700; margin-top: 12px; }
.settle-tendered-control { display: flex; gap: 8px; margin-top: 4px; }
.settle-tendered-control input { flex: 1 1 auto; font-size: 1.3rem; font-variant-numeric: tabular-nums; min-height: 46px; min-width: 0; text-align: right; }
.settle-tendered-control button { flex: 0 0 auto; }
.settle-change { background: #eef6f3; border-radius: 10px; font-size: 2.2rem; font-variant-numeric: tabular-nums; font-weight: 700; margin: 10px 0 0; padding: 8px 12px; text-align: right; }
.settle-change.is-short { background: #fdecea; color: #a12a1e; }
.settle-change-result { margin: 0 0 12px; text-align: center; }

@media (max-width: 420px) {
    .settle-method-list { grid-template-columns: 1fr; }
}

/* テンキーと金種ボタン（2026-10-07。Airレジの型）。押す場所は 48px 以上。 */
.settle-pad { display: grid; gap: 8px; grid-template-columns: minmax(0, 3fr) minmax(0, 1.4fr); margin-top: 8px; }
.settle-keys { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settle-keys button { background: #fff; border: 1px solid #d9dedb; border-radius: 10px; color: inherit; font-size: 1.35rem; font-weight: 700; min-height: 48px; padding: 0; }
.settle-keys button.is-zero { grid-column: span 2; }
.settle-quick { align-content: start; display: grid; gap: 6px; }
.settle-quick button { font-size: 0.95rem; font-weight: 700; min-height: 48px; padding: 0 8px; white-space: nowrap; }
.settle-change { line-height: 1.2; }
@media (max-width: 420px) {
    .settle-pad { grid-template-columns: 1fr; }
    .settle-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settle-change { font-size: 1.7rem; }
}

/* ---- レジの全画面会計（2026-10-07。居酒屋向けUI案 §4.6・IZAKAYA_UI_PLAN.md §4。Airレジの型） ----
   761px以上では、左に「ご注文内容」（お客様向け画面と同じ bill）、右に支払い方法・テンキー・お釣り。
   お釣りは40px以上。確定は右下、やめるは左下、「お客様向け画面」は中央。狭い画面は今までどおり縦に積みます。 */
.settle-bill { border: 1px solid #d9dedb; border-radius: 12px; display: grid; gap: 8px; margin: 0 0 12px; padding: 10px 12px 12px; }
.settle-bill-head { align-items: baseline; display: flex; justify-content: space-between; }
.settle-bill-head h3 { font-size: 15px; margin: 0; }
.settle-bill-head span { color: #5b6661; font-size: 13px; font-weight: 700; }
.settle-bill-lines { display: grid; gap: 4px; list-style: none; margin: 0; max-height: 38vh; overflow: auto; padding: 0; }
.settle-bill-lines li { align-items: baseline; border-bottom: 1px solid #e6ebe9; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto auto; padding: 4px 0; }
.settle-bill-lines li:last-child { border-bottom: 0; }
.settle-bill-name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.settle-bill-name small { color: #5b6661; display: block; font-size: 12px; font-weight: 700; }
.settle-bill-qty { color: #5b6661; font-variant-numeric: tabular-nums; }
.settle-bill-amount { font-variant-numeric: tabular-nums; font-weight: 700; }
.settle-bill-empty { padding: 8px 0; }
.settle-bill-breakdown { border-top: 1px solid #d9dedb; display: grid; gap: 4px; margin: 0; padding-top: 8px; }
.settle-bill-breakdown > div { display: flex; justify-content: space-between; }
.settle-bill-breakdown dt { color: #5b6661; font-size: 13px; }
.settle-bill-breakdown dd { font-variant-numeric: tabular-nums; margin: 0; }
.settle-bill-total dt, .settle-bill-total dd { color: inherit; font-size: 1.2rem; font-weight: 700; }
.settle-bill-due dd { font-weight: 700; }
.settle-split { background: #f5f8f7; border-radius: 10px; color: #40504c; font-size: 13px; font-weight: 700; margin: 0; padding: 8px 10px; }
.settle-actions { align-items: stretch; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.6fr); }
.settle-actions button { min-height: 56px; }
.settle-actions .primary { font-size: 1.05rem; }
/* スマホでは1列に積みます（2026-10-15）。このファイルは admin-settings.css より後に読むので、
   .dialog-actions の「560px以下は1列」に上の3列が勝ってしまい、「お客様向け画面」が3行に折れていました。 */
@media (max-width: 560px) {
    .settle-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 761px) {
    .settle-dialog { max-width: min(960px, calc(100vw - 32px)); }
    .settle-columns { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); }
    .settle-bill { margin: 0; }
    .settle-bill-lines { max-height: min(52vh, 520px); }
    .settle-change { font-size: 2.6rem; }
}