/* 高級サロン風テーマ(2026-10-06追加、同日に「明るい背景+金のアクセント」へ変更)。
   レジ画面(index.html)・ログイン画面(login.html)・注文専用画面(order.html)の<style>の
   「後」に読み込み、色・書体・ボタンの大きさだけを上書きする。
   計算ロジック・要素のID・画面の構成には関与しない。
   元の見た目に戻したい場合は、テンプレートの
     <link rel="stylesheet" href="/static/theme.css?...">
   を theme-base.css に書き換えるだけでよい(各テンプレートの元の<style>はそのまま残してある)。

   - 最初の黒い背景の版は「見にくい」とのことで取りやめた。背景は明るい生成り色、文字は黒。
     金色は見出し・合計金額・会計確定ボタンなど要所だけに使う。
   - 集計画面・管理画面・スタッフ台帳は従来どおりの白い背景(theme-base.css)。
   - 画面表示(@media screen)だけに適用する。印刷(伝票・領収書など)は従来どおり。
   - 書体はネット接続に依存しないよう、端末に入っているものだけを使う(Webフォントは読み込まない)。 */

/* 印刷用(従来の配色) */
:root {
  --bg: #f4f2f0; --card: #fff; --inset: #f7f5f1; --line: #eee; --line-strong: #ddd;
  --text: #2b2b2b; --text-2: #666; --text-3: #aaa;
  --accent: #a8562f; --on-accent: #fff;
  --ok: #22543d; --ok-bg: #e6f4ea;
  --danger: #c53030; --danger-bg: #fdecec;
  --warn: #b36b00; --warn-bg: #fff3cd;
  --filled-bg: #fff3b0;
}

