/* 現場でスマホを手袋で触る前提。文字は大きめ、タップ領域は 48px 以上を確保する。 */
:root {
  --bg: #ffffff;
  --fg: #111827;
  --muted: #6b7280;
  --line: #d1d5db;
  --bar: #1f2937;
  --bar-fg: #ffffff;
  --accent: #1d4ed8;
  --row-alt: #f6f7f9;
  --warm: #b45309;
  --tap: 48px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115; --fg: #e5e7eb; --muted: #9ca3af; --line: #374151;
    --bar: #111827; --bar-fg: #f9fafb; --accent: #60a5fa;
    --row-alt: #161a21; --warm: #fbbf24;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* hidden 属性を必ず効かせる。下の .loading/.sheet は display:flex を持つため、
   これが無いと「隠したつもりで出たまま」になる(2026-07-31 に実機で発覚)。 */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 17px; line-height: 1.5;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 上部バー */
#bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  background: var(--bar); color: var(--bar-fg);
  padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
  min-height: var(--tap);
}
#bar h1 { flex: 1; margin: 0; font-size: 18px; font-weight: 600; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.ghost {
  background: transparent; color: var(--bar-fg); border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px; min-height: 40px; padding: 0 14px; font-size: 16px;
}
.ghost:active { background: rgba(255,255,255,.15); }

.view { padding: 12px; }

/* ログイン */
.card { max-width: 460px; margin: 24px auto; padding: 20px;
        border: 1px solid var(--line); border-radius: 12px; }
.card h2 { margin: 0 0 8px; font-size: 20px; }
.lead { color: var(--muted); margin: 0 0 16px; }
#login-form { display: flex; flex-direction: column; gap: 12px; }
input[type=email], input[type=search] {
  width: 100%; min-height: var(--tap); padding: 0 14px; font-size: 17px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--fg);
}
.primary {
  min-height: var(--tap); border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 17px; font-weight: 600;
}
.primary:disabled { opacity: .5; }
.msg { margin: 14px 0 0; padding: 12px; border-radius: 8px;
       background: var(--row-alt); color: var(--fg); }
