/* ============================================================
   共通スタイル(全画面で使う見た目の設定)
   ============================================================ */

/* ---- 共通デザイントークン(色・角丸)。各画面はこれを使って統一する ---- */
:root {
  --brand: #1f7a4d;          /* 主役の緑(通常の操作) */
  --brand-dark: #17603c;
  --brand-soft: #eef6f0;     /* 緑の薄い面(強調) */
  --ground: #f4f2ee;         /* 画面の背景 */
  --card: #ffffff;
  --ink: #23282a;            /* 本文の近黒 */
  --muted: #6b7671;          /* 補助テキスト */
  --line: #e5e9e6;           /* 罫線 */
  --danger: #c0392b;         /* 会計・緊急 */
  --danger-soft: #fdecea;
  --warn: #e67e22;           /* 店員呼び出し */
  --radius: 14px;
  --radius-sm: 9px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  background: #f4f2ee;
  color: #2b2b2b;
  -webkit-tap-highlight-color: transparent;
  /* 素早い連打を「ダブルタップ拡大」と誤認させない(下の button 等の指定と合わせた保険)。
     ピンチでの拡大・スクロールは今まで通り使える。 */
  touch-action: manipulation;
}

header.appbar {
  background: #1f7a4d;
  color: #fff;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

button { font-family: inherit; cursor: pointer; }

/* iOS でボタンやテンキーを素早く連打したときに「ダブルタップ」と誤認され、
   画面が勝手に拡大するのを防ぐ(ピンチでの拡大は残る。タップ反応の遅延も消える)。
   ※ viewport の user-scalable=no は iOS Safari が無視するため、こちらで対処する。 */
button, input, select, textarea, a, label, [role="button"] {
  touch-action: manipulation;
}

/* 席の連結を示すバッジ(厨房・ドリンク・デシャップ・レジで「🔗 2+3」と表示) */
.link-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px; font-weight: bold;
  color: #6c3fb5;
  border: 1px solid #6c3fb5; border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---------- お客さん画面 ---------- */
.tabs {
  display: flex;
  background: #fff;
  border-bottom: 2px solid #ddd;
  position: sticky;
  top: 46px;
  z-index: 9;
}
.tabs button {
  flex: 1;
  padding: 12px 0;
  border: none;
  background: none;
  font-size: 15px;
  color: #777;
  border-bottom: 3px solid transparent;
}
.tabs button.active {
  color: #1f7a4d;
  font-weight: bold;
  border-bottom-color: #1f7a4d;
}

.page { display: none; padding: 16px; max-width: 480px; margin: 0 auto; }
.page.active { display: block; }

.section-title {
  font-size: 16px;
  margin: 24px 0 10px;
  padding-left: 10px;
  border-left: 4px solid #1f7a4d;
}

/* 番号表示 */
.code-display {
  background: #fff;
  border: 2px solid #1f7a4d;
  border-radius: 12px;
  font-size: 40px;
  letter-spacing: 12px;
  text-align: center;
  padding: 10px;
  min-height: 68px;
  font-variant-numeric: tabular-nums;
}
.item-preview {
  text-align: center;
  min-height: 52px;
  padding: 8px 0;
  font-size: 16px;
}
.item-preview .name { font-weight: bold; font-size: 18px; }
.item-preview .price { color: #b33; font-weight: bold; }
.item-preview .notfound { color: #999; }

/* テンキー */
.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.numpad button {
  font-size: 26px;
  padding: 14px 0;
  border: none;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.numpad button:active { background: #e3f0e9; }
.numpad .key-del { color: #b33; font-size: 20px; }
.numpad .key-add {
  background: #1f7a4d;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
.numpad .key-add:disabled { background: #b9cfc3; }

/* 数量 */
.qty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 0;
}
.qty-row button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid #1f7a4d;
  background: #fff;
  color: #1f7a4d;
  font-size: 22px;
  font-weight: bold;
}
.qty-row .qty { font-size: 24px; font-weight: bold; min-width: 40px; text-align: center; }

/* カート・履歴 */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  padding: 14px;
  margin-bottom: 12px;
}
.cart-item, .hist-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}
.cart-item:last-child, .hist-item:last-child { border-bottom: none; }
.cart-item .remove {
  border: none; background: none;
  color: #b33; font-size: 18px; padding: 4px 8px;
}
.total-row {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: bold;
  padding-top: 10px;
}

/* 税込価格を小さくカッコで添える表示(お客さん画面の金額はすべてこの形) */
.tax-in {
  font-size: .72em;
  font-weight: normal;
  color: #888;
  white-space: nowrap;
}
/* 「価格は税抜です」の注意書き */
.tax-note {
  text-align: center;
  font-size: 11px;
  color: #999;
  padding: 2px 0;
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  margin-top: 12px;
}
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:disabled { background: #b9cfc3; }
.btn-danger { background: var(--danger); }

.badge {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.badge.new { background: #e67e22; }
.badge.served { background: #1f7a4d; }

.notice {
  background: #fff6e0;
  border: 2px solid #e6a817;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 12px;
}

.empty { text-align: center; color: #999; padding: 30px 0; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(30px + env(safe-area-inset-bottom));  /* iPhoneの下端の余白を避ける */
  transform: translateX(-50%);
  z-index: 300;                     /* 下部バーやシートより前に出す(隠れないように) */
  max-width: 90vw;                  /* 長い文でも画面からはみ出さないよう折り返す */
  text-align: center;
  background: rgba(40,40,40,.92);
  color: #fff;
  padding: 12px 24px;
  border-radius: 20px;
  font-size: 15px;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.toast.show { opacity: 1; }

/* ---------- キッチン画面 ---------- */
.kitchen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 16px;
}
.order-card { border-left: 6px solid #e67e22; }
.order-card.served { border-left-color: #1f7a4d; opacity: .65; }
.order-card.waiting { border-left-color: #bbb; }           /* 動きのないカード(調理待ちなど) */
.order-card.checkout-waiting { border-left-color: #c0392b; } /* 会計待ちのテーブル */
.order-card .order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.order-card .table-no { font-size: 20px; font-weight: bold; }
.order-card .time { color: #888; font-size: 13px; }
.order-card ul { list-style: none; margin-bottom: 10px; }
.order-card li {
  padding: 6px 0;
  border-bottom: 1px dashed #ddd;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}
.checkout-bar {
  background: #c0392b;
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
  font-weight: bold;
}
.checkout-bar button {
  background: #fff;
  color: #c0392b;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: bold;
}
.checkout-bar.staff { background: #e67e22; }
.checkout-bar.staff button { color: #e67e22; }
/* 会計希望(お客さんが「会計をお願いする」を押した)は赤で、店員呼び出し(オレンジ)と区別する */
.checkout-bar.pay { background: #c0392b; }

/* ---------- 管理画面 ---------- */
.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
/* メニュー表は列が多いので、横スクロールできる枠に入れる(スマホでも各欄が読める) */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* iPhoneで滑らかにスクロール */
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  margin-bottom: 16px;
}
table.menu-table {
  /* 列が多いので、狭い画面では詰め込まずに横スクロールさせる(重なり防止)。
     min-width より広い画面ではそのまま画面いっぱいに広がる。 */
  width: 100%;
  min-width: 720px;   /* 核となる列だけにしたので狭くできる(細かい設定は各行「詳細」へ) */
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
}
/* 核となる列の幅(番号/品名/カテゴリ/価格/担当/残数/販売中/詳細/操作) */
.menu-table col.c-code   { width: 7%; }
.menu-table col.c-name   { width: 22%; }
.menu-table col.c-cat    { width: 13%; }
.menu-table col.c-price  { width: 8%; }
.menu-table col.c-station{ width: 16%; }
.menu-table col.c-stock  { width: 8%; }
.menu-table col.c-avail  { width: 6%; }
.menu-table col.c-detail { width: 7%; }
.menu-table col.c-act    { width: 13%; }
/* ===== 商品一覧「詳細」展開(細かい設定を折りたたむ) ===== */
/* 整然と並ぶよう格子(グリッド)にし、各項目を1マスに。上ぞろえで不規則な段差を無くす。 */
.menu-table .detail-row > td { background: #faf9f6; padding: 14px 16px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px 18px; align-items: start; }
.detail-grid .df { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #555; }
.detail-grid .df > span.lbl { font-weight: bold; }
.detail-grid .df.chk { flex-direction: row; align-items: center; gap: 7px; font-size: 13px; padding: 6px 0; }
.detail-grid .df-wide { grid-column: span 2; }
.detail-grid input[type=text], .detail-grid input[type=number], .detail-grid input[type=time] {
  padding: 7px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; font-size: 13px; }
/* 飲み放題は1つの枠に集約して目立たせる(誤チェック防止) */
.detail-grid .nomi-group { grid-column: 1 / -1; border: 1px solid #f0d9a8; background: #fff7ec;
  border-radius: 8px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.detail-grid .nomi-group .gtitle { flex-basis: 100%; font-weight: bold; color: #8a6516; font-size: 12px; margin-bottom: 2px; }
/* 「コース＋制限」と「対象ドリンク」を見た目で分ける縦の区切り線 */
.detail-grid .nomi-group .nomi-sep { width: 1px; align-self: stretch; background: #e6cf9e; margin: 2px 10px; }
.detail-grid .subchk { display: flex; gap: 16px; margin-top: 5px; }
.detail-grid .subchk label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
/* 各列に読める幅を確保する */
.menu-table .f-name    { min-width: 0; }
.menu-table .f-options { min-width: 0; }

/* 列ごとの幅を決める(合計100% × min-width で実寸が決まる)。チェックだけの列は思い切り細く */
.menu-table col.c-code    { width: 4%; }
.menu-table col.c-name    { width: 12%; }
.menu-table col.c-cat     { width: 8%; }
.menu-table col.c-yomi    { width: 9%; }
.menu-table col.c-price   { width: 5%; }
.menu-table col.c-station { width: 8%; }
.menu-table col.c-alc     { width: 3%; }
.menu-table col.c-nomic   { width: 4%; }
.menu-table col.c-nomit   { width: 4%; }
.menu-table col.c-nomimin { width: 4%; }
.menu-table col.c-stock   { width: 5%; }
.menu-table col.c-time    { width: 12%; }
.menu-table col.c-opt     { width: 14%; }
.menu-table col.c-dishup  { width: 11%; }
/* 販売時間の2つの時刻入力はセル内で縦に並べ、幅いっぱいに */
.menu-table .f-from, .menu-table .f-to { width: 100%; box-sizing: border-box; font-size: 12px; padding: 4px 2px; }
/* 販売時間の「昼/夜/終日」ワンタップ入力ボタン */
.time-quick { display: flex; gap: 3px; margin-top: 3px; justify-content: center; }
.time-quick .qbtn { font-size: 11px; padding: 2px 6px; border: 1px solid #ccc; border-radius: 4px;
                    background: #f4f4f4; color: #333; cursor: pointer; line-height: 1.4; }
.time-quick .qbtn:hover { background: #e8f0ea; }
.menu-table col.c-multi   { width: 4%; }
.menu-table col.c-req     { width: 4%; }
.menu-table col.c-avail   { width: 4%; }
.menu-table col.c-act     { width: 11%; }

/* チェックボックスだけの列は左右の余白をほぼ無くす */
.menu-table th.tight, .menu-table td.tight { padding: 10px 2px; text-align: center; }
.menu-table th.tight { font-size: 12px; line-height: 1.25; white-space: normal; }
/* 担当のプルダウンと残数の入力欄も詰める */
.menu-table select.f-station { padding: 8px 2px; font-size: 13px; width: 100%; }
.menu-table .f-stock { padding: 8px 4px; }
.menu-table td .btn-small { padding: 7px 8px; }
.menu-table th { white-space: nowrap; }
.menu-table th, .menu-table td {
  padding: 10px 6px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 14px;
}
.menu-table th { background: #1f7a4d; color: #fff; }
.menu-table input[type="text"], .menu-table input[type="number"],
.add-form input[type="text"], .add-form input[type="number"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  width: 100%;
}
.menu-table .num { width: 100%; }
/* 価格・残数は手入力しかしないので、数字の上下ボタン(スピナー)を消す。すっきりして幅も節約 */
.menu-table input[type="number"]::-webkit-inner-spin-button,
.menu-table input[type="number"]::-webkit-outer-spin-button,
.add-form input[type="number"]::-webkit-inner-spin-button,
.add-form input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.menu-table input[type="number"], .add-form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.btn-small {
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: var(--brand);
}
.btn-small:hover { background: var(--brand-dark); }
.btn-small.del { background: var(--danger); }
/* 商品登録フォーム: 欄が多いので、幅に応じて自然に折り返す(はみ出さない) */
.add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 16px;
}
/* 共通の width:100% を打ち消し、欄ごとに適切な幅を与える */
.add-form input[type="text"], .add-form input[type="number"] { width: auto; }
.add-form #newCode { width: 84px; }
.add-form #newName { flex: 2 1 150px; }
.add-form #newPrice { width: 92px; }
.add-form #newStation { width: 116px; }
.add-form #newOptions { flex: 3 1 170px; }

/* 変更した行(まとめて保存の対象)に色を付ける */
.menu-table tr.dirty td { background: #fff8e1; }
.add-form select, .menu-table select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}
/* 共通の見出し(管理・売上・在庫・日替わり など)。緑アクセントで全画面そろえる */
h2.section {
  margin: 26px 0 12px; font-size: 17px; font-weight: 800; color: var(--ink);
  padding-left: 11px; border-left: 4px solid var(--brand);
}

.qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.qr-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  text-align: center;
  padding: 16px;
  page-break-inside: avoid;
}
.qr-card .t { font-size: 22px; font-weight: bold; margin-bottom: 6px; }
.qr-card img, .qr-card svg { width: 100%; max-width: 220px; height: auto; }
.qr-card .u { font-size: 11px; color: #888; word-break: break-all; }

@media print {
  header.appbar, .no-print { display: none !important; }
  body { background: #fff; }
}


/* レジ画面: レジ(会計端末)に打ち込む金額を大きく表示する */
.airregi-total {
  background: #f0f7f3;
  border: 2px dashed #1f7a4d;
  border-radius: 10px;
  text-align: center;
  padding: 8px 0 10px;
  margin-bottom: 10px;
}
.airregi-total .label { font-size: 12px; color: #1f7a4d; font-weight: bold; }
.airregi-total .amount { font-size: 34px; font-weight: bold; font-variant-numeric: tabular-nums; }