:root {
  color-scheme: light;
  --bg: #f5f3ef;
  --panel: #ffffff;
  --text: #23201b;
  --muted: #75706a;
  --accent: #b5622f;
  --accent-dark: #8a4a22;
  --border: #e3ddd3;
  --success: #3f7d4d;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

header.app-header {
  padding: 0.6rem 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

header.app-header h1 {
  font-size: 1.05rem;
  margin: 0;
}

header.app-header nav a {
  color: var(--accent-dark);
  text-decoration: none;
  margin-left: 1rem;
  font-size: 0.9rem;
  display: inline-block;
  padding: 0.35rem 0;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
}

/* brief highlight when the dashboard live-updates from an SSE event */
@keyframes flash-update {
  0% { background-color: #fff1e0; }
  100% { background-color: transparent; }
}
.flash-update { animation: flash-update 1.4s ease-out; }

.section-title {
  display: block;
  margin: 0.9rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}
/* コンテナ内の最初の要素として使うときに上マージンを打ち消す */
.section-title.no-margin-top { margin-top: 0; }

/* 見出し直下の補足文（名寄せ候補パネルなど）の共通スペーシング */
.section-hint { margin-top: 0.6rem; }
.section-hint-spaced { margin: 0.9rem 0 0.4rem; }

.photo-modal-body h3 { margin-top: 0; }

details.visits-section > summary.section-title {
  cursor: pointer;
  list-style: revert;
}
details.visits-section > summary.section-title::marker { color: var(--muted); }

.detail-grid-side, .detail-grid-main { min-width: 0; }

.muted { color: var(--muted); }

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* the customer list has 5 columns including two dates - give it a floor
   width so cells stay readable, letting .table-scroll take over instead of
   squashing everything on a narrow phone */
table.customers-table {
  min-width: 480px;
  /* fixed layout + the <colgroup> widths below keep each column's width
     constant regardless of which column is sorted (a toggled sort arrow
     changing a header's text length must not reflow the whole table) */
  table-layout: fixed;
}
table.customers-table th,
table.customers-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

th { color: var(--muted); font-weight: 600; }
/* 通常セルより縦paddingを増やし、繰り返しタップされるソート操作の
   タップ領域をタブレットでも押しやすい高さ（目安44px）に近づける */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; padding: 0.65rem 0.6rem; }
th.sortable:hover { color: var(--accent-dark); }
.sort-indicator { color: var(--accent); font-size: 0.7rem; }

table.customers-table col.col-avatar { width: 56px; }
table.customers-table col.col-name { width: 26%; }
table.customers-table col.col-visits { width: 14%; }
table.customers-table col.col-spend { width: 18%; }
table.customers-table col.col-first-visit { width: 21%; }
table.customers-table col.col-last-visit { width: 21%; }

/* 顧客一覧: 行全体をクリック可能にしているので、そうとわかるようにする */
table.customers-table tbody tr[data-customer-id] { cursor: pointer; }
table.customers-table tbody tr[data-customer-id]:hover { background: var(--bg); }

/* 読み込み失敗時の共通表示（一覧・プロフィール・名寄せ候補などで共用） */
.load-error {
  color: #b03a2e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

a.row-link { color: var(--accent-dark); text-decoration: none; }
a.row-link:hover { text-decoration: underline; }

.thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border);
  vertical-align: middle;
}
.clickable-thumb { cursor: pointer; }

.merged-faces-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.merged-face-item .thumb { width: 40px; height: 40px; }

.photo-modal {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  width: 320px;
  max-width: 90vw;
  color: var(--text);
  background: var(--panel);
}
.photo-modal::backdrop { background: rgba(0, 0, 0, 0.5); }
.photo-modal-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.photo-modal-preview-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  cursor: pointer;
}
.photo-modal-preview {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border);
}
.photo-pick-icon-btn {
  position: absolute;
  right: -0.15rem;
  bottom: -0.15rem;
  width: 2.3rem;
  height: 2.3rem;
  min-height: auto;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.photo-pick-icon-btn:hover { background: var(--accent-dark); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.photo-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  width: 100%;
  margin-top: 0.5rem;
}

button, input, select {
  font: inherit;
}

button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1rem;
  min-height: 44px;
  cursor: pointer;
}
button:hover { background: var(--accent-dark); }
button.secondary {
  background: transparent;
  color: var(--accent-dark);
  border: 1px solid var(--accent-dark);
}
button.secondary:hover { background: #fbeee5; }

input[type=text], input[type=number], input[type=password], select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.6rem;
  min-height: 44px;
  font-size: 16px; /* iOS Safariでフォーカス時に自動ズームされるのを防ぐ */
}