.msg.error { color: #b91c1c; }
@media (prefers-color-scheme: dark) { .msg.error { color: #fca5a5; } }

/* 検索・件数 */
.search-wrap { position: sticky; top: 0; z-index: 10; background: var(--bg);
               padding-bottom: 10px; }
.count, .head { color: var(--muted); margin: 0 0 10px; font-size: 15px; }
.head { font-size: 16px; color: var(--fg); font-weight: 600; }

/* 一覧 */
.list { list-style: none; margin: 0; padding: 0; }
.list li { border-bottom: 1px solid var(--line); }
.list button {
  display: block; width: 100%; text-align: left;
  min-height: 56px; padding: 12px 14px;
  background: transparent; border: 0; color: inherit; font-size: 17px;
}
.list button:active { background: var(--row-alt); }
.list .code { font-weight: 700; font-size: 18px; }
.list .sub { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.list .badge { float: right; color: var(--muted); font-size: 14px; }

/* 工程はボタンを大きく並べる。工程名(「コモンプレート･アイドル」等)が入るので
   幅は広めに取り、名前は折り返して全部見せる。 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px; list-style: none; margin: 0; padding: 0; }
.grid li { border: 0; }
.grid button {
  width: 100%; min-height: 84px; padding: 10px 8px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: inherit; font-size: 24px; font-weight: 700;
}
.grid button:active { background: var(--row-alt); }
.grid .kname { display: block; font-size: 14px; font-weight: 400; color: var(--fg);
               margin-top: 6px; line-height: 1.3; word-break: break-word; }
.grid .kparts { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }

/* 部品の表。列が多いので横スクロールで全部見せる(2026-08-01 利用者判断)。
   スマホでは部品名まで見えていれば横に振れるので、幅を詰めすぎない。 */
/* ★ 表の外枠に高さの上限を付ける(2026-09-06 社長のご指摘「一番下までしないと横に
   スクロールしない」)。上限が無いと外枠がページと一緒に縦へ伸び、横スクロールバーが
   表の下端＝ページ最下部にしか付かない。上限を付けると枠の中で縦横に動かせ、
   バーが常に画面内に出る。見出し行の貼り付け(th の position: sticky)はそのまま効く。 */
.table-wrap { overflow: auto; max-height: calc(100vh - 260px); min-height: 240px;
              -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* 計算値の重量に添える印。紙の実測値と混ぜて読ませないための区別(2026-09-06) */
.wcalc { font-size: 10px; color: var(--muted); margin-left: 3px; vertical-align: super; }
/* 各列の由来の印「材／発／納／手」(2026-09-18・社長のご指示 09-17「各列に印をつけてほしい」)。
   数の欄にも付くので、値の読みを邪魔しないよう枠を付けず小さく添える(.wcalc と同じ強さ)。
   材質・寸法の .vsrc より控えめ — あちらは欄に 1 つだけ、こちらは全列に付く */
.csrc { font-size: 10px; color: var(--muted); margin-left: 3px; vertical-align: super; }
/* 納品の記録の伝票に添える紙の書類種別(2026-09-19・社長のご指示「様式名を画面に出す」)。
   伝票番号や明細件数と同じ控えめさにする — 金額より目立たせない */
.dt { font-size: 12px; color: var(--muted); margin-left: 6px; }
/* 納品の記録の見出しに添える種別の内訳(2026-09-19)。見出しより弱く、伝票の行と同じ強さ */
.dts { font-size: 12px; color: var(--muted); margin-left: 8px; font-weight: 400; }
/* 部品行に出す紙の種別(2026-09-19・社長のご指示「様式名を画面に出す」「部品単位で」)。
   入荷日の欄に行あたり1回。値そのものなので、印(.npaper)より弱く、日付より目立たせない */
.ptype { display: inline-block; font-size: 11px; color: var(--muted); margin-left: 6px;
         white-space: nowrap; }
/* 入荷日が空でも納品書が在ることの印(2026-09-06 社長のご指摘)。★ 断定しない色にする —
   「未入荷」の警告色と並ぶので、同じ強さにすると現場がどちらを信じるか迷う */
.npaper { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 3px;
          font-size: 10px; color: var(--muted); border: 1px solid var(--line); }
table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 10px 8px; text-align: left; vertical-align: top;
         border-bottom: 1px solid var(--line); white-space: nowrap; }
th { position: sticky; top: 0; background: var(--bg); font-size: 14px;
     color: var(--muted); z-index: 5; }
tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr:active { background: var(--row-alt); }
.c-no { width: 40px; color: var(--muted); }
.c-qty { width: 46px; text-align: right; }
td.c-qty { text-align: right; }
.c-date { color: var(--muted); }
/* 仕上記号は鋼材にしか付かないので寸法と同じ欄に添える(2026-08-01 利用者判断) */
.finish { color: var(--warm); font-weight: 700; margin-left: 6px; }

/* 材料表の中の絞り込み(材質・手配先・語) */
.pfilter { margin: 0 0 10px; }
.pfilter input[type=search] { margin-bottom: 8px; }
.pfilter-row { display: flex; gap: 8px; }
.pfilter select {
  flex: 1; min-width: 0; min-height: var(--tap); padding: 0 10px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--fg);
}
.pfilter .count { margin: 8px 0 0; }

/* 納品の記録(型番単位・納品書スキャン由来)。金額を含むので現場向けではない */
.delivery { margin: 0 0 12px; padding: 10px 12px;
            border: 1px solid var(--line); border-radius: 10px; }
.delivery-head { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--fg); }
.delivery-list { list-style: none; margin: 0; padding: 0; }
.delivery-list li { padding: 6px 0; font-size: 15px; border-top: 1px solid var(--line); }
.delivery-list li:first-child { border-top: 0; }
.delivery-list .dv, .delivery-list .dn,
.delivery-list .amt, .delivery-list .lc, .delivery-list .kc { margin-left: 10px; }
.delivery-list .dn, .delivery-list .lc { color: var(--muted); font-size: 14px; }
/* 1枚の納品書が複数の型番に載っている印。金額がその型番だけの額でないことを示す */
.delivery-list .kc { font-size: 13px; color: var(--muted);
                     border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.delivery-list .amt { font-weight: 600; }
/* 金額を読み取れていない行。金額そのものより目立たせない(2026-08-24)。 */
.delivery-list .amt-none { margin-left: 10px; font-size: 13px; color: var(--muted); }
/* 請求書と照合していない参考値の印。訂正の印と同じ大きさに揃える */
.delivery-list .ref { margin-left: 3px; font-size: 12px; vertical-align: super;
                      color: var(--muted); }
.delivery-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* 版の履歴 */
.vernav { margin: 0 0 10px; }
.linklike { background: transparent; border: 0; color: var(--accent); font-size: 16px;
            padding: 8px 0; min-height: var(--tap); text-align: left; }
.hhead { font-size: 15px; color: var(--muted); margin: 18px 0 8px;
         padding-top: 14px; border-top: 1px solid var(--line); }
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.hver { display: inline-block; color: var(--muted); font-size: 14px; margin-right: 8px; }
.hbody { word-break: break-word; }
.hnote { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
/* 備考だけは長くなるので折り返して幅を抑える */
.c-remarks { white-space: normal; max-width: 220px; }
.pname { font-weight: 600; }
.mark { color: var(--warm); font-weight: 700; margin-left: 4px; }
/* 材料表の値のままの印「材」（2026-09-13 社長のご指示「何由来の値か材料表に印を付けて下さい」）。
   発注書・納品書・人の訂正（.fix）より控えめにする */
.vsrc { color: var(--muted); border: 1px solid var(--line); border-radius: 4px;
        font-size: 11px; margin-left: 4px; padding: 0 3px; white-space: nowrap; }
/* 訂正済みの印。焼入れ等の印(--warm)と混ざらないよう別の色で、枠を付けて区別する */
.fix { color: var(--accent); border: 1px solid var(--accent); border-radius: 4px;
       font-size: 12px; font-weight: 700; margin-left: 4px; padding: 0 3px;
       white-space: nowrap; }
/* 詳細シートで併記する「材料表に書かれていた元の値」と、その根拠 */
.orig { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.orig-src { color: var(--muted); font-size: 13px; word-break: break-all; }

/* 詳細シート */
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.45);
         display: flex; align-items: flex-end; }
.sheet-inner { width: 100%; max-height: 88vh; overflow-y: auto;
               background: var(--bg); border-radius: 16px 16px 0 0; padding: 0 16px 24px; }
.sheet-bar { position: sticky; top: 0; background: var(--bg);
             display: flex; align-items: center; gap: 10px;
             padding: 14px 0; border-bottom: 1px solid var(--line); }
.sheet-bar strong { flex: 1; font-size: 17px; }
.sheet .ghost { color: var(--fg); border-color: var(--line); }
#detail-body { margin: 0; }
#detail-body div { display: flex; gap: 12px; padding: 10px 0;
                   border-bottom: 1px solid var(--line); }
#detail-body dt { flex: 0 0 88px; color: var(--muted); font-size: 15px; margin: 0; }
#detail-body dd { flex: 1; margin: 0; font-size: 16px; word-break: break-word; }

.loading { position: fixed; inset: 0; z-index: 40; display: flex;
           align-items: center; justify-content: center; background: rgba(0,0,0,.35); }
.loading span { background: var(--bg); color: var(--fg);
                padding: 14px 20px; border-radius: 10px; font-size: 16px; }

/* 型番単位の納品金額の要約。部品表の【外】に出す(表の中に混ぜると部品1行の額と
   読まれる。2026-08-24 の設計融合で3モデル全員一致の結論)。控えめにする。 */
.kataban-amount { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.kataban-amount:empty { display: none; }

/* 値の出所と空欄の意味の印。値の脇に小さく添える(列は増やさない)。
   ★ ambiguous(確)だけは人の確認が要るので目立たせる。他は控えめにする。
   ★★ クラスは【印の意味】で当てる(markClass)。出所で当てていた頃は、
      同じ「確」が欄によって別の見た目になっていた。 */
.jmark { margin-left: 4px; font-size: 11px; font-weight: 700; vertical-align: super;
         color: var(--muted); }
.jm-jisseki { color: var(--ok, #4ade80); }
.jm-ambiguous { color: var(--warm, #fbbf24); font-size: 12px; }
.jm-jisseki_nashi { color: var(--muted); font-size: 10px; vertical-align: baseline; }
/* 紙には書いてあるが実績が未着。★ 欠落ではないので警告色にしない(甲のご裁定)。 */
.jm-mishaku { color: var(--muted); font-size: 10px; vertical-align: baseline; }
.jisseki-note { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.jisseki-note:empty { display: none; }

/* ★ 「合っているか」の判定(殿のご下命 2026-08-23 の核心)。表の中に1列だけ置く。
   ★ 未照合の行にも【必ず何かを描く】。空欄だと「合っている」と読まれるため。
     ただし最も控えめにして、確かめるべき行が沈まないようにする。 */
.c-shogo { width: 76px; white-space: nowrap; }
.shogo { display: inline-block; font-size: 11px; font-weight: 700;
         border: 1px solid transparent; border-radius: 4px; padding: 1px 4px; }
.s-shogo_zumi  { color: #166534; border-color: #166534; }   /* 発注と入荷が揃った */
.s-mi_nyuka    { color: var(--warm); border-color: var(--warm); }   /* 督促の対象 */
.s-hachu_nashi { color: var(--accent); border-color: var(--accent); } /* 確かめる */
.s-kakunin     { color: #b91c1c; border-color: #b91c1c; }   /* 食い違う。人が要る */
.s-mi_shogo    { color: var(--muted); font-weight: 400; }   /* まだ判定できない */
.shogo-note { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.shogo-note:empty { display: none; }
@media (prefers-color-scheme: dark) {
  .s-shogo_zumi { color: #4ade80; border-color: #4ade80; }
  .s-kakunin { color: #f87171; border-color: #f87171; }
}