/* JANコード対象探索 — 外部フォント・外部リソースは使わない */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --text: #1c1f24;
  --muted: #5f6670;
  --line: #d9dde3;
  --accent: #1565c0;
  --accent-ink: #ffffff;
  --danger: #c62828;
  --warn-bg: #fff6e0;
  --warn-line: #f0b400;
  --error-bg: #fdecea;
  --error-line: #d93025;
  --info-bg: #e8f1fc;
  --info-line: #5b8fd6;
  --radius: 10px;
  --hl: #e53935;
  --hl-ink: #ffffff;
  --hl-fill: rgba(229, 57, 53, 0.28);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a;
    --surface: #1f2226;
    --text: #e8eaed;
    --muted: #a0a6ae;
    --line: #353a41;
    --accent: #5aa0f2;
    --accent-ink: #0b1a2c;
    --danger: #ff6b61;
    --warn-bg: #3a3015;
    --warn-line: #c99a00;
    --error-bg: #3d1d1b;
    --error-line: #ff6b61;
    --info-bg: #182a40;
    --info-line: #5b8fd6;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

[hidden] { display: none !important; }

.app-header {
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.app-header h1 { margin: 0; font-size: 1.1rem; }

main { max-width: 760px; margin: 0 auto; padding: 16px; }
body[data-screen="camera"] main { max-width: none; padding: 0; }

h2 { font-size: 1.15rem; margin: 0 0 8px; }
h3 { font-size: 1rem; margin: 0 0 8px; }
p { margin: 0 0 8px; }
.lead { font-size: 1.05rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.strong { font-weight: 700; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 12px 0;
}
.card ol { margin: 0; padding-left: 1.4em; }

button, select {
  font: inherit;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled, select:disabled { opacity: 0.5; cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
button.big { font-size: 1.1rem; min-height: 56px; padding: 10px 28px; }
button.danger { color: var(--danger); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.actions.tight { margin: 8px 0; gap: 8px; }
.actions.end { justify-content: flex-end; }

.notice {
  border-left: 5px solid;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0;
}
.notice p:last-child { margin-bottom: 0; }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice.error { background: var(--error-bg); border-color: var(--error-line); }
.notice.info { background: var(--info-bg); border-color: var(--info-line); }
.notice summary { cursor: pointer; }
.notice ul.rows { margin: 6px 0 0; padding-left: 1.2em; font-size: 0.9rem; max-height: 14em; overflow: auto; }

dl.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 16px;
  margin: 0 0 10px;
}
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
dl.kv.compact { gap: 0 12px; margin: 6px 0; }

label.check { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
label.check input { width: 20px; height: 20px; margin: 0; flex: none; }
.checks { display: flex; flex-wrap: wrap; gap: 0 20px; }

fieldset.plain { border: 0; padding: 0; margin: 4px 0 10px; }
fieldset.plain legend { padding: 0; color: var(--muted); }
fieldset.colors { border: 0; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; }
fieldset.colors legend { padding: 0; margin-bottom: 4px; color: var(--muted); }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; min-height: 40px; padding: 0 10px;
  border-radius: 8px; border: 3px solid transparent;
  color: #fff; font-weight: 700;
}
.swatch input:checked + span { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.swatch input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.swatch[data-color="red"] span { background: #e53935; }
.swatch[data-color="orange"] span { background: #fb8c00; }
.swatch[data-color="yellow"] span { background: #fdd835; color: #222; }
.swatch[data-color="green"] span { background: #43a047; }
.swatch[data-color="blue"] span { background: #1e88e5; }

/* ---- カメラ画面 ---- */
.camera-screen { display: flex; flex-direction: column; }
.stage {
  position: relative;
  background: #000;
  height: 62vh;
  height: 62svh;
  overflow: hidden;
}
.stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.stage-message {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 86%; padding: 12px 16px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.72); color: #fff; text-align: center;
}
.panel { padding: 12px 16px 24px; }
.panel-csv { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.panel details.card { margin: 8px 0; padding: 8px 12px; }
.panel details summary { cursor: pointer; min-height: 32px; font-weight: 700; }
.camera-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.camera-pick select { flex: 1 1 180px; min-width: 0; }

/* スマホ用: 映像の左上の検出状況と、右上のメニューボタン (PC では横の欄に同じ情報があるので出さない) */
.stage-chip {
  position: absolute;
  left: calc(10px + env(safe-area-inset-left));
  top: calc(10px + env(safe-area-inset-top));
  padding: 4px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.62); color: #fff;
  font-weight: 700; font-size: 15px; pointer-events: none;
}
.stage-chip:empty { display: none; }
.menu-btn {
  position: absolute;
  right: calc(10px + env(safe-area-inset-right));
  top: calc(10px + env(safe-area-inset-top));
  width: 52px; height: 52px; min-height: 52px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.62); color: #fff;
}
.menu-btn svg { width: 26px; height: 26px; }
/* 新しい版があるときの印 */
.menu-btn.has-update::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: #ff5252; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.panel-head h2 { margin: 0; }

@media (min-width: 900px) {
  /* PC で設定欄を横に並べるときは不要 (リスト表示中はメニューから開くので出す) */
  body:not([data-list]) :is(.stage-chip, .menu-btn, .panel-head) { display: none !important; }
  body[data-screen="camera"] .camera-screen {
    flex-direction: row;
    height: calc(100vh - 49px);
  }
  body[data-screen="camera"] .stage { flex: 1 1 auto; height: auto; }
  body[data-screen="camera"] .panel {
    flex: 0 0 360px;
    overflow-y: auto;
    border-left: 1px solid var(--line);
    background: var(--surface);
  }
}

/* スマホ: カメラ映像を画面いっぱいに表示し、設定類は右上のメニューから全画面で開く (開いている間は映像を隠す) */
@media (max-width: 899px) {
  body[data-screen="camera"] .app-header { display: none; }
  body[data-screen="camera"] .stage { position: fixed; inset: 0; height: auto; }
  body[data-screen="camera"] .stage video { object-fit: cover; }
  body[data-screen="camera"] .panel { display: none; }
  body[data-screen="camera"][data-menu-open] .stage { visibility: hidden; }
  body[data-screen="camera"][data-menu-open] .panel {
    display: block; position: fixed; inset: 0; z-index: 10;
    overflow-y: auto; background: var(--bg);
    padding: calc(12px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  }
}

/* ---- リスト表示 (カメラと並べる) ----
   縦長の画面: 上にカメラ (正方形に近い)、下にリスト。横長の画面と PC: 左にカメラ、右にリスト。
   設定類は右上のメニューから開く (狭い画面は全画面、広い画面は右側に重ねる) */
body[data-screen="camera"][data-list] .app-header { display: none; }
body[data-screen="camera"][data-list] .camera-screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; height: auto;
}
body[data-screen="camera"][data-list] .stage {
  position: relative; inset: auto; flex: 0 0 auto;
  width: 100%; height: min(100vw, 55vh); height: min(100vw, 55dvh);
}
body[data-screen="camera"][data-list] .stage video { object-fit: cover; }
body[data-screen="camera"][data-list] .panel { display: none; }
@media (orientation: landscape) {
  body[data-screen="camera"][data-list] .camera-screen { flex-direction: row; }
  body[data-screen="camera"][data-list] .stage { width: min(100vh, 50vw); width: min(100dvh, 50vw); height: 100%; }
}
body[data-screen="camera"][data-list][data-menu-open] .panel {
  display: block; position: fixed; inset: 0; z-index: 10;
  overflow-y: auto; background: var(--bg);
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  body[data-screen="camera"][data-list][data-menu-open] .panel {
    left: auto; width: 420px; border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
  }
}

.list-pane { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; background: var(--surface); }
.list-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.list-toolbar select { flex: 1 1 auto; min-width: 0; max-width: 220px; min-height: 38px; padding: 4px 8px; }
.list-toolbar button { flex: 0 0 auto; min-height: 38px; padding: 4px 10px; }
.list-count {
  flex: 0 1 auto; min-width: 0; margin-right: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 0.85rem;
}

/* いまカメラの中央にある商品 (スクロールや絞り込みに関係なく、ここでチェック・数量を入れられる) */
.list-current {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  min-height: 52px; padding: 6px 10px;
  background: var(--bg); border-bottom: 2px solid var(--line);
}
.list-current p { margin: 0; }
.list-current[data-kind="target"] { border-bottom-color: var(--hl); box-shadow: inset 5px 0 0 var(--hl); }
.lc-info { display: flex; align-items: baseline; gap: 8px; flex: 1 1 200px; min-width: 0; }
.lc-status {
  padding: 1px 8px; border-radius: 4px; white-space: nowrap;
  background: var(--line); color: var(--text); font-size: 0.8rem; font-weight: 800;
}
.lc-status[data-kind="target"] { background: var(--hl); color: var(--hl-ink); }
.lc-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lc-jan { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.lc-controls { display: flex; align-items: center; gap: 10px; }

.list-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.lt { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 14px; }
.lt th, .lt td {
  padding: 4px 8px; border-bottom: 1px solid var(--line);
  background: var(--surface); text-align: left; vertical-align: middle;
}
.lt th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 700;
  white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.lt th[data-sort="asc"]::after { content: " \25B2"; }
.lt th[data-sort="desc"]::after { content: " \25BC"; }
/* 固定した列 (左端の位置は list.js が --fz0〜--fz7 に入れる) */
.lt .fz { position: sticky; z-index: 1; }
.lt th.fz { z-index: 3; }
.lt .fz-0 { left: var(--fz0, 0px); }
.lt .fz-1 { left: var(--fz1, 0px); }
.lt .fz-2 { left: var(--fz2, 0px); }
.lt .fz-3 { left: var(--fz3, 0px); }
.lt .fz-4 { left: var(--fz4, 0px); }
.lt .fz-5 { left: var(--fz5, 0px); }
.lt .fz-6 { left: var(--fz6, 0px); }
.lt .fz-7 { left: var(--fz7, 0px); }
.lt .col-field { max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 検出した行だけは省略せずに折り返して全文を出す (列の幅は変えず、行を高くする) */
.lt tr.detected .col-field { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.lt .col-jan { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; white-space: nowrap; }
.lt .col-status { font-size: 12px; white-space: nowrap; }
.lt tr[data-kind="target"] td:first-child { box-shadow: inset 4px 0 0 var(--hl); }
.lt tr.detected td { background: var(--info-bg); }
.lt tr.checked td { color: var(--muted); }
.lt tr.focused td { background: var(--warn-bg); }
.lt tr.empty td { padding: 16px; color: var(--muted); text-align: center; }
.lt-check { display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 36px; cursor: pointer; }
.lt-check input { width: 24px; height: 24px; margin: 0; }
.lt-qty { display: flex; align-items: center; gap: 2px; }
.lt-qty button { min-width: 36px; min-height: 36px; padding: 0; font-size: 18px; font-weight: 700; }
.lt-qty input {
  width: 3.2em; min-height: 36px; padding: 0 2px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.lt-qty input::-webkit-outer-spin-button, .lt-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* リストの列の設定ダイアログ */
.col-table { width: 100%; margin: 8px 0; border-collapse: collapse; }
.col-table th, .col-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.col-table th:not(:first-child), .col-table td:not(:first-child) { width: 4.5em; text-align: center; }
.col-table input { width: 22px; height: 22px; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 30;
  max-width: 90vw; padding: 10px 16px; border-radius: 8px;
  transform: translateX(-50%); background: rgba(0, 0, 0, 0.85); color: #fff;
}

/* ---- 映像上の枠とポップアップ ---- */
.overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
[data-color="red"] { --hl: #e53935; --hl-ink: #fff; --hl-fill: rgba(229, 57, 53, 0.30); }
[data-color="orange"] { --hl: #fb8c00; --hl-ink: #fff; --hl-fill: rgba(251, 140, 0, 0.30); }
[data-color="yellow"] { --hl: #fdd835; --hl-ink: #222; --hl-fill: rgba(253, 216, 53, 0.32); }
[data-color="green"] { --hl: #43a047; --hl-ink: #fff; --hl-fill: rgba(67, 160, 71, 0.30); }
[data-color="blue"] { --hl: #1e88e5; --hl-ink: #fff; --hl-fill: rgba(30, 136, 229, 0.30); }

.ov-box {
  position: absolute; left: 0; top: 0;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  transition: opacity 0.3s;
}
.ov-box[data-kind="unregistered"] { border-style: dashed; border-color: rgba(220, 220, 220, 0.9); }
.ov-box[data-kind="target"] { border: 3px solid var(--hl); }
.hl-border .ov-box[data-kind="target"] { border-width: 7px; }
.hl-bg .ov-box[data-kind="target"] { background: var(--hl-fill); }
/* 「対象」ラベル: 枠は回るが、ラベルは回さずに枠の一番上の角の上に置く (位置は overlay.js) */
.ov-tag { display: none; }
.hl-label .ov-tag[data-kind="target"] {
  display: block; position: absolute; left: 0; top: 0;
  padding: 1px 10px; border-radius: 4px;
  background: var(--hl); color: var(--hl-ink);
  font-weight: 800; font-size: 15px; white-space: nowrap;
  transition: opacity 0.3s;
}

.ov-popup {
  position: absolute; left: 0; top: 0;
  max-width: min(280px, 70%);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: #1c1f24;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: opacity 0.3s;
}
.ov-popup[data-kind="target"] { border: 3px solid var(--hl); }
.ov-popup[data-kind="unregistered"] { background: rgba(240, 240, 240, 0.92); }
.pp-status { font-weight: 800; margin-bottom: 2px; }
.hl-label .ov-popup[data-kind="target"] .pp-status {
  margin: -6px -10px 4px; padding: 2px 10px;
  background: var(--hl); color: var(--hl-ink);
  border-radius: 4px 4px 0 0;
}
.pp-row { overflow-wrap: anywhere; }
.pp-k { color: #5f6670; }
.ov-box.focused { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 0 6px rgba(0, 0, 0, 0.55); }
.ov-box.dim, .ov-tag.dim, .ov-popup.dim, .ov-line.dim { opacity: 0.6; }
.ov-box.stale, .ov-tag.stale, .ov-popup.stale, .ov-line.stale { opacity: 0.35; }

/* popupMode 'center' で、中央から外れたもののポップアップと線は出さない */
.ov-popup.off, .ov-line.off { display: none; }
/* 映像の切れた部分 (画面外) にあるもの */
.ov-box.outside, .ov-tag.outside, .ov-popup.outside, .ov-line.outside { display: none !important; }

/* 画面中央の照準 (ポップアップを出すものを選ぶ基準) */
.reticle {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0.85;
}
.reticle::before, .reticle::after {
  content: ""; position: absolute; background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.reticle::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.reticle::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }

/* 枠とポップアップを結ぶ引き出し線 */
.ov-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ov-line.hidden { display: none; }
.ov-line line.under { stroke: rgba(0, 0, 0, 0.6); stroke-width: 5; stroke-linecap: round; }
.ov-line line.over { stroke: rgba(255, 255, 255, 0.95); stroke-width: 2.5; stroke-linecap: round; }
.ov-line circle { fill: rgba(255, 255, 255, 0.95); stroke: rgba(0, 0, 0, 0.6); stroke-width: 1.5; }
.ov-line[data-kind="target"] line.over { stroke: var(--hl); stroke-width: 3.5; }
.ov-line[data-kind="target"] circle { fill: var(--hl); }
.ov-line[data-kind="unregistered"] line.over { stroke: rgba(220, 220, 220, 0.9); stroke-dasharray: 6 4; }

/* CSV なしの読み取りモードでは、CSV に関わる設定を隠す */
body[data-scan-only] .csv-only { display: none !important; }

/* ---- ダイアログ ---- */
dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 16px 18px;
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.field-list { max-height: 50vh; overflow-y: auto; }
.tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.tabs button { flex: 1; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.item-list { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow-y: auto; border-top: 1px solid var(--line); }
.item-list li { padding: 6px 2px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 2px 12px; }
.item-list .desc { color: var(--muted); }