.login-form {
  max-width: 320px;
  margin: 2.5rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.login-form .error { color: #b03a2e; font-size: 0.9rem; margin: 0; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: #eee;
  color: var(--muted);
}
.badge.drink { background: #e3f0ff; color: #205a9c; }
.badge.food { background: #fdeee0; color: #a35a1a; }
.badge.dessert { background: #fbe7f1; color: #a3306e; }

/* 直近かつ未会計の来店＝「今対応中」の目印 */
.badge.in-progress-badge { background: #fff1e0; color: var(--accent-dark); font-weight: 600; }
/* 一度も名前を編集されていない（自動採番のままの）顧客の目印 */
.badge.unnamed-badge { margin-left: 0.4rem; background: #f1ede6; color: var(--muted); font-style: italic; font-weight: 400; }

/* 注文一覧のカテゴリ表示: テキストの代わりに絵文字アイコンを丸バッジで表示 */
.badge.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
}

/* --- reception page --- */
.reception-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.video-panel { width: 100%; max-width: 640px; }
.video-panel-hint { margin: 0 0 0.75rem; }
#capture-canvas { display: none; }

.video-frame { position: relative; }

#camera-video {
  width: 100%;
  max-width: 640px;
  border-radius: var(--radius);
  background: #000;
}
/* インカメラ（自撮り用）のときだけ鏡像表示にする。アウトカメラで来店客を
   映す場合に左右反転させると不自然になるため、reception.jsが実際に選ばれた
   facingModeを見て付け外しする。 */
#camera-video.mirrored { transform: scaleX(-1); }

.camera-switch-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2.4rem;
  height: 2.4rem;
  min-height: auto;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.camera-switch-btn:hover { background: rgba(0, 0, 0, 0.75); }

#welcome-banner {
  width: 100%;
  max-width: 640px;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: opacity 0.3s ease;
}

#welcome-banner.new-customer { border-color: var(--accent); background: #fff6f0; }
#welcome-banner.existing-customer { border-color: var(--success); background: #f2faf3; }
#welcome-banner.idle { opacity: 0.55; }

/* カメラ障害・切断時は通常の待機表示(.idle)と混同しないよう、
   常時はっきり見える警告色で表示する（受付画面はスタッフが常時
   注視しているわけではないため、異常時こそ目立つ必要がある）。 */
#welcome-banner.camera-error {
  opacity: 1;
  border-color: #b03a2e;
  background: #fdeceb;
}
#welcome-banner.camera-error .subtitle { color: #b03a2e; font-weight: 600; }

#welcome-banner img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
/* 受付画面はカウンター越しに「ちらっと見る」サイニッジ的な使い方をするため、
   通常のWeb本文サイズより大きめにして遠目でも読めるようにする。 */
#welcome-banner .title { font-size: 1.6rem; font-weight: 700; }
#welcome-banner .subtitle { font-size: 1.15rem; color: var(--muted); }

.order-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: end;
  margin-top: 0.75rem;
}
.order-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: var(--muted);
  gap: 0.25rem;
}
/* 半角数字N桁分だけ入ればいい欄なので、桁数+パディング分だけの幅にする */
.order-form input[name="price"] { width: calc(6ch + 1.3rem); }
.order-form input[name="quantity"] { width: calc(3ch + 1.3rem); }
.pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; align-items: center; }

/* --- dashboard: search bar / profile / visit header --- */
.search-bar { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; align-items: center; }
.search-bar input[type="text"] { flex: 1 1 200px; }

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.checkbox-label input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  min-height: auto;
  accent-color: var(--accent);
  cursor: pointer;
}

.profile-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.profile-layout .thumb-lg { width: 80px; height: 80px; }
.profile-layout .profile-fields { flex: 1; min-width: 0; }
.profile-field-label { display: block; color: var(--muted); font-size: 0.8rem; }
.profile-field-input { display: block; width: 100%; margin: 0.2rem 0 0.75rem; }