@media screen {
  :root {
    --bg: #f6f2ea; --card: #fff; --inset: #faf7f1; --line: #e6dfd2; --line-strong: #c9bfae;
    --text: #1c1917; --text-2: #57534e; --text-3: #8a8378;
    --accent: #8a6a1f;        /* 文字・枠線用の濃い金(白地でも読める濃さ) */
    --gold: #c9a24b;          /* 塗りつぶし用の金 */
    --accent-soft: #f6edd8; --on-accent: #1c1917;
    --ok: #22543d; --ok-bg: #e6f4ea;
    --danger: #b3261e; --danger-bg: #fdecec;
    --warn: #8a5a00; --warn-bg: #fff3cd;
    --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  }

  /* ── 共通 ───────────────────────────── */
  body { background: var(--bg); color: var(--text); }
  header { background: #1c1917; color: #fff; border-bottom: 2px solid var(--gold); flex-wrap: wrap; }
  header strong, header h1 { font-family: var(--serif); letter-spacing: 1px; color: #e6c88a; font-size: 18px; }
  header strong, header h1, header a { white-space: nowrap; }
  header select { min-width: 0; flex: 1 1 120px; }
  header a { color: #fff; text-underline-offset: 3px; }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(60,40,10,.08); }
  h3 { color: var(--accent); font-size: 16px; font-weight: 700; letter-spacing: .5px; }
  .muted { color: var(--text-2); }

  button { background: #fff; color: var(--text); border: 1px solid var(--line-strong); }
  button:active { background: var(--accent-soft); }
  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px; }
  button.primary { background: var(--gold); color: var(--on-accent); border: 1px solid #b08a35; font-weight: 700; }
  button.primary:active { background: #b8923a; }
  button.small { min-height: 36px; }
  /* 選択中のタブ・切替ボタンは黒地に白文字ではっきり区別する。金の塗りは実行ボタン(primary)だけ */
  .tabs button.active, button.small.active, #cashCastGrid button.active {
    background: #1c1917; color: #fff; border: 1px solid #1c1917; font-weight: 700; }

  input, select, textarea { background: #fff; color: var(--text); border: 1px solid var(--line-strong); }
  input::placeholder, textarea::placeholder { color: var(--text-3); }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
  td, th { border-bottom: 1px solid var(--line); }

  /* ── レジ画面(index.html) ───────────── */
  .customer-block { background: var(--inset); border: 1px solid var(--line); }
  .pay-field-label { color: var(--text-2); }
  .attendance-cell .daily-wage-quick-btn { color: var(--accent); border-color: var(--accent); }
  .attendance-cell .daily-wage-quick-btn.paid { background: var(--accent); color: #fff; border-color: var(--accent); }
  .autocomplete-list button:hover, .autocomplete-list button:active { background: var(--accent-soft); }
  .hall-tile.hall-occupied { background: #1c1917; color: #fff; border: 2px solid var(--gold); }
  .hall-tile.hall-occupied .hall-amount { color: #e6c88a; }
  .hall-tile.hall-warning .hall-amount { color: #fff; }

  /* 会計欄 */
  #billingTable td { padding: 8px 4px; }
  #billingTable td:last-child { font-variant-numeric: tabular-nums; }
  #billingTable tr:has(#billGrandTotal) td { border-top: 2px solid var(--gold); border-bottom: none; padding-top: 12px; font-size: 16px; }
  #billGrandTotal strong { font-family: var(--serif); font-size: 36px; font-weight: 700; color: var(--accent); line-height: 1.1; }
  #billCombinedTotal { color: var(--accent); font-weight: 700; }
  .pay-field { background: var(--inset); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px; gap: 6px; min-width: 150px; }
  .pay-field:focus-within { border-color: var(--accent); }
  .pay-field-label { font-size: 14px; font-weight: 700; color: var(--text); }
  .pay-field input { font-size: 20px; text-align: right; font-variant-numeric: tabular-nums; padding: 10px 8px; }
  .pay-field input::placeholder { font-size: 14px; }
  .pay-btns { gap: 8px; }
  .pay-btns button.tiny { min-height: 44px; font-size: 14px; padding: 8px 4px; }
  #closeTicketBtn { display: block; width: 100%; padding: 16px; font-size: 18px; letter-spacing: 2px; margin-bottom: 8px; }
  details.more-box { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
  /* 「その他」は小さな灰色の文字だと見落とされた(2026-10-16 井上さん)ので、枠つきのボタンの見た目にする */
  details.more-box > summary { cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600;
    color: var(--text); padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--inset); }
  details.more-box[open] > summary { margin-bottom: 4px; }
  details.more-box > summary::-webkit-details-marker { display: none; }
  details.more-box > .row { margin-top: 6px; }

  /* ── 注文専用画面(order.html) ───────── */
  .table-tile { background: #1c1917; color: #fff; border: 2px solid var(--gold); }

  /* ── ログイン画面(login.html) ────────── */
  body:has(> .box) { background: #1c1917; }
  .box { background: #fff; border-top: 4px solid var(--gold); }
  .box h1 { color: var(--text); font-family: var(--serif); letter-spacing: 2px; font-size: 20px; }
  .box button { background: var(--gold); color: var(--on-accent); }
}

/* ───────────────────────────────────────────────────────────────
   スマホ・タブレットでの見え方(2026-10-11追加、俊吾さん要望
   「iPhoneの縦でも横でも、iPadでもきれいに見えるように」)。
   画面の構成や計算には触らず、並べ方・大きさだけを直す。
   ─────────────────────────────────────────────────────────────── */
@media screen {
  /* チェック欄・丸い選択欄: index.html の「input { width:100% }」がこれらにも効いて横いっぱいに広がり、
     となりの文字(「担当バック無し(ポイントのみ)」など)が1文字ずつ縦に割れていた。大きさを決め打ちにする。 */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex: none; padding: 0; margin: 0; }
  /* チェックと文字は1つのかたまりにして、途中で折り返さない。押せる範囲も広げる */
  label.chk { white-space: nowrap; min-height: 36px; gap: 8px; min-width: 0; cursor: pointer; }

  /* 伝票詳細の見出しのボタン(取消・まとめる・移動): 右寄せ(float)だと狭い画面で下の入店ボタンに重なっていた。
     見出しを横並びの箱にして、入りきらなければ次の段へ折り返す。並び順は今までと同じ(右端が取消)。 */
  #ticketDetail > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  #ticketDetail > h3 > #ticketTitle { flex: 1 1 200px; }
  #ticketDetail > h3 > button { float: none !important; margin: 0 !important; font-size: 14px; padding: 10px 12px; font-weight: 400; }
  #ticketDetail > h3 > button:nth-of-type(1) { order: 3; }
  #ticketDetail > h3 > button:nth-of-type(2) { order: 2; }
  #ticketDetail > h3 > button:nth-of-type(3) { order: 1; }

  /* 入店の行: ボタンは文字の幅に合わせ、説明やチェック欄に押しつぶされないようにする */
  #regularTicketEnterBox > .row > .enter-btn, #barTicketBox .row > .enter-btn { flex: 0 0 auto; white-space: nowrap; }

  /* 上のタブは途中で折り返さない(「レジ」が縦に割れていた) */
  .tabs button { white-space: nowrap; }

  /* 横に長い表は、表だけを横に動かせるようにする(画面全体が横にずれないように) */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 注文明細: 見出しと「全員」「共有」の列は折り返さない(1文字ずつ縦に割れて読みにくかった) */
  #itemsTable th, #itemsTable td:first-child { white-space: nowrap; }
}

/* ── 指で押す端末(iPhone・iPad): 入力欄は16px以上(小さいとiPhoneが勝手に拡大する)、ボタンは押しやすい高さ ── */
@media screen and (max-width: 1180px) {
  input, select, textarea { font-size: 16px; }
  button { min-height: 40px; }
  button.small { min-height: 40px; font-size: 14px; padding: 8px 12px; }
  .pay-btns button.tiny { min-height: 44px; }
  .qty-controls button { min-height: 36px; min-width: 36px; }
  .cast-tag button { min-height: 30px; min-width: 30px; }
  /* 長いカテゴリ名は「…」で切らず、2段に折り返して全部読めるようにする */
  #categoryTabs button { font-size: 14px; padding: 8px 4px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  /* 行の中の長い説明は、入力欄の横で細く押しつぶされないよう、次の段に回す */
  .row > .muted { flex: 1 1 100%; }
  .row > #enterStatus { flex: 1 1 auto; }
}

/* ── iPad 縦など(幅 600〜900px) ── */
@media screen and (min-width: 601px) and (max-width: 900px) {
  #categoryTabs { grid-template-columns: repeat(4, 1fr); }
}

/* ── スマホ(幅 600px 以下。iPhoneの縦) ── */
@media screen and (max-width: 600px) {
  main { padding: 8px; }
  .card { padding: 12px 10px; }
  header { padding: 10px 12px; gap: 6px 10px; }
  header strong, header h1 { font-size: 16px; }
  header a { font-size: 14px; margin-left: 0; }
  header select { flex: 1 1 100px; }

  .tabs { gap: 6px; }
  .tabs button { flex: 1 1 0; min-width: 0; padding: 10px 2px; font-size: 13px; }

  /* 行の中の入力欄・候補つきの欄は1段を使い切る(細く押しつぶされて読めなくなるため) */
  .row > input:not([type="checkbox"]):not([type="radio"]):not([type="time"]):not([type="number"]),
  .row > select, .row > .autocomplete-wrap, .row > textarea { flex: 1 1 100%; }
  .row > .muted { flex: 1 1 100%; }
  .row > button { flex: 1 1 auto; }

  /* 伝票詳細の見出しのボタンは、3つを1段に並べる */
  #ticketDetail > h3 > #ticketTitle { flex: 1 1 100%; }
  #ticketDetail > h3 > button { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 13px; line-height: 1.35; }

  /* 入店の行: ボタンは横いっぱい、その下に状態、チェック欄は横に並べる */
  #regularTicketEnterBox > .row > .enter-btn { flex: 1 1 100%; }
  #regularTicketEnterBox > .row > #enterStatus { flex: 1 1 100%; }

  /* 注文のカテゴリは3列にして、名前が読めるようにする */
  #categoryTabs { grid-template-columns: repeat(3, 1fr); }
  /* 長い名前(「ウイスキー・ブランデー」など)は「…」で切らず、2段に折り返して全部読めるようにする */
  #categoryTabs button { font-size: 13px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; padding: 6px 4px; }

  /* 表の文字とすき間を少し詰める(横に動かせる入れ物の中) */
  table { font-size: 13px; }
  td, th { padding: 6px 4px; }
  #itemsTable td:nth-child(2), #itemsTable th:nth-child(2) { min-width: 150px; }

  /* 支払方法の欄は2列に並べる */
  .pay-field { flex: 1 1 calc(50% - 8px); min-width: 0; }

  /* 説明の文は少し小さく、行間を広めに */
  .muted { font-size: 12.5px; line-height: 1.6; }
  .hall-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .attendance-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  #billGrandTotal strong { font-size: 30px; }
}

/* ── スマホの横向き(高さが低い): 上の帯とタブが場所を取りすぎないようにする ── */
@media screen and (max-height: 480px) and (orientation: landscape) {
  header { padding: 6px 12px; }
  header strong, header h1 { font-size: 15px; }
  .tabs { margin-bottom: 6px; }
  .tabs button { padding: 6px 10px; min-height: 36px; }
  main { padding: 8px 12px; }
  .autocomplete-list { max-height: 45vh !important; }
}

/* ── 長い説明文は「ⓘ 説明」ボタンにたたむ(2026-10-11追加。static/hints.js が、長い説明文の手前にボタンを置く) ── */
@media screen {
  .hint-long { display: none !important; }
  .hint-long.hint-open { display: block !important; flex: 1 1 100%; margin-top: 4px; padding: 8px 10px;
    background: var(--inset); border: 1px solid var(--line); border-radius: 8px; line-height: 1.6; }
  button.hint-toggle { display: inline-flex; align-items: center; flex: none !important; width: auto; min-height: 30px;
    padding: 2px 10px; margin: 4px 0 0; font-size: 13px; border-radius: 16px; background: var(--accent-soft);
    color: var(--accent); border: 1px solid var(--gold); }
  button.hint-toggle.open { background: var(--accent); color: #fff; border-color: var(--accent); }
}
@media print { button.hint-toggle { display: none; } }