/* ══════════════════════════════════════════════════════════════════
   加工原価 閲覧版 — スタイル

   配色は注文管理スマホ版（web/order/css/app.css）と同じ。明るいグレー
   （わずかに緑と黄を混ぜた色）を地に、オレンジをアクセントにしている。
   オレンジの面には白文字を載せるので --accent は白が読める濃さ、明るい地の
   上のオレンジ文字はさらに濃い --accent-ink を使う。

   表の作りは machine_cost_gui.py の「抽出（絞り込み）」タブに合わせ、
   1行＝1組み合わせで数字を横に並べる。
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:        #e4e6dc;
  --bg-mid:    #f1f2ea;
  --bg-light:  #fafbf6;
  --bg-head:   #e9ebe1;
  --line:      #a3a893;
  --line-soft: #c9cdbc;
  --fg:        #23261f;
  --fg-dim:    #505446;
  --accent:    #B84A00;
  --accent-ink:#933A00;
  --accent-bg: #f6e3d3;       /* 原価列の地。オレンジをごく淡くしたもの */
  --on-accent: #ffffff;
  --red:       #b0231a;
  --green:     #255c22;
  --tap:       44px;
  --safe-b:    env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg); color:var(--fg);
  font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",sans-serif;
  font-size:16px; overscroll-behavior-y:none;
}
button,select,input{ font-family:inherit; color:inherit; font-size:inherit; }
.hidden{ display:none !important; }
.spacer{ flex:1; }

/* ── 共通ボタン ───────────────────────────────────────────────── */
.btn{
  min-height:var(--tap); padding:0 14px;
  background:var(--bg-light); border:1px solid var(--line); color:var(--fg);
  cursor:pointer; border-radius:4px;
}
.btn:active{ background:var(--accent); color:var(--on-accent); }
.btn.primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
.btn.ghost{ background:transparent; }
.btn.sm{ min-height:34px; padding:0 10px; font-size:14px; }
.btn:disabled{ opacity:.45; }
.btn[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* ══════════════════════════════════════════════════════════════
   ログイン（注文管理スマホ版と同じ見た目）
   ══════════════════════════════════════════════════════════════ */
#login{
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; padding:24px 16px;
}
#login h1{ font-size:28px; font-weight:600; margin:0; letter-spacing:.08em; }
#login .card{
  width:100%; max-width:380px; background:var(--bg-mid);
  border:1px solid var(--line); border-radius:6px; padding:22px 18px;
  display:flex; flex-direction:column; gap:14px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:14px; color:var(--fg-dim); }
.field input{
  min-height:var(--tap);
  background:var(--bg-light); border:1px solid var(--line); color:var(--fg);
  padding:8px 10px; border-radius:4px; width:100%;
}
.field input:focus{ outline:none; border-color:var(--accent); }
#login .field input{ height:52px; font-size:22px; text-align:center; letter-spacing:.2em; }
.msg{
  min-height:20px; font-size:14px; color:var(--red); text-align:center;
  white-space:pre-line; line-height:1.6;
}
#login .hint{ font-size:12px; color:var(--fg-dim); text-align:center; line-height:1.6; }

/* ══════════════════════════════════════════════════════════════
   アプリ枠
   ══════════════════════════════════════════════════════════════ */
#app{ height:100dvh; display:flex; flex-direction:column; }

header{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top,0px));
  background:var(--accent); border-bottom:1px solid var(--accent-ink);
  color:var(--on-accent);
}
header .title{ font-size:18px; font-weight:600; }
header .who{ font-size:13px; opacity:.9; max-width:9em;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
header .btn.ghost{ color:var(--on-accent); border-color:rgba(255,255,255,.6); }
header .btn.ghost:active{ background:var(--accent-ink); }

/* 表だけを中でスクロールさせ、絞り込みの段は常に見えているようにする */
main{
  flex:1; min-height:0; display:flex; flex-direction:column;
  padding:10px 12px calc(10px + var(--safe-b));
}

.toolbar{ display:flex; align-items:center; gap:8px; margin-bottom:8px; flex:0 0 auto; }
.toolbar .lbl{ font-size:14px; color:var(--fg-dim); white-space:nowrap; }
.toolbar select{
  min-height:40px; min-width:0; flex:1;
  background:var(--bg-light); border:1px solid var(--line);
  padding:6px 10px; border-radius:4px;
}
.toolbar.info{ font-size:13px; color:var(--fg-dim); }
.toolbar.info #count{ font-variant-numeric:tabular-nums; }

/* 絞り込みボタン。GUI の「厚み: [▼]」の並びを、押しやすい大きさにしたもの */
.filters{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.fbtn{
  min-height:48px; padding:4px 8px; text-align:left; cursor:pointer;
  background:var(--bg-light); border:1px solid var(--line); border-radius:4px;
  display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0;
}
.fbtn .k{ font-size:11px; color:var(--fg-dim); }
.fbtn .v{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fbtn.on{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.fbtn.on .v{ color:var(--accent-ink); font-weight:600; }

/* ══════════════════════════════════════════════════════════════
   結果の表
   ══════════════════════════════════════════════════════════════ */
#result{ flex:1; min-height:0; display:flex; flex-direction:column; }
.tbl-wrap{
  flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch;
  background:var(--bg-light); border:1px solid var(--line); border-radius:4px;
}
table.cost{
  border-collapse:separate; border-spacing:0;
  min-width:100%; font-size:13px; font-variant-numeric:tabular-nums;
}
table.cost th, table.cost td{
  padding:5px 7px; white-space:nowrap; text-align:right;
  border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft);
}
/* 見出しは縦に送っても上に貼り付く */
table.cost thead th{
  position:sticky; top:0; z-index:2;
  background:var(--bg-head); color:var(--fg-dim); font-weight:600; font-size:12px;
  text-align:center; cursor:pointer; user-select:none;
  border-bottom:1px solid var(--line);
}
table.cost thead th .arrow{ color:var(--accent-ink); margin-left:2px; }
/* 条件の列は横に送っても左に貼り付く（何の行か見失わないように） */
table.cost .cond{ position:sticky; left:0; z-index:1; background:var(--bg-mid);
                  text-align:left; color:var(--fg); }
table.cost thead th.cond{ z-index:3; background:var(--bg-head); text-align:center; }
table.cost tbody tr:nth-child(even) td{ background:#f4f5ee; }
table.cost tbody tr:nth-child(even) td.cond{ background:#eaece2; }
/* 原価は内訳を足した結果なので目立たせる（内訳の右端＝区切り） */
table.cost td.c-cost{ background:var(--accent-bg) !important; font-weight:600; }
table.cost th.c-cost{ color:var(--accent-ink); }
table.cost .c-margin.neg{ color:var(--red); }
table.cost .bd{ color:var(--fg-dim); }

/* 条件: 狭い画面は「t6 × 1500 × φ300」の1列、広い画面は GUI と同じ3列 */
table.cost .cond3{ display:none; }
/* 内訳3列は、狭い画面では「内訳」ボタンで開いたときだけ出す */
table.cost .bd{ display:none; }
body.bd-open table.cost .bd{ display:table-cell; }

.more{ flex:0 0 auto; margin-top:8px; width:100%; }
.note{ color:var(--fg-dim); font-size:13px; line-height:1.6; }
.empty,.loading{ color:var(--fg-dim); text-align:center; padding:40px 12px; font-size:15px; }
.error{ color:var(--red); padding:14px; border:1px solid #d08a80; white-space:pre-line;
        background:#f3cdc6; border-radius:4px; font-size:14px; line-height:1.6; }

/* 横持ちのスマホ・タブレット・PC は全列を最初から出す */
@media (min-width:700px){
  main{ padding-left:20px; padding-right:20px; }
  .filters{ grid-template-columns:repeat(3,minmax(0,220px)); }
  table.cost{ font-size:14px; }
  table.cost .cond1{ display:none; }
  table.cost .cond3{ display:table-cell; }
  /* 3列になった条件は、左2列ぶんを貼り付けると表示幅を食うので先頭の厚みだけ固定 */
  table.cost .cond3:not(.first){ position:static; }
  table.cost .bd{ display:table-cell; }
  #btn-bd{ display:none; }
}

/* ══════════════════════════════════════════════════════════════
   絞り込みの選択シート
   ══════════════════════════════════════════════════════════════ */
#sheet{
  position:fixed; inset:0; z-index:50; background:var(--bg);
  display:flex; flex-direction:column;
}
.sheet-head{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:var(--bg-mid); border-bottom:1px solid var(--line);
  font-size:16px; font-weight:600;
}
.sheet-body{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:12px; }
.sheet-foot{
  display:flex; gap:8px; padding:10px 12px calc(10px + var(--safe-b));
  background:var(--bg-mid); border-top:1px solid var(--line);
}
.sheet-foot .btn{ flex:1; }
.chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:6px; }
.chip{
  min-height:40px; padding:6px 8px; border:1px solid var(--line); border-radius:4px;
  background:var(--bg-light); font-size:14px; cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.chip[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* ══════════════════════════════════════════════════════════════
   通知
   ══════════════════════════════════════════════════════════════ */
#toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 20px); z-index:60;
  max-width:88vw; padding:11px 16px; border-radius:20px;
  background:#f3cdc6; border:1px solid #d08a80; color:var(--red);
  font-size:14px; line-height:1.5; text-align:center;
  box-shadow:0 4px 16px rgba(40,44,30,.25);
}