.name-input-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.profile-name-input {
  flex: 1;
  min-width: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
.name-input-suffix {
  flex: 0 0 auto;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.profile-stat {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.profile-stat:last-child { border-bottom: none; }
.profile-memo-textarea {
  min-height: 4.5rem;
  resize: vertical;
  font-family: inherit;
}

.profile-note { margin-top: 0.75rem; font-size: 0.85rem; }
.profile-note-tight { margin-top: 0.4rem; font-size: 0.85rem; }
.drink-breakdown { margin-top: 0.4rem; }

/* --- collapsible sections (native <details>/<summary>) --- */
details.collapsible summary,
details.visit-card > summary {
  cursor: pointer;
  list-style: revert;
}
details.collapsible summary::marker,
details.visit-card > summary::marker {
  color: var(--muted);
}

details.collapsible summary {
  font-weight: 600;
  font-size: 1rem;
}

details.visit-card { padding: 0; margin-bottom: 0.75rem; }
.visit-card-body .table-scroll { margin-top: 0.5rem; }
details.visit-card > summary {
  padding: 0.75rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.2rem 0.75rem;
  font-weight: 600;
}
details.visit-card > summary .muted { font-weight: 400; }
details.visit-card[open] > summary { border-bottom: 1px solid var(--border); }
.visit-card-body { padding: 0.85rem 1.1rem 1rem; }

/* ボタン同士(切り離す・削除)の間隔を広めにとり、開閉トグルや隣のボタンとの
   誤タップを減らす */
.visit-summary-meta { display: inline-flex; align-items: center; gap: 0.7rem; }

/* サムネイルと日時を1つのまとまりとして扱うことで、合計金額などの長さが
   変わってもこの2つの表示位置(左端からの距離)がずれないようにする。 */
.visit-summary-when { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }

.merge-candidate-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.merge-candidate-row:last-child { border-bottom: none; }
.merge-candidate-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* --- dashboard: companions (連れ) --- */
.companions-block { margin-top: 0.75rem; }
.companion-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.companion-row-label {
  color: var(--muted);
  font-size: 0.8rem;
  flex: 0 0 auto;
  padding-top: 0.65rem;
}

/* タグ入力欄: 登録済みのお連れ様チップと入力欄を、1つの枠の中に一緒に表示する */
.companion-input-box {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  min-height: 44px;
  background: #fff;
  cursor: text;
}
.companion-input-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(181, 98, 47, 0.15);
}
.companion-input-box .companion-search-input {
  flex: 1 1 100px;
  min-width: 80px;
  border: none;
  background: transparent;
  min-height: auto;
  padding: 0.2rem 0.1rem;
}
.companion-input-box .companion-search-input:focus { outline: none; }

.companion-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #f1ede6;
  border-radius: 999px;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  font-size: 0.85rem;
  white-space: nowrap;
}
.unlink-icon {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  min-height: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1;
  font-size: 1rem;
  border-radius: 50%;
}
.unlink-icon:hover { color: var(--accent-dark); background: #e3ddd3; }

/* 来店(受付)の削除は誤操作時の影響が最も大きい（唯一の来店記録の場合は
   顧客ごと消える）ため、他の.unlink-icon用途（連れの紐づけ解除など）より
   一回り大きくして誤タップの確率を下げる */
.delete-visit-btn { width: 1.9rem; height: 1.9rem; font-size: 1.25rem; }

.visit-snapshot-thumb { width: 36px; height: 36px; }

.split-icon-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  min-height: 1.6rem;
  line-height: 1;
  font-size: 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
}
.split-icon-btn:hover { color: var(--accent-dark); background: #e3ddd3; }

.companion-search-results { width: 100%; margin-top: 0.4rem; }
.companion-search-results:not(:empty) {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.25rem 0.6rem;
  background: var(--bg);
}
.companion-candidate-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.9rem;
}
.companion-candidate-row + .companion-candidate-row { border-top: 1px solid var(--border); }

/* --- desktop: two-column customer detail layout --- */
@media (min-width: 880px) {
  main { max-width: 1100px; }

  .detail-grid {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    align-items: start;
    gap: 1rem;
  }
  .detail-grid-side {
    position: sticky;
    top: 1rem;
  }
}

/* --- mobile adjustments --- */
@media (max-width: 640px) {
  main { padding: 0.75rem; }
  .panel { padding: 0.75rem; }
  details.visit-card > summary { padding: 0.65rem 0.75rem; }
  .visit-card-body { padding: 0.65rem 0.75rem 0.85rem; }
  header.app-header { padding: 0.6rem 1rem; }
  header.app-header nav a { margin-left: 0; margin-right: 1rem; }

  th, td { padding: 0.45rem 0.4rem; font-size: 0.85rem; }

  .order-form { flex-direction: column; align-items: stretch; }
  .order-form label { width: 100%; }
  .order-form input, .order-form select { width: 100%; }

  .profile-layout { flex-direction: column; align-items: center; text-align: center; }
  .profile-layout .profile-fields { width: 100%; }

  .merge-candidate-row { flex-wrap: wrap; }
  .merge-candidate-row button { width: 100%; }

  .companion-row-label { flex-basis: 100%; }
  .companion-candidate-row { flex-wrap: wrap; }
  .companion-candidate-row button { width: 100%; }
}

@media (max-width: 480px) {
  .col-optional { display: none; }
}