/* =====================================================================
   MESSEL for 美容発注 — 共通デザイン（2026-09-25 リデザイン。MESSEL for 就労B = kouchin-daicho v3.1〜v3.2 準拠）
   ・トークンは kouchin-daicho public/index.html の :root と同じ値
   ・旧トークン名（--gold / --mute / --paper / --red など）は各ページのインライン style と JS が参照するので、
     新トークンへの別名として残す。業務上の意味を持つ色（--nes / --tat / 状態の --st-*）は値を変えない
   ・グラデ（--grad）は主ボタン・選択中のナビ・ワードマーク・ロゴだけ
===================================================================== */
:root {
  --b1: #2f9bff; --b2: #1fc8b6; --grad: linear-gradient(135deg, var(--b1), var(--b2));
  --brand: #1f8ff0; --brand-ink: #1466c2; --brand-soft: #e9f4ff; --teal-soft: #e3f8f4;
  --ink: #16202c; --txt: #1e2b3c; --muted: #556678; --faint: #8794a6;
  --bg: #f3f6fa; --panel: #fff; --line: #e3e9f1; --line2: #cbd6e3;
  --side: #141d33; --side2: #1a2745; --side-txt: #b7c3d6; --side-dim: #7d8ca6;
  --ok: #158a52; --ok-soft: #e5f6ec; --ok-line: #a9dfbf;
  --warn: #b3580a; --warn-soft: #fff6e6; --warn-line: #f3cf8f;
  --bad: #c93a3a; --bad-soft: #fdeeee; --bad-line: #f0c2c2;
  --pop: #ff6f61; --r: 14px; --r-sm: 9px;
  --shadow: 0 1px 2px rgba(20,35,60,.04), 0 6px 18px -10px rgba(20,35,60,.10);
  --shadow-lg: 0 20px 60px -20px rgba(20,35,60,.35);
  --side-w: 224px; --hf-accent: #1466c2;
  /* 旧トークン名の別名（インライン style・JS から参照されている） */
  --accent: var(--brand-ink);
  --gold: var(--brand-ink); --gold-dark: #0f559f; --gold-soft: #b8d9f8; --gold-pale: var(--brand-soft);
  --ink-soft: var(--txt); --mute: var(--muted);
  --paper: var(--bg); --paper-warm: #eef3f8; --line-dark: var(--line2);
  --red: var(--bad); --red-pale: var(--bad-soft); --green: var(--ok); --green-pale: var(--ok-soft);
  --blue: var(--brand-ink); --blue-pale: var(--brand-soft); --orange: var(--warn); --orange-pale: var(--warn-soft);
  --side-text: var(--side-txt); --side-line: rgba(255,255,255,.08);
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "Yu Gothic UI", "Yu Gothic", sans-serif;
  /* 業務上の意味を持つ色（変更しない）: 仕入先 NES/TAT */
  --nes: #7c3aed; --nes-pale: #efe7fd; --tat: #0e7490; --tat-pale: #e0f5f9;
  /* 状態の色（申請中＝青・発注済＝金・納品済＝緑・受け取り済＝深緑・取消＝灰）。一覧はどの画面でもこの色で塗る（2026-09-16 真弥さん指示）。値は変えない */
  --st-req: #2563eb; --st-req-bg: #f1f6ff; --st-ord: #a87e22; --st-ord-bg: #fdf4de; --st-del: #2e7048; --st-del-bg: #e8f4ec; --st-recv: #1f5636; --st-recv-bg: #f1f7f3; --st-cart: #c2570c; --st-cart-bg: #fff1e3; --st-cxl: #8b8378; --st-cxl-bg: #f3f0e9;
  /* 月別推移グラフ（admin の SVG と凡例） */
  --series-1: #2a78d6; --series-2: #eb6834;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); background: var(--bg); color: var(--txt); display: flex; min-height: 100vh; font-size: 15px; line-height: 1.6; }
::selection { background: rgba(47,155,255,.22); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
a { color: var(--brand-ink); }
b, strong { color: var(--ink); }

/* ===== シェル（サイドバー・上部バー・本文） ===== */
.side { position: sticky; top: 0; height: 100vh; width: var(--side-w); min-width: var(--side-w); flex: none; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--side) 0%, var(--side2) 100%); color: var(--side-txt); padding: 14px 10px 12px; overflow: auto; z-index: 50; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.side:empty { padding: 0; }
.side .brand { padding: 2px 8px 12px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.side .lockup { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; }
.side .mslogo { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.wordmark { font-family: "Montserrat", "Hiragino Sans", "Meiryo", sans-serif; font-weight: 800; letter-spacing: .06em; line-height: 1; background: linear-gradient(90deg, #2f9bff, #1fc8b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.side .wordmark { font-size: 21px; }
.side .brandsub { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.side .brandsub small { font-size: 12.5px; font-weight: 700; color: #e6edf7; letter-spacing: .02em; white-space: nowrap; }
/* 社内システムの切替（common.js appSwitcher。承認されているシステムだけ 2 列で並ぶ） */
.appSwitch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 2px 12px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.appSwitch a { text-align: center; font-size: 12px; font-weight: 600; padding: 5px 4px; border: 1px solid rgba(255,255,255,.10); border-radius: 7px; color: #c9d4e4; text-decoration: none; background: rgba(255,255,255,.05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .15s; }
.appSwitch a:hover { background: rgba(255,255,255,.12); color: #fff; }
.appSwitch a.cur { background: var(--brand); color: #fff; border-color: transparent; font-weight: 700; }
.sideNav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.navGroup { font-size: 11.5px; color: var(--side-dim); margin: 12px 10px 4px; letter-spacing: .12em; font-weight: 700; }
.sideNav .navGroup:first-child { margin-top: 2px; }
.sideNav a, .sideNav button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 9px; color: var(--side-txt); font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none; border: none; background: none; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; }
.sideNav .ico { display: inline-flex; width: 18px; height: 18px; flex: none; opacity: .75; }
.sideNav .ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sideNav a:hover, .sideNav button:hover { background: rgba(255,255,255,.08); color: #fff; }
.sideNav a:hover .ico, .sideNav button:hover .ico { opacity: 1; }
.sideNav a.active, .sideNav button.active { background: var(--grad); color: #fff; font-weight: 700; box-shadow: 0 8px 18px -8px rgba(47,155,255,.8); }
.sideNav a.active .ico, .sideNav button.active .ico { opacity: 1; }
.sideNav .cnt { margin-left: auto; background: var(--pop); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; line-height: 1.4; }
.sideNav .cnt:empty { display: none; }
.sideUser { margin-top: 10px; padding: 12px 8px 4px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 9px; }
.sideUser img { width: 28px; height: 28px; border-radius: 50%; background: #fff; flex: none; }
.sideUser > div { min-width: 0; }
.sideUser .un { font-size: 13px; font-weight: 600; color: #e6edf7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sideUser a { display: inline-block; font-size: 12px; color: var(--side-dim); text-decoration: none; }
.sideUser a:hover { color: #fff; text-decoration: underline; }
.sideFoot { padding: 6px 8px 0; font-size: 11.5px; color: var(--side-dim); line-height: 1.5; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 40; min-height: 58px; background: rgba(255,255,255,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding: 10px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pageTitle { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.topRight { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.content { padding: 20px 24px 40px; flex: 1; width: 100%; max-width: 1560px; }

/* 900px 以下: サイドバーを上に畳み（横並び・ナビはチップ・アイコン非表示）→ 上部バー → 本文（就労B と同じ）。
   以前はサイドバーを消していて、スマホからは他の画面へ移れなかった。印刷（A4 幅は 900px 未満）には効かせない */
@media screen and (max-width: 900px) {
  body { flex-direction: column; }
  .side { position: static; height: auto; width: 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 12px 12px; background: var(--side); overflow: visible; }
  .side .brand { width: 100%; display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; margin-bottom: 6px; }
  .side .brandsub { margin-top: 0; }
  .side .appSwitch { width: 100%; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); padding-bottom: 10px; margin-bottom: 6px; }
  .sideNav { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .navGroup { width: 100%; margin: 6px 6px 2px; }
  .sideNav .navGroup:first-child { margin-top: 0; }
  .sideNav a, .sideNav button { width: auto; padding: 7px 12px; font-size: 13.5px; background: rgba(255,255,255,.06); border-radius: 999px; }
  .sideNav .ico { display: none; }
  .sideUser { width: 100%; margin-top: 8px; padding: 8px 4px 0; }
  .sideUser > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .sideFoot { width: 100%; padding: 2px 4px 0; }
  .topbar { position: static; background: #fff; padding: 8px 14px; gap: 8px 10px; }
  .pageTitle { font-size: 15.5px; }
  .topRight { margin-left: 0; width: 100%; }
  .content { padding: 14px 12px 32px; }
  /* 幅の広い業務表はカードの中で横スクロールさせる（ページ全体を横に揺らさない） */
  .content .card, .content .sheet { overflow-x: auto; }
}

/* ===== コンポーネント ===== */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow); min-width: 0; }
.card h2 { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 9px; letter-spacing: .01em; }
.card h2::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--brand); flex: none; }
.card[style*="text-align:center"] h2 { justify-content: center; }
.card h2 small { font-weight: normal; color: var(--muted); font-size: 12.5px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
input, select, textarea, button { font-family: inherit; font-size: 14px; }
input[type=text], input[type=number], input[type=email], input[type=month], input[type=search], input[type=url], input[type=password], input[type=tel], input[type=date], select, textarea { border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 8px 11px; background: #fff; color: var(--txt); font-weight: 400; transition: border-color .15s, box-shadow .15s; max-width: 100%; }
input:hover, select:hover, textarea:hover { border-color: #aebdd0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--b1); box-shadow: 0 0 0 3px rgba(47,155,255,.18); }
input:disabled, select:disabled, textarea:disabled, input[readonly] { background: #f3f6fa; color: var(--muted); }
input[type=number] { font-variant-numeric: tabular-nums; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
input::placeholder, textarea::placeholder { color: var(--faint); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; padding: 8px 15px; border: 1px solid var(--line2); background: #fff; color: var(--txt); border-radius: var(--r-sm); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s, color .15s; }
.btn:hover { background: #f4f8fc; border-color: #b3c2d4; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -8px rgba(47,155,255,.9); }
.btn.primary:hover { background: var(--grad); filter: saturate(1.08) brightness(1.04); box-shadow: 0 8px 20px -8px rgba(47,155,255,1); }
.btn.danger { color: var(--bad); border-color: var(--bad-line); }
.btn.danger:hover { background: var(--bad-soft); border-color: #e6a5a5; }
.btn.sm { padding: 4px 10px; font-size: 12.5px; font-weight: 600; border-radius: 6px; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.badge.nes { background: var(--nes-pale); color: var(--nes); }
.badge.tat { background: var(--tat-pale); color: var(--tat); }
.badge.free { background: var(--warn-soft); color: var(--warn); }
.badge.requested { background: var(--brand-soft); color: var(--brand-ink); }
.badge.ordered { background: var(--st-ord-bg); color: #8a6519; }
.badge.carted { background: var(--st-cart-bg); color: var(--st-cart); } /* カート済（TAT・NES のカートに入れた・2026-09-25） */
/* 廃番（先方のカタログから消えた商品・2026-10-04）と、他の仕入先にある同じ商品の案内 */
.badge.disc { background: #f3f0e9; color: #6b6458; border: 1px solid #cfc8bb; margin-right: 6px; }
.badge.oos { background: #fff4e5; color: #b45309; border: 1px solid #f5c98b; margin-right: 6px; } /* 欠品（手動の印） */
.badge.carry { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; margin-right: 6px; } /* 前の月からの持ち越し（2026-10-04） */
select.flagSel { width: auto; font-size: 12px; padding: 2px 4px; }
.altNote { font-size: 12.5px; color: var(--st-cart); margin-top: 3px; line-height: 1.5; }
.altNote.none { color: var(--muted); }
.altNote .altName { color: var(--ink); }
.badge.delivered { background: var(--ok-soft); color: var(--ok); }
.badge.cancelled { background: #eef2f6; color: var(--muted); }
.badge.salon { background: var(--bad-soft); color: var(--bad); }
.badge.school { background: var(--brand-soft); color: var(--brand-ink); }
/* 一覧表: 縦罫線なし・行罫線で読む（就労B の table.tbl と同じ見た目） */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #edf1f6; vertical-align: top; }
th { color: var(--muted); font-size: 12.5px; font-weight: 700; background: #f6f9fc; white-space: nowrap; letter-spacing: .02em; }
:where(tbody tr:hover) > td { background: #f9fbfe; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.dim td { color: var(--muted); }
.muted { color: var(--muted); font-size: 13px; }
.warn { color: var(--warn); font-weight: 600; }
.small { font-size: 13px; }
.code { font-family: Menlo, Consolas, monospace; font-size: 12.5px; color: var(--txt); }
.msg { padding: 9px 12px; border-radius: var(--r-sm); font-size: 13.5px; margin-bottom: 12px; display: none; }
.msg.err { display: block; background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad-line); }
.msg.ok { display: block; background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-line); }
.msg.warn { display: block; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); }
/* 印刷（集金リスト）はリデザイン前の見た目のまま: 画面用に変えた文字・罫線・表の余白を印刷では従来の値に戻す。
   各ページの @media print のルールはそのまま（ここは画面用の変更を印刷に持ち込まないためだけの打ち消し） */
@media print {
  :root { --ink: #221c17; --txt: #221c17; --muted: #8b8378; --line: #e4dfd4; --line2: #cdc5b6; }
  body { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; font-size: 14px; line-height: normal; }
  th, td { padding: 8px; border-bottom: 1px solid #e4dfd4; }
  th { font-size: 11.5px; letter-spacing: 0; }
  .badge { padding: 2px 7px; font-size: 11px; line-height: normal; }
  .muted { font-size: 12px; }
  .small { font-size: 12px; }
}
/* 他社の同一商品の方が安いときの表示。赤字で大きく、見落とさないように（2026-09-06 真弥さん指示） */
.altCheap { margin: 12px 0 0; padding: 12px 16px; border: 2px solid var(--red); border-radius: var(--r-sm); background: var(--red-pale); }
.altCheap .altHead { color: var(--red); font-size: 18px; font-weight: bold; line-height: 1.4; }
.altCheap .altBody { color: var(--ink); font-size: 13px; margin-top: 4px; }
.altCheap .altBody b { color: var(--red); font-size: 15px; }
/* 拠点別一覧: TAT / NES / その他 を色分け（拠点共通）。全部白だと見分けにくい（2026-09-06 真弥さん指示） */
.col.tat { background: var(--tat-pale); border-color: #b9e2ea; }
.col.tat h3 { background: var(--tat); color: #fff; border-color: var(--tat); }
.col.tat h3 .badge { background: #fff; }
.col.tat h3 small { color: rgba(255,255,255,.85); }
.col.nes { background: var(--nes-pale); border-color: #d6c6f7; }
.col.nes h3 { background: var(--nes); color: #fff; border-color: var(--nes); }
.col.nes h3 .badge { background: #fff; }
.col.nes h3 small { color: rgba(255,255,255,.85); }
.col.other { background: var(--orange-pale); border-color: #ecd4b0; }
.col.other h3 { background: var(--orange); color: #fff; border-color: var(--orange); }
.col.other h3 .badge { background: #fff; }
.col.other h3 small { color: rgba(255,255,255,.85); }
.col .item { background: rgba(255,255,255,.85); }
.col .more .item:first-child { border-top: 1px solid var(--line); }
.col .moreBtn { display: block; width: calc(100% - 16px); margin: 8px; }
/* 管理画面の発注行: 1 行を低く（番号を名前の横に置き、入力欄を小さく）。カートに入れた行は水色 */
.lines.compact th, .lines.compact td { padding: 4px 6px; font-size: 12.5px; line-height: 1.35; vertical-align: middle; }
.lines.compact input[type=text], .lines.compact input[type=number], .lines.compact input[type=url], .lines.compact select { padding: 3px 6px; font-size: 12.5px; border-radius: 5px; }
.lines.compact .pname { font-weight: bold; }
.lines.compact .chip { margin-left: 4px; }
.lines.compact .brand { color: var(--mute); font-size: 11.5px; margin-left: 4px; }
.lines.compact .reqName { font-weight: bold; }
/* 商品名は横 1 行に（長い名前で行が 3〜4 行に伸びるのをやめる・2026-09-16 真弥さん指示）。
   切れた名前はマウスを乗せると全文が出る。管理画面は番号・ブランドが名前の後ろに続く */
.lines.compact td.prod > .pname { display: inline-block; vertical-align: middle; max-width: min(300px, 16vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 発注入力の右リスト: 列幅を決めて 1 商品 = 横 1 行。横スクロールが出ないように列幅は固定 */
.lines.oneline { table-layout: fixed; }
.lines.oneline th, .lines.oneline td { overflow: hidden; }
.lines.oneline th.cVendor { width: 58px; }
.lines.oneline th.cQty { width: 62px; }
.lines.oneline th.cPrice { width: 88px; }
.lines.oneline th.cWho { width: 88px; }
.lines.oneline th.cSt { width: 86px; }
.lines.oneline th.cAct { width: 96px; }
.lines.oneline [data-recvbtn] { padding: 4px 6px; font-size: 12px; white-space: nowrap; }
.lines.oneline td.small { white-space: nowrap; text-overflow: ellipsis; }
.lines.oneline td.prod { display: flex; align-items: center; gap: 4px; }
.lines.oneline td.prod > * { flex: none; }
.lines.oneline td.prod > .pname { flex: 0 1 auto; min-width: 0; max-width: none; }
/* スマホ・タブレット（〜900px = 左メニューが消える幅）: 列幅の固定をやめ、1 商品 1 枚のカードに積む。
   パソコン用の固定幅のままだと画面幅に収まらず商品名の列が潰れ、名前が読めなくなる（2026-09-16 真弥さん指摘）。
   商品名は折り返して全部見せる（切らない） */
@media (max-width: 900px) {
  .lines.oneline { table-layout: auto; display: block; }
  .lines.oneline thead { display: none; }
  .lines.oneline tbody { display: block; }
  .lines.oneline tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
  .lines.oneline td { display: block; width: auto; border: none; padding: 0; overflow: visible; }
  .lines.oneline td.prod { order: 1; flex: 1 1 100%; display: block; font-size: 13.5px; }
  .lines.oneline td.prod > .pname { display: inline; max-width: none; white-space: normal; overflow: visible; }
  .lines.oneline td:first-child { order: 2; }
  .lines.oneline td.num { order: 3; }
  .lines.oneline td.small { order: 4; white-space: normal; color: var(--mute); }
  .lines.oneline td.num[data-l]::before { content: attr(data-l); color: var(--mute); font-size: 11px; margin-right: 3px; }
  .lines.oneline tr > td:nth-child(6) { order: 5; margin-left: auto; }
  .lines.oneline tr > td:last-child { order: 6; }
  .lines.oneline tr.st-requested { box-shadow: inset 3px 0 0 var(--st-req); }
  .lines.oneline tr.st-carted { background: var(--st-cart-bg); box-shadow: inset 3px 0 0 var(--st-cart); }
  .lines.oneline tr.st-ordered { background: var(--st-ord-bg); box-shadow: inset 3px 0 0 var(--st-ord); }
  .lines.oneline tr.st-delivered { background: var(--st-del-bg); box-shadow: inset 3px 0 0 var(--st-del); }
  .lines.oneline tr.st-received { background: var(--st-recv-bg); box-shadow: inset 3px 0 0 var(--st-recv); }
  .lines.oneline tr > td { background: none !important; box-shadow: none !important; }
  .lines.oneline tr > td.empty { text-align: left; }
  .lines.oneline td:first-child select.vsel { max-width: 104px; }
  .lines.oneline td.num input { width: 64px !important; }
  .lines.oneline td.prod .memo { margin-left: 2px; }
}
.lines.compact tr.inCart td { background: var(--blue-pale); }
.lines.compact tr.inCart td:last-child { box-shadow: inset 3px 0 0 var(--blue); }
/* 発注入力: 左（入力）1/3・右（発注リスト）2/3。月の切り替えとタブ（2026-09-06 真弥さん指示） */
.grid2.order { grid-template-columns: 1fr 2fr; }
@media (max-width: 900px) { .grid2.order { grid-template-columns: 1fr; } }
.card h2 { flex-wrap: wrap; }
.mnav { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.mnav .btn.sm { padding: 1px 8px; line-height: 1.4; }
.tabs.small { margin: 10px 0 8px; }
.tabs.small button { padding: 6px 12px; font-size: 13px; }
.badge.received { background: var(--green-pale); color: var(--green); }
.lines.compact label.recv { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
/* 下中央（右下は「改善・バグ報告」ボタンと重なるため・就労B と同じ位置） */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 11px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .25s, transform .25s; z-index: 300; max-width: 90vw; }
.toast.show { opacity: 1; transform: translateX(-50%); }
/* 月別推移グラフ（棒＝発注済・折れ線＝予算）。幅は 560px まで、ページ幅いっぱいには広げない */
.chartWrap { max-width: 560px; margin: 10px 0 2px; }
.chart { width: 100%; height: auto; display: block; font-size: 10.5px; }
.chart .cgrid { stroke: var(--line); stroke-width: 1; }
.chart .cgrid.base { stroke: var(--line-dark); }
.chart .caxis { fill: var(--mute); }
.chart .cbar { fill: var(--series-2); rx: 2; }
.chart .cbar.pend { opacity: .35; }
.chart .cline { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; }
.chart .cdot { fill: #fff; stroke: var(--series-1); stroke-width: 2; }
.chart .clbl { fill: var(--ink-soft); font-size: 10px; font-weight: bold; }
.chartLegend i.ln { height: 3px; border-radius: 2px; vertical-align: 3px; }
.chartLegend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-soft); margin: 4px 0 6px; }
.chartLegend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.keyRow { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.keyVal { user-select: all; word-break: break-all; background: #fff; border: 1px solid var(--line-dark); border-radius: 7px; padding: 5px 8px; cursor: text; }

/* 検索結果 */
.results { border: 1px solid var(--line); border-radius: var(--r-sm); max-height: 360px; overflow: auto; background: #fff; }
.result { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: center; }
.result:hover, .result.sel { background: var(--brand-soft); }
.result:last-child { border-bottom: none; }
.result .nm { font-weight: bold; }
.result .price { font-size: 13px; white-space: nowrap; }
.empty { padding: 14px; color: var(--mute); font-size: 13px; text-align: center; }

/* 予算バー */
.budget { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 10px; }
.stat { background: #f8fafd; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; }
.stat .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.stat .v { font-size: 19px; font-weight: 800; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat .v.neg { color: var(--red); }
.bar { height: 10px; background: #e6edf5; border-radius: 999px; overflow: hidden; display: flex; }
.bar .spent { background: var(--brand); }
.bar .pending { background: #9cc9f3; }
.bar .over { background: var(--red); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { border: none; background: none; padding: 10px 14px; margin-bottom: -1px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 700; border-radius: 7px 7px 0 0; transition: color .15s, background .15s; }
.tabs button:hover { color: var(--ink); background: #eef3f9; }
.tabs button.active { color: var(--brand-ink); border-bottom-color: var(--brand); }
.tab { display: none; } .tab.active { display: block; }
dialog { border: none; border-radius: 16px; padding: 20px 22px 18px; width: min(92vw, 520px); box-shadow: var(--shadow-lg); color: var(--txt); margin: auto; }
dialog h3 { font-size: 17px; color: var(--ink); }
dialog::backdrop { background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }

/* ===== v0.2: 商品名とコードの分離表示・拠点別 3 列ボード ===== */
.badge.other { background: var(--orange-pale); color: var(--orange); }
.pname { font-weight: bold; line-height: 1.4; }
.pname.free { font-weight: normal; }
.pmeta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 3px; font-size: 12px; color: var(--mute); }
.pmeta .brand { color: var(--ink-soft); }
.chip { display: inline-flex; align-items: stretch; border: 1px solid var(--line-dark); border-radius: 6px; overflow: hidden; font-size: 11.5px; line-height: 1; }
.chip .chipk { background: var(--paper-warm); color: var(--mute); padding: 4px 6px; border-right: 1px solid var(--line-dark); }
.chip .chipv { font-family: Menlo, Consolas, monospace; font-weight: bold; color: var(--ink); padding: 4px 7px; letter-spacing: .03em; background: #fff; }
.result { grid-template-columns: 52px 1fr auto; }
.pickbox { margin-top: 12px; background: var(--brand-soft); border: 1px solid #c5e0fa; border-radius: 11px; padding: 12px 14px; }
select.vsel { padding: 4px 6px; font-size: 12.5px; }
table.lines td { vertical-align: middle; }
.budget.compact { grid-template-columns: repeat(4, minmax(120px, 1fr)); margin-top: 6px; gap: 8px; }
.budget.compact .stat { padding: 7px 10px; }
.budget.compact .stat .v { font-size: 16px; }
.listNote { margin-bottom: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.legend { display: inline-flex; gap: 5px; align-items: center; }
.card.board { padding: 12px 14px; }
.board .boardHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.board .boardHead h2 { margin: 0; font-size: 15.5px; }
.board .btn.sm { text-decoration: none; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
@media (max-width: 1100px) { .cols3 { grid-template-columns: 1fr; } .budget.compact { grid-template-columns: repeat(2, 1fr); } }
.col { border: 1px solid var(--line); border-radius: 11px; background: var(--paper); min-height: 80px; overflow: hidden; }
.col h3 { font-size: 13.5px; padding: 7px 10px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; background: #fff; white-space: nowrap; overflow: hidden; }
.col h3 .ttl { overflow: hidden; text-overflow: ellipsis; }
.col h3 small { margin-left: auto; padding-left: 8px; font-weight: normal; color: var(--mute); white-space: nowrap; }
/* 1 商品 = 横 1 行（商品名は長ければ … で切り、全文と依頼者・備考はマウスを乗せると出る・2026-09-16 真弥さん指示） */
.item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--line); background: #fff; font-size: 12.5px; line-height: 1.4; }
.item:last-child { border-bottom: none; }
.item .nm { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo { color: var(--orange); font-weight: normal; margin-left: 4px; }
.item .cd { font-family: Menlo, Consolas, monospace; color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.item .cd.free { font-family: var(--sans); color: var(--orange); font-size: 10.5px; }
.item .qty { white-space: nowrap; color: var(--ink-soft); }
.item .amt { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; min-width: 66px; }
/* 状態の印（申請中・発注済・納品済）。一覧では 3 文字そろえて左端に置き、凡例でも同じ色を使う */
.stMark { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 10.5px; font-weight: bold; letter-spacing: .02em; }
.item .stMark { width: 3.6em; text-align: center; padding: 1px 0; }
.st-requested .stMark, .stMark.st-requested { background: var(--st-req-bg); color: var(--st-req); box-shadow: inset 0 0 0 1px #cfe0ff; }
.st-carted    .stMark, .stMark.st-carted    { background: #fddcbf; color: var(--st-cart); }
.st-ordered   .stMark, .stMark.st-ordered   { background: #f6e6bd; color: var(--st-ord); }
.st-delivered .stMark, .stMark.st-delivered { background: #cfe8d9; color: var(--st-del); }
.st-received  .stMark, .stMark.st-received  { background: var(--st-recv); color: #fff; }
.st-cancelled .stMark, .stMark.st-cancelled { background: var(--st-cxl-bg); color: var(--st-cxl); }
/* 行そのものも状態で塗る（左の線＋薄い地色）。仕入先の色の上でも見分けが付く濃さにしてある */
.col .item.st-requested { background: #fff; box-shadow: inset 3px 0 0 var(--st-req); }
.col .item.st-carted { background: var(--st-cart-bg); box-shadow: inset 3px 0 0 var(--st-cart); }
.col .item.st-ordered { background: var(--st-ord-bg); box-shadow: inset 3px 0 0 var(--st-ord); }
.col .item.st-delivered { background: var(--st-del-bg); box-shadow: inset 3px 0 0 var(--st-del); }
.col .item.st-received { background: var(--st-recv-bg); box-shadow: inset 3px 0 0 var(--st-recv); }
.col .item.st-cancelled { background: var(--st-cxl-bg); box-shadow: inset 3px 0 0 var(--st-cxl); color: var(--mute); }
/* スマホ・タブレット（〜900px）: 拠点別一覧の行も商品名を折り返して全部見せる（切らない）。番号は名前の下へ */
@media (max-width: 900px) {
  .item { grid-template-columns: auto minmax(0, 1fr) auto auto; row-gap: 1px; padding: 6px 8px; }
  .item .nm { white-space: normal; overflow: visible; }
  .item .stMark { align-self: start; }
  .item .cd { grid-column: 2 / -1; }
}
/* 表の行（発注入力の右リスト・管理画面）も同じ色で塗る */
tr.st-carted > td { background: var(--st-cart-bg); }
tr.st-ordered > td { background: var(--st-ord-bg); }
tr.st-delivered > td { background: var(--st-del-bg); }
tr.st-received > td { background: var(--st-recv-bg); }
tr.st-cancelled > td { background: var(--st-cxl-bg); color: var(--mute); }
tr.st-requested > td:first-child { box-shadow: inset 3px 0 0 var(--st-req); }
tr.st-carted > td:first-child { box-shadow: inset 3px 0 0 var(--st-cart); }
tr.st-ordered > td:first-child { box-shadow: inset 3px 0 0 var(--st-ord); }
tr.st-delivered > td:first-child { box-shadow: inset 3px 0 0 var(--st-del); }
tr.st-received > td:first-child { box-shadow: inset 3px 0 0 var(--st-recv); }
tr.st-cancelled > td:first-child { box-shadow: inset 3px 0 0 var(--st-cxl); }
/* 管理画面: 対象月の ‹ › 送り、他社の方が安い注釈（2026-09-06） */
.ymnav b { font-size: 15px; min-width: 7.5em; text-align: center; }
.ymnav .ymPick { font-size: 15px; font-weight: 700; width: 9.5em; text-align: center; cursor: pointer; }
.ymnav .ymCycle { font-size: 13px; color: var(--muted, #6b7280); white-space: nowrap; margin: 0 4px; }
.cheapNote { color: var(--red); font-size: 11.5px; font-weight: bold; margin-top: 2px; white-space: nowrap; }
.cheapNote .lnk { border: 0; background: none; color: var(--blue); font-size: 11.5px; padding: 0 2px; cursor: pointer; text-decoration: underline; }
.cheapNote { white-space: normal; max-width: 240px; }
.cheapNote .cheapName { color: var(--ink); font-weight: normal; font-size: 11px; }
.lines.compact th .hsel { font-size: 11.5px; padding: 1px 4px; border-radius: 4px; max-width: 120px; vertical-align: middle; }

/* ===== 単独ページ（ログイン・生徒ログイン・承認待ち・承認・プライバシー）: 就労B の login.html / pending.html と同じ見た目 ===== */
/* LINE のアプリ内ブラウザ（iOS）で、高さ 100% 固定＋背景の fixed だと途中（お名前の下）から下へスクロールできない（2026-10-08 真弥さん実機）。
   単独ページは高さを中身なりにし、背景の fixed をやめる */
html:has(body.soloBg), body.soloBg { height: auto; }
body.soloBg { min-height: 100vh; min-height: 100dvh; }
.soloBg { background: #f3f6fa; background-image: radial-gradient(640px 420px at 12% -10%, rgba(47,155,255,.18), transparent 60%), radial-gradient(560px 380px at 100% 110%, rgba(31,200,182,.18), transparent 60%); }
.soloCard { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 1px 2px rgba(20,35,60,.04), 0 30px 70px -30px rgba(20,35,60,.35); }
.soloCard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--b1), var(--b2)); }
.soloBrand { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; }
.soloBrand .lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.soloBrand .mslogo { width: 34px; height: 34px; flex: none; }
.soloBrand .wordmark { font-size: 30px; }
.soloBrand.sm .mslogo { width: 28px; height: 28px; }
.soloBrand.sm .wordmark { font-size: 24px; }
.forpill { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--brand-ink); background: var(--brand-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

/* ---- 管理画面「発注行の管理」を画面幅に収める（2026-09-25 真弥さん指摘「右側が見切れてスクロールが要る」） ----
   パソコン: 見出しのプルダウンを文字の下に置き、商品名・状態・備考は欄の中で折り返す（表の幅＝カードの幅）
   1100px 以下（小さいノート PC・タブレット・スマホ）: 1 行を 1 枚のカードに積む。横スクロールは出さない */
.adminLines { width: 100%; }
.adminLines th { white-space: normal; vertical-align: bottom; }
.adminLines th .hsel { display: block; margin-top: 3px; max-width: 100%; width: 100%; min-width: 0; }
.adminLines th:first-child { white-space: nowrap; }
.adminLines th:nth-child(2) { min-width: 118px; }
.adminLines th:nth-child(3) { width: 96px; }
.adminLines td:nth-child(3) .vsel { max-width: 96px; }
.lines.adminLines td.prod > .pname { display: inline; max-width: none; white-space: normal; overflow: visible; }
.adminLines td .badge { white-space: normal; }
.adminLines td.stCell { min-width: 96px; }
.adminLines td.stCell select { width: 100%; }
.adminLines td.stCell .muted, .adminLines td.stCell .badge { display: block; margin-top: 2px; white-space: nowrap; }
.adminLines .noteIn { width: 100%; min-width: 90px; margin-top: 3px; }
.adminLines td .reqName { white-space: nowrap; }
.adminLines .cheapNote { max-width: 200px; }
@media (max-width: 1100px) {
  .adminLines, .adminLines tbody { display: block; }
  .adminLines thead tr { display: flex; align-items: center; gap: 10px; }
  .adminLines thead th { display: none; border: 0; padding: 4px 0 8px; }
  .adminLines thead th:first-child { display: block; }
  .adminLines tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .adminLines tbody tr > td { display: block; border: 0; padding: 0; background: none !important; box-shadow: none !important; }
  .adminLines tbody tr > td:nth-child(1) { order: 0; }
  .adminLines tbody tr > td:nth-child(2) { order: 1; }
  .adminLines tbody tr > td:nth-child(3) { order: 2; }
  .adminLines tbody tr > td:nth-child(10) { order: 3; margin-left: auto; }
  .adminLines tbody tr > td:nth-child(4) { order: 4; flex-basis: 100%; }
  .adminLines tbody tr > td:nth-child(5) { order: 5; }
  .adminLines tbody tr > td:nth-child(6) { order: 6; }
  .adminLines tbody tr > td:nth-child(7) { order: 7; }
  .adminLines tbody tr > td:nth-child(9) { order: 8; margin-left: auto; min-width: 0; }
  .adminLines tbody tr > td:nth-child(8) { order: 9; flex-basis: 100%; }
  .adminLines tbody tr > td[data-l]::before { content: attr(data-l); color: var(--muted); font-size: 11px; margin-right: 4px; }
  .adminLines tbody tr > td.stCell select { width: auto; }
  .adminLines tbody tr > td.stCell .muted, .adminLines tbody tr > td.stCell .badge { display: inline-block; margin-left: 4px; }
  .adminLines tbody tr > td:nth-child(10)::before { content: '候補'; color: var(--muted); font-size: 11px; margin-right: 4px; }
  .adminLines .cheapNote { max-width: none; }
  .adminLines tbody tr.st-requested { box-shadow: inset 3px 0 0 var(--st-req); }
  .adminLines tbody tr.st-carted { background: var(--st-cart-bg); box-shadow: inset 3px 0 0 var(--st-cart); }
  .adminLines tbody tr.st-ordered { background: var(--st-ord-bg); box-shadow: inset 3px 0 0 var(--st-ord); }
  .adminLines tbody tr.st-delivered { background: var(--st-del-bg); box-shadow: inset 3px 0 0 var(--st-del); }
  .adminLines tbody tr.st-received { background: var(--st-recv-bg); box-shadow: inset 3px 0 0 var(--st-recv); }
  .adminLines tbody tr.st-cancelled { background: var(--st-cxl-bg); box-shadow: inset 3px 0 0 var(--st-cxl); }
  .adminLines tbody tr.inCart { background: var(--blue-pale); }
}
/* 発注リストの並び順（タブの右端・2026-10-08） */
.tabs .listSort { margin-left: auto; flex-direction: row; align-items: center; gap: 6px; align-self: center; }
.tabs .listSort select { font-size: 13px; padding: 4px 6px; }
/* 発注リストの列の見出しで並べ替え（2026-10-08） */
.lines th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.lines th.sortable:hover { color: var(--brand-ink); }
.lines th.sortable::after { content: attr(data-dir); margin-left: 2px; font-size: 10px; }
.lines th.sortable.sorted { color: var(--brand-ink); }