/* kikan の画面スタイル。

   /kikan/ の CSP は 'unsafe-inline' なし。style 属性・<style> タグを書かず、
   スタイルは必ずこのファイルに置くこと（リファレンス_VPS基幹.md §5）。

   **デザイントークンとヘッダーの正本は kikan/static/kdk-common.css。**
   base.html がそれを先に読み、このファイルは差分だけを足す。転記しないこと
   （写すと必ず片方だけ直してズレる）。

   運用はダークのみ（2026-07-19 Kinya さん方針・目の負担のため）。

   フォントについて: /kikan/ の CSP は font-src 'self' のため Google Fonts を直接読めない。
   そこで Noto Sans JP / DM Mono を `static/vendor/fonts/` へ自前ホストしている
   （`fonts.css` の @font-face・base.html が kikan.css より先に読み込む）。
   PCにインストールされているフォントへフォールバックする形だと機種ごとに見え方が
   変わってしまうため、「老眼でも見やすい」を PC 非依存で保つ目的で明示的に固定した
   （Kinya さん判断・2026-08-14）。kdk-common.css と同じフォントの組み合わせにして
   Flask 5アプリとの見た目もこれで揃う。 */

:root {
  /* 自前ホスト（static/vendor/fonts/・fonts.css）。kdk-common.css と同じ組み合わせ */
  --font-sans: "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --font-mono: "DM Mono", "Consolas", "Courier New", monospace;
  /* invoices の帳票（Flask版は Noto Serif JP）。同じ理由で自前ホストせずシステム明朝へ寄せる */
  --font-serif: "游明朝", "Yu Mincho", "ＭＳ Ｐ明朝", serif;

  /* 入力中の枠は赤（--kdk-active）。Flask 5アプリと同じ約束
     （docs/reference/リファレンス_UI共通仕様.md）。ブラウザ既定の青は使わない */
  --focus-ring: rgba(122, 37, 37, 0.35);

  /* kikan 固有（グリッドの行の状態） */
  --row-dirty: rgba(55, 138, 221, 0.10);
  --row-new:   rgba(29, 158, 117, 0.10);
  --row-error: rgba(216, 90, 48, 0.10);
  --warn-bg:   rgba(216, 90, 48, 0.12);
}

.is-hidden { display: none !important; }
/* `hidden` 属性は UA スタイルの display:none なので、作者側で display を指定した
   要素（.prod-plan-btn の inline-block 等）には負ける。JS で hidden を立てても
   消えない、という静かな不具合になるのでここで押さえる（2026-08-13 実機で発生）。 */
[hidden] { display: none !important; }

/* パネルを開いている間はページ側をスクロールさせない。
   両方スクロールできると縦棒が2本並び、どちらを動かしているのか分からなくなる。
   scrollbar-gutter でページ側の縦棒ぶんの幅を常に確保しておき、
   閉じ開きのたびに中身が横へずれないようにする。 */
html { scrollbar-gutter: stable; }
body.is-drawer-open { overflow: hidden; }

/* ===== ヘッダー ===== */
/* 構成とスタイルは kdk-common.css（旧 Flask 共通CSS・kikan/static へ移設済み）。ここは kikan の事情だけ。 */

/* 見出しはトップへのリンクだが、下線は出さない（Flask 側は div で下線が無い） */
.portal-logo { text-decoration: none; }

/* ログアウトは POST なのでボタン。見た目は他アプリのリンクと同じ zone-item に揃える */
.logout-form { margin: 0; display: flex; }
.zone-logout { font: inherit; cursor: pointer; }

.site-main { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; }
.site-main.is-narrow { max-width: 34rem; }

.page-title { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.25rem; }
.page-desc, .note { color: var(--text-muted); font-size: var(--fs-sm); }
.form-error { color: var(--kdk-negative); font-size: var(--fs-sm); }

/* ===== メッセージ ===== */

.messages { list-style: none; margin-bottom: 1rem; }

.messages li {
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-sm);
  margin-bottom: 0.5rem;
}

.messages li.success { border-color: var(--kdk-positive); color: var(--kdk-positive); background: var(--row-new); }
.messages li.error { border-color: var(--kdk-negative); color: var(--kdk-negative); background: var(--warn-bg); }

/* ===== ボタン ===== */

.btn {
  font: inherit;
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.2s, background 0.2s;
}

.btn:hover { border-color: var(--kdk-active); }
.btn-sm { padding: 0.2rem 0.5rem; font-size: var(--fs-xs); }
.btn-primary { background: var(--kdk-accent); border-color: var(--kdk-accent); color: #fff; font-weight: 500; }
.btn-primary:hover { background: #2d76bf; border-color: #2d76bf; }
.btn-primary:disabled { background: var(--surface2); border-color: var(--border); color: var(--text-dim); cursor: not-allowed; }
.btn-ghost { border-color: transparent; background: none; color: var(--kdk-accent); }
.btn-ghost:hover { background: var(--surface2); border-color: transparent; }
.btn-ghost:disabled { color: var(--text-dim); cursor: not-allowed; background: none; }

.actions { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.actions .btn-primary { margin-left: auto; }

/* ===== ログイン ===== */

/* Flask（portal/templates/login.html）のログインカード意匠の移植。
   認証集約でログインの玄関が kikan に一本化されたため、見た目は従来の
   Flask ログインを正とする（2026-07-29 Kinya さん指示）。
   /kikan/ は CSP で <style> を書けないため、ここが意匠の正本になる。 */

.site-main.is-login { max-width: none; padding: 0; }

.kdk-login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); }
.kdk-login-logo { font-weight: 700; font-size: 28px; letter-spacing: -0.02em; margin-bottom: 32px; color: var(--text); }
.kdk-login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 36px 40px; width: 100%; max-width: 340px; }
.kdk-field { margin-bottom: 14px; }
.kdk-field label { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 5px; }
.kdk-field input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 13px; color: var(--text); font-family: var(--font-mono); font-size: var(--fs-base); outline: none; transition: border-color 0.15s; }
.kdk-field input:focus { border-color: var(--kdk-active); }
.kdk-login-error { font-size: var(--fs-xs); color: var(--kdk-negative); margin-bottom: 14px; padding: 7px 11px; background: rgba(216,90,48,0.08); border: 1px solid rgba(216,90,48,0.22); border-radius: var(--radius-md); }
.kdk-login-btn { width: 100%; background: var(--kdk-accent); border: none; border-radius: var(--radius-md); padding: 11px; color: #fff; font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 500; cursor: pointer; margin-top: 6px; transition: opacity 0.15s; }
.kdk-login-btn:hover { opacity: 0.85; }
/* パスワード再設定（password_forgot / password_reset_confirm）。<a> にも同じボタン意匠を使う */
a.kdk-login-btn { display: block; text-align: center; text-decoration: none; }
.kdk-login-subtitle { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 22px; letter-spacing: 0.3px; }
.kdk-login-note { color: var(--text); font-size: 14px; line-height: 1.7; margin: 20px 0; }
.kdk-login-note.is-muted { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 0 0 16px; }
.kdk-login-backline { margin-top: 16px; text-align: center; }
.kdk-login-backline a { font-size: 12px; color: var(--text-dim); text-decoration: none; }
.kdk-login-backline a:hover { color: var(--text-muted); }

/* パスワード変更はヘッダー付き・カード中央寄せ（Flask account_password.html 相当） */
.kdk-pw-card { margin: 0 auto; }
.kdk-pw-card .errorlist { list-style: none; padding: 0; margin: 0 0 10px; font-size: var(--fs-xs); color: var(--kdk-negative); }

/* パスワード表示切替（目アイコン。js/login_pw_toggle.js が後付けする） */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 40px; }
.pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 38px; background: none; border: none; cursor: pointer; color: var(--text-dim); display: flex; align-items: center; justify-content: center; padding: 0; }
.pw-toggle:hover { color: var(--text); }
.pw-toggle svg { width: 16px; height: 16px; }
.pw-toggle .icon-show { display: none; }
.pw-toggle.showing .icon-hide { display: none; }
.pw-toggle.showing .icon-show { display: block; }

@media (max-width: 430px) {
  .kdk-login-wrap { justify-content: flex-start; padding-top: 60px; }
  .kdk-login-card { padding: 28px 20px; }
  .kdk-field input { font-size: 16px; }
  .kdk-login-btn { min-height: 44px; }
}

/* ===== マスタ一覧（cat 意匠のカードハブ。リファレンス_UI設計 §13） =====

   カード＋アイコンの「選ぶ」系統。よく使う（★・大きめ）＋すべて の2段。
   ★は素の form POST で動く（この画面に JS は無い）。 */

.mhub-sec { margin-bottom: 1.8rem; }
.mhub-sech { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.mhub-sech h2 {
  margin: 0;
  font-size: var(--cat-fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cat-faint);
}
.mhub-tip { font-size: var(--cat-fs-xs); color: var(--cat-faint); opacity: 0.7; }
.mhub-rule { flex: 1; height: 1px; background: var(--cat-line); }

.mhub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
@media (max-width: 940px) { .mhub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mhub-grid { grid-template-columns: 1fr; } }

.mhub-card {
  display: flex;
  background: var(--cat-card);
  border: 1px solid var(--cat-line);
  border-radius: var(--cat-radius);
  position: relative;
  transition: 0.14s;
}
.mhub-card:hover {
  border-color: var(--cat-line-strong);
  background: #18191C;
  transform: translateY(-2px);
}
.mhub-card:hover .mhub-arrow { color: var(--cat-accent); transform: translateX(2px); }

.mhub-link {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
}
.mhub-ic {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--cat-accent-dim);
  color: #7FB6F5;
}
.mhub-ic svg { width: 1.25rem; height: 1.25rem; }
.mhub-body { min-width: 0; flex: 1; }
/* 文字は基準の階段どおり（2026-07-29 に portal v2 密度の縮小を廃止。基準は詳細パネル） */
.mhub-ttl { display: block; font-size: var(--cat-base); font-weight: 700; }
.mhub-meta {
  display: block;
  font-size: var(--cat-fs-md);
  color: var(--cat-muted);
  margin-top: 0.15rem;
  font-family: var(--font-mono);
}
.mhub-upd { display: block; font-size: var(--cat-fs-sm); color: var(--cat-faint); font-family: var(--font-mono); }
.mhub-arrow { color: var(--cat-line-strong); align-self: center; transition: 0.14s; font-size: var(--cat-fs-md); }

/* ★。カードの hover でだけ現れる（付いているものは常時） */
.mhub-pinform { position: absolute; top: 0.6rem; right: 0.6rem; }
.mhub-pin {
  color: #33333A;
  opacity: 0;
  transition: 0.12s;
  font-size: var(--cat-fs-md);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.1rem;
  line-height: 1;
  font-family: inherit;
}
.mhub-card:hover .mhub-pin, .mhub-pin:focus-visible { opacity: 1; }
.mhub-pin.on { opacity: 1; color: var(--cat-warn); }
.mhub-pin:hover { color: var(--cat-warn); }

/* よく使う＝大きめカード（portal リデザイン案 v2 の .app.big と同構造） */
.mhub-card.is-big {
  background: linear-gradient(160deg, #1A1B20, #151517);
  border-color: var(--cat-line-strong);
}
.mhub-card.is-big .mhub-link { flex-direction: column; align-items: flex-start; padding: 1.15rem; }
.mhub-card.is-big .mhub-ic { width: 2.9rem; height: 2.9rem; border-radius: 0.8rem; margin-bottom: 0.8rem; }
.mhub-card.is-big .mhub-ic svg { width: 1.45rem; height: 1.45rem; }
.mhub-card.is-big .mhub-ttl { font-size: var(--cat-fs-lg); }
.mhub-card.is-big .mhub-arrow { position: absolute; right: 1rem; bottom: 0.9rem; align-self: auto; }

/* ドラッグ並び替え（masters_hub.js）。掴んだ元の位置は薄く残す */
.mhub-card.is-big { cursor: grab; }
.mhub-card.is-big.is-dragging { opacity: 0.35; border-style: dashed; }

.mhub-empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--cat-line);
  border-radius: var(--cat-radius);
  padding: 1.1rem;
  color: var(--cat-faint);
  font-size: var(--cat-fs-sm);
  text-align: center;
}

/* Excel 取込＝マスタとは違う操作。破線で区別する（<a> 単体のカード） */
.mhub-card.is-tool {
  border-style: dashed;
  background: none;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
}
.mhub-card.is-tool .mhub-ic { background: var(--cat-warn-bg); color: var(--cat-warn); }

.empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  margin-top: 1.25rem;
}

/* ===== グリッド ===== */

.grid-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }

.toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
}

.grid-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; flex-wrap: wrap; }

input.search-box {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  min-width: 18rem;
}

input.search-box:focus { outline: none; border-color: var(--kdk-active); }
.grid-count { color: var(--text-muted); font-size: var(--fs-sm); }

.grid-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  /* 行数が多いときは表の中だけスクロールさせ、見出しを画面に残す */
  max-height: 70vh;
  overflow-y: auto;
}

.grid { width: 100%; border-collapse: collapse; }

.grid th {
  text-align: left;
  font-size: var(--fs-xs);
  /* 見出しは常時読む文字なので --text-dim（暗背景で約1.8:1）まで落とさない */
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  position: sticky;
  top: 0;
  white-space: nowrap;
}

.grid td { border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.grid tr:last-child td { border-bottom: 0; }

.col-active { width: 3.5rem; }
.col-ops { width: 6.5rem; }

/* 詳細パネルを持つマスタだけ、キー列をリンクにする（specs.py の row_panel）。
   .cell と同じ特異性（クラス1つ）だと読み込み順で負けて色が inherit に戻るため、
   .cell.code-link で明確に勝たせる（2026-07-21 に実際に負けて青くならなかった）。 */
.cell.code-link {
  text-align: left;
  color: var(--kdk-accent);
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.cell.code-link:hover { border-color: var(--kdk-active); text-decoration: underline; }

.cell {
  width: 100%;
  min-width: 6rem;
  border: 1px solid transparent;
  background: none;
  font: inherit;
  font-size: var(--fs-base);
  color: inherit;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
}

.cell:hover { border-color: var(--border); }

.cell:focus {
  outline: none;
  border-color: var(--kdk-active);
  background: var(--surface2);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.cell:disabled { color: var(--text-dim); background: var(--surface2); border-color: transparent; cursor: not-allowed; }
.cell-code { font-family: var(--font-mono); }

/* 行のロールオーバー。目で行を追いやすくする（Flask 側の一覧と同じ約束・
   docs/reference/リファレンス_UI設計.md）。状態色が付いている行は、そちらを優先して残す
   （変更中・エラーの目印を hover で塗りつぶさない）。 */
.grid tbody tr:not(.row-dirty):not(.row-new):not(.row-error):not(.row-msg):hover {
  background: var(--surface2);
}

.row-dirty { background: var(--row-dirty); }
.row-new { background: var(--row-new); }
.row-inactive .cell:not(:disabled) { color: var(--text-dim); }
.row-inactive .cell-key { text-decoration: line-through; }
.row-error { background: var(--row-error); }
.row-error .cell-invalid { border-color: var(--kdk-negative); }

.active-cell { text-align: center; }
input[type="checkbox"] { accent-color: var(--kdk-accent); cursor: pointer; }

.badge {
  display: inline-block;
  font-size: var(--fs-xs);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
  white-space: nowrap;
}

.badge-lock { color: var(--text-dim); border-color: var(--border); background: var(--surface2); }
.badge-warn { color: var(--kdk-negative); border-color: var(--kdk-negative); background: var(--warn-bg); }
.badge-new { color: var(--kdk-positive); border-color: var(--kdk-positive); background: var(--row-new); }
.badge-calc { color: var(--kdk-accent); border-color: var(--kdk-accent); background: var(--row-dirty); }

.ops { display: flex; gap: 0.15rem; padding: 0 0.4rem; }

.msg-error { display: block; color: var(--kdk-negative); font-size: var(--fs-sm); padding: 0 0.6rem 0.4rem; }

.key-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--kdk-accent);
  border: 1px solid var(--kdk-accent);
  border-radius: var(--radius-sm);
  padding: 0 0.25rem;
  margin-left: 0.3rem;
}

/* 画面下の帯ではなく、**編集している行のそばに出す小さなバー**。
   下端に固定すると、直している場所と操作する場所が遠く、目線が往復する。
   位置は JS が編集中の行から決める（行が画面外へ流れたら表の下端に留まる）。 */
.savebar {
  position: fixed;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem 0.4rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* 触っているだけで変更がまだ無いとき。押せないことが分かる程度に控えめにする */
.savebar.is-clean { background: var(--surface2); }
.savebar.is-clean .savebar-text { color: var(--text-muted); font-weight: 400; }

.savebar-text { font-weight: 500; font-size: var(--fs-sm); white-space: nowrap; }
.savebar-error { color: var(--kdk-negative); font-size: var(--fs-sm); white-space: nowrap; }

/* ===== 履歴ドロワー ===== */

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 28rem;
  max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
  padding: 1rem 1.25rem;
  overflow-y: auto;
}

.drawer-head { display: flex; align-items: center; }
.drawer-title { font-size: var(--fs-md); font-weight: 500; }
.drawer-head .btn { margin-left: auto; }
.drawer-sub { color: var(--text-muted); font-size: var(--fs-sm); margin: 0.2rem 0 1rem; }

.history-list { list-style: none; }
.history-item { border-left: 2px solid var(--border); padding: 0 0 1.1rem 0.9rem; position: relative; }

.history-item::before {
  content: "";
  position: absolute;
  left: -5px; top: 0.5rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kdk-accent);
}

/* 「誰が・いつ」は監査データであって装飾ではないので、読める明度を保つ */
.history-meta { color: var(--text-muted); font-size: var(--fs-xs); font-family: var(--font-mono); }
.history-action { font-weight: 500; font-size: var(--fs-sm); margin: 0.1rem 0 0.3rem; }

.diff { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.diff-row { display: grid; grid-template-columns: 6rem 1fr 1fr; font-size: var(--fs-sm); border-bottom: 1px solid var(--border-light); }
.diff-row:last-child { border-bottom: 0; }
.diff-row > * { padding: 0.25rem 0.45rem; }
.diff-field { color: var(--text-dim); background: var(--surface2); }
.diff-before { color: var(--kdk-negative); text-decoration: line-through; }
.diff-after { color: var(--kdk-positive); }

/* ===== 取込ウィザード ===== */

.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1rem;
  text-align: center;
  background: var(--surface);
  margin-top: 1.25rem;
}

.dropzone input[type="file"] { font: inherit; font-size: var(--fs-sm); color: var(--text-muted); }
.dropzone-sub { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 0.5rem; }

.warn-card {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  border: 1px solid var(--kdk-negative);
  background: var(--warn-bg);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  margin: 1rem 0;
}

.banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--kdk-negative);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-xs);
  flex: none;
  margin-top: 0.15rem;
}

.warn-title { font-weight: 500; color: var(--kdk-negative); font-size: var(--fs-sm); }
.warn-body { font-size: var(--fs-sm); margin-top: 0.2rem; }
.warn-body code { font-family: var(--font-mono); }
.warn-choice { margin-top: 0.5rem; font-size: var(--fs-sm); display: flex; align-items: center; gap: 0.4rem; }

.setup-grid td { padding: 0.3rem 0.6rem; }
.setup-grid select { width: 100%; }
.samples-cell { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); }
.row-warn { background: var(--warn-bg); }

.hint {
  border-left: 2px solid var(--border);
  padding: 0.1rem 0 0.1rem 0.9rem;
  margin: 1rem 0 1.5rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.hint p + p { margin-top: 0.5rem; }
.hint strong { color: var(--text); font-weight: 500; }

.field { display: flex; flex-direction: column; gap: 0.25rem; margin: 1rem 0; max-width: 24rem; }
.field label { font-size: var(--fs-sm); color: var(--text-muted); }

.field input, .field select, .field textarea {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.field textarea { min-height: 4.5rem; resize: vertical; width: 100%; }

.checkbox-line { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); margin-top: 0.75rem; }

/* ===== 確認画面（保存前プレビュー・取込確認） ===== */

.alert {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  margin: 1rem 0;
  font-size: var(--fs-sm);
}

.alert p + p, .alert p + table, .alert p + .check { margin-top: 0.5rem; }
.alert-title { font-size: var(--fs-sm); font-weight: 500; margin-bottom: 0.3rem; }
.alert code { font-family: var(--font-mono); }

.alert-error { border-left-color: var(--kdk-negative); background: var(--warn-bg); }
.alert-error .alert-title { color: var(--kdk-negative); }
.alert-warn { border-left-color: var(--kdk-negative); background: var(--warn-bg); }
.alert-warn .alert-title { color: var(--kdk-negative); }
.alert-info { border-left-color: var(--kdk-accent); background: var(--surface2); }

.check { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }

.section-title { font-size: var(--fs-md); font-weight: 500; margin: 1.5rem 0 0.6rem; }
.note { font-size: var(--fs-sm); color: var(--text-muted); margin: 0.5rem 0; }

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: 0.5rem 0;
}

.mini-table th, .mini-table td {
  border-bottom: 1px solid var(--border-light);
  padding: 0.3rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.mini-table th { color: var(--text-muted); font-weight: 500; }
.mini-table td { font-family: var(--font-mono); }

/* 打ちながら絞る参照入力。「品番 商品名」と半角スペース1つ分で続けて読ませる。
   入力欄を伸ばすと名前が右へ飛ばされて潰れるので、入力欄は品番の桁数ぶんに固定し、
   余った幅は名前に渡す。 */
.ref-cell { display: flex; align-items: center; gap: 0.3rem; }

/* 一番長い管理品番（1-33730-155-0 = 13桁）が収まる幅 */
.ref-cell .cell { flex: 0 0 auto; width: 15ch; min-width: 0; }

.ref-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding-right: 0.45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 編集中のセルの真下に出す候補リスト。
   ネイティブの datalist は表示位置を制御できず、実機でセルから遠い場所に出た。
   目線が飛ぶと選び間違えるので、位置をこちらで決める。 */
.suggest {
  position: fixed;
  z-index: 60;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgb(0 0 0 / 35%);
}

.suggest-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  font-size: var(--fs-sm);
}

.suggest-item.is-active,
.suggest-item:hover { background: var(--surface2); }

.suggest-code { font-family: var(--font-mono); }

.suggest-name {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== フォーカス（旧 Flask 時代からの共通の約束） ===== */
/* 入力中・操作中の目印は赤（--kdk-active）。ブラウザ既定の青い枠は使わない。
   個別に書き漏らしてもここで拾えるよう、最後に既定として置いてある。
   仕様の正本: docs/reference/リファレンス_UI共通仕様.md */

input:focus,
select:focus,
textarea:focus { outline: none; border-color: var(--kdk-active); }

/* ボタン・リンクは枠線を持たないものがあるので、輪郭で示す（キーボード操作時のみ） */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--kdk-active);
  outline-offset: 1px;
}

/* 説明文の中のキー表記（Esc など） */
kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  padding: 0.05rem 0.3rem;
}

/* 保存の結果を短く出す。alert と違いボタンを押させず、直した場所も隠さない */
.toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--kdk-positive);
  background: var(--surface);
  color: var(--kdk-positive);
  font-size: var(--fs-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.toast.is-error { border-color: var(--kdk-negative); color: var(--kdk-negative); }

/* 他所で保存されていて書き込めなかったときの帯。トーストと違い**消えない**
   （4秒で消えると「保存できたのか分からない」まま作業を続けてしまう）。
   リロードはこちらからはしない。画面に残っている入力は人のものなので、
   捨てるかどうかは人が決める */
.stale-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--kdk-negative);
  background: var(--surface);
  color: var(--kdk-negative);
  font-size: var(--fs-sm);
}

/* 書き出しの注意など、読み飛ばしてほしくない補足 */
.note-warn {
  border-left: 3px solid var(--kdk-negative);
  background: var(--warn-bg);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  margin: 0.75rem 0;
}

/* ===== 管理品番マスタ：詳細パネル（2026-07-25 デザイン刷新） =====

   ⚠️ この画面**だけ**は、KDK 共通トークン（--bg #1c1c1c・--kdk-accent #378ADD・
   hover/focus は赤・共通ヘッダー）ではなく、モック
   `master_edit_redesign_dark_v4.html` の意匠をそのまま使う（2026-07-25 Kinya さん判断）。
   共通に戻すときはこのブロックの `--cat-*` を消して `--kdk-*` へ差し替えれば済むよう、
   **変数は全部ここで宣言し、下の規則には生のカラーコード・生の文字サイズを書かない**。

   共通の約束から意図的に外れている点（リファレンス_UI設計 §13 に記録）:
     - ヘッダーが専用（左に品番と状態・右にナビ）
     - アクセントが青 #3B82F6（共通は #378ADD）／hover・focus も青（共通は赤）
     - 面の色が共通より一段暗い

   **大きさの正本は `--cat-base` 1つ。**「もう少し大きく／小さく」はここだけ直す。
   文字サイズは全部この変数からの倍率で出しているので、他は触らなくてよい。
   （髪の毛1本の境界線 border と影のぼかしだけは px のまま。rem にすると
   拡大時ににじむだけで、読みやすさに寄与しないため）

   スコープは body.cat-page 配下のみ。他の kikan 画面には漏らさないこと。 */

.cat-page {
  /* 書体。BIZ UD は Windows 10/11 に同梱なので、CSP（font-src 'self'）のまま使える。
     UD＝ユニバーサルデザイン書体で、0/O・1/l・8/B のような紛らわしい字形を
     見分けやすく作ってある。品番と金額を読み違えない、がこの画面の要件。
       BIZ UDPGothic … P＝プロポーショナル。本文向け
       BIZ UDGothic  … 等幅。数字が縦に揃うので金額・品番の列向け */
  --font-sans: "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --font-mono: "BIZ UDGothic", "Consolas", monospace;

  /* 大きさの正本。ここ1つで画面全体が拡縮する */
  --cat-base: 1.0625rem;                          /* = 17px 相当 */
  --cat-fs-xs: calc(var(--cat-base) * 0.70);      /* タグ・改定N回 */
  --cat-fs-sm: calc(var(--cat-base) * 0.78);      /* ラベル・補足 */
  --cat-fs-md: calc(var(--cat-base) * 0.88);      /* 表の見出し・注記 */
  --cat-fs-lg: calc(var(--cat-base) * 1.30);      /* カードの金額 */
  --cat-fs-xl: calc(var(--cat-base) * 1.50);      /* 見出しの大きい数値 */
  --cat-fs-2xl: calc(var(--cat-base) * 1.90);     /* 品番（ラベル2行ぶんの高さ） */

  --cat-bg: #0B0B0C;
  --cat-card: #151517;
  --cat-card2: #1C1C1F;
  --cat-field: #232327;
  --cat-field2: #1A1A1D;
  --cat-line: #2C2C31;
  --cat-line-strong: #3A3A41;
  --cat-ink: #EDEDEF;
  --cat-muted: #9A9AA3;
  /* 明るい部屋のノートPCで読める下限。元の #6E6E78 は暗背景で沈んで読めなかった */
  --cat-faint: #8C8C96;
  --cat-accent: #3B82F6;
  --cat-accent-dim: #1E3A5F;
  --cat-accent-ink: #8CC0FF;
  --cat-pos: #22C79A;
  --cat-pos-bg: #0F2B24;
  --cat-neg: #F0674B;
  --cat-neg-bg: #2E1712;
  --cat-warn: #E0A93B;
  --cat-warn-bg: #2B2213;
  /* 予約（まだきいていない未来の行）。金色の --cat-warn とも赤寄りの --cat-neg とも
     別に持つ。予約は「注意」でも「異常」でもなく、**この画面で唯一目立たせたい状態** */
  --cat-soon: #E8874F;
  --cat-soon-bg: #2E1C11;
  --cat-radius: 0.75rem;
  /* 横に並ぶ操作部品（入力・選択・ボタン）の高さ。**揃えるための正本はこれ1つ。**
     padding と行間だけで揃えようとすると必ずズレる: select は line-height を無視し、
     button は本文の行間（1.85）を継承するため（2026-07-25 実測で 45/38.6/51px にバラけた） */
  --cat-control-h: 2.8rem;

  background: var(--cat-bg);
  color: var(--cat-ink);
  font-family: var(--font-sans);
  font-size: var(--cat-base);
  /* 注意書きが数行に渡る画面なので、行を追う目が迷子にならない広さにする */
  line-height: 1.85;
}

.cat-main { max-width: 74rem; padding: 1.25rem 1.5rem 1rem; }
.cat-page a { color: var(--cat-accent); }
.cat-page .note { color: var(--cat-faint); font-size: var(--cat-fs-md); }
/* 注記の中で読み飛ばしてほしくない一文（優先順位など）だけ本文色へ上げる */
.cat-page .note b { color: var(--cat-muted); font-weight: 600; }

/* --- ヘッダー（この画面だけ共通ヘッダーを使わない） ---
   左に「いま何を直しているか」（品番・状態・規制）、右にナビと本人。
   共通ヘッダー（中央タイトル＋本人ゾーン・§2）はこの画面では出さない。 */

.cat-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 12, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cat-line);
}

.cat-topbar-inner {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.cat-idblock { display: flex; align-items: center; gap: 0.65rem; margin-right: auto; flex-wrap: wrap; }

/* 「管理品番」と商品名を2行に積む。品番はこの2行ぶんの高さで隣に置く */
.cat-idlabel { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }

.cat-idname {
  font-size: var(--cat-fs-sm);
  color: var(--cat-muted);
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-nav { display: flex; gap: 0.1rem; align-items: center; }

.cat-nav a, .cat-logout {
  font: inherit;
  font-size: var(--cat-fs-sm);
  font-weight: 500;
  color: var(--cat-muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}

.cat-nav a:hover, .cat-logout:hover { background: var(--cat-card2); color: var(--cat-ink); }

/* ナビ内の機能ボタン（コピー・グループ）。移動リンクと同じ骨格だが、機能だと分かるよう
   ホバー前から押せる面（背景）を見せる（2026-07-29 Kinya さん指示） */
.cat-nav .cat-navact { background: var(--cat-card2); }

.cat-userchip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--cat-fs-sm);
  color: var(--cat-muted);
  background: var(--cat-card);
  border: 1px solid var(--cat-line);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.cat-userchip .cat-dot { background: var(--cat-warn); width: 0.5rem; height: 0.5rem; }

.cat-eyebrow {
  font-size: var(--cat-fs-xs);
  letter-spacing: 0.16em;
  color: var(--cat-faint);
  font-weight: 600;
}

/* 積んだ2行（--cat-fs-xs と --cat-fs-sm を行間1.3で）と、だいたい同じ高さになる大きさ */
.cat-idnum {
  font-family: var(--font-mono);
  font-size: var(--cat-fs-2xl);
  line-height: 1;
  letter-spacing: -0.01em;
}

.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--cat-fs-xs);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

.cat-pill-ok { background: var(--cat-pos-bg); color: var(--cat-pos); }
.cat-pill-ng { background: var(--cat-neg-bg); color: var(--cat-neg); }
.cat-pill-warn { background: var(--cat-warn-bg); color: var(--cat-warn); }
.cat-dot { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: currentColor; }

/* --- サマリーカード --- */

.cat-seclabel {
  font-size: var(--cat-fs-xs);
  letter-spacing: 0.14em;
  color: var(--cat-faint);
  font-weight: 700;
  margin: 1.1rem 0 0.5rem;
}

.cat-legend { letter-spacing: 0; font-weight: 600; color: var(--cat-warn); margin-left: 0.6rem; }

.cat-sumgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.65rem; }
@media (max-width: 78rem) { .cat-sumgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 46rem) { .cat-sumgrid { grid-template-columns: repeat(2, 1fr); } }

.cat-stat {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--cat-card);
  border: 1px solid var(--cat-line);
  border-radius: var(--cat-radius);
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, transform 0.14s;
}

.cat-stat:hover { border-color: var(--cat-accent); background: #17181C; transform: translateY(-1px); }
.cat-stat:focus-visible { outline: 2px solid var(--cat-accent); outline-offset: 2px; }
.cat-stat.is-empty .cat-val { color: var(--cat-faint); }
.cat-stat.is-alert { background: var(--cat-neg-bg); border-color: #4A2018; }
.cat-stat.is-alert:hover { border-color: var(--cat-neg); background: var(--cat-neg-bg); }
.cat-stat.is-alert .cat-val { color: var(--cat-neg); }
.cat-stat.is-auto { border-style: dashed; border-color: #4A3C1C; }
.cat-stat.is-auto:hover { border-color: var(--cat-warn); background: #191712; }

.cat-lab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--cat-fs-sm);
  color: var(--cat-muted);
  font-weight: 600;
  margin-bottom: 0.3rem;
  line-height: 1.4;
}

.cat-val { display: block; font-family: var(--font-mono); font-size: var(--cat-fs-lg); line-height: 1.3; }
.cat-val.is-sm { font-family: var(--font-sans); font-size: var(--cat-fs-md); font-weight: 600; }

.cat-sub {
  display: block;
  font-size: var(--cat-fs-sm);
  color: var(--cat-faint);
  margin-top: 0.3rem;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-sub.is-calc { font-family: var(--font-mono); color: #C4A05C; }

.cat-rev, .cat-autotag {
  font-size: var(--cat-fs-xs);
  font-weight: 700;
  padding: 0.05rem 0.4rem;
  border-radius: 0.3rem;
  margin-left: auto;
  white-space: nowrap;
}

.cat-rev { color: var(--cat-muted); background: var(--cat-field); }
.cat-autotag { color: var(--cat-warn); background: var(--cat-warn-bg); }

.cat-hint {
  position: absolute;
  right: 0.75rem;
  bottom: 0.7rem;
  font-size: var(--cat-fs-xs);
  color: var(--cat-accent-ink);
  opacity: 0;
  transition: opacity 0.14s;
}

.cat-stat:hover .cat-hint, .cat-stat:focus-visible .cat-hint { opacity: 1; }
.cat-stat.is-auto:hover .cat-hint { color: var(--cat-warn); }

.cat-hint-box {
  background: var(--cat-card);
  border: 1px solid var(--cat-line);
  border-left: 3px solid var(--cat-accent);
  border-radius: 0 var(--cat-radius) var(--cat-radius) 0;
  padding: 0.85rem 1rem;
  margin-top: 1rem;
  font-size: var(--cat-fs-md);
  color: var(--cat-muted);
}

.cat-hint-box b { color: var(--cat-ink); }

/* --- セクションカード --- */

.cat-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }

.cat-card {
  background: var(--cat-card);
  border: 1px solid var(--cat-line);
  border-radius: var(--cat-radius);
  overflow: hidden;
  scroll-margin-top: 5rem;
}

.cat-cardhead {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--cat-line);
  background: var(--cat-card2);
}

.cat-kicker { width: 3px; height: 1rem; border-radius: 2px; background: var(--cat-accent); flex: none; }
.cat-kicker.is-ng { background: var(--cat-neg); }
.cat-cardhead h2 { font-size: var(--cat-fs-base); font-weight: 700; }
/* 補足はタイトルの右どなりに置く（右端に飛ばすとタイトルと離れて読まれない・2026-07-29 Kinya さん指摘） */
.cat-cardsub { font-size: var(--cat-fs-sm); color: var(--cat-faint); }
.cat-cardbody { padding: 1.1rem; }

.cat-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cat-grid-restriction { display: grid; grid-template-columns: 18rem 1fr; gap: 1.1rem; }
@media (max-width: 42rem) {
  .cat-grid3, .cat-grid-restriction { grid-template-columns: 1fr; }
}

.cat-field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; max-width: none; }
.cat-field label { font-size: var(--cat-fs-sm); font-weight: 600; color: var(--cat-muted); }

/* 入力欄・選択欄は**本文と同じ大きさ**にする。
   ここが本文より小さいと、打ち込んだ値を読み返すときに目が切り替わって
   打ち間違いに気づきにくい（この画面が扱うのは金額と品番）。 */
.cat-page input, .cat-page select, .cat-page textarea {
  width: 100%;
  font: inherit;
  font-size: var(--cat-fs-base);
  line-height: 1.5;
  color: var(--cat-ink);
  background: var(--cat-field);
  border: 1px solid var(--cat-line-strong);
  border-radius: 0.5rem;
  padding: 0.55rem 0.7rem;
  transition: border-color 0.12s, box-shadow 0.12s;
  /* 日付欄のカレンダーアイコンを暗背景で読めるようにする */
  color-scheme: dark;
}

.cat-page textarea { resize: vertical; min-height: 4.5rem; }

.cat-page input:focus, .cat-page select:focus, .cat-page textarea:focus {
  outline: none;
  border-color: var(--cat-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.cat-page input:disabled, .cat-page select:disabled {
  background: var(--cat-field2);
  color: var(--cat-muted);
  border-color: var(--cat-line);
}

.cat-page input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--cat-accent);
  box-shadow: none;
  padding: 0;
}

/* --- 表 --- */

.cat-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cat-fs-base); }

.cat-tbl th {
  text-align: left;
  font-size: var(--cat-fs-md);
  font-weight: 600;
  color: var(--cat-muted);
  letter-spacing: 0.04em;
  padding: 0 0.5rem 0.5rem;
  white-space: nowrap;
}

.cat-tbl td { padding: 0.25rem; vertical-align: middle; }
.cat-tbl td:first-child, .cat-tbl th:first-child { padding-left: 0; }

/* 確定済みの行（価格・請求上限）。**入力欄に見せない。**
   灰色の入力欄で出すと「押せば直せる」に見えるが、実際は disabled で何も起きない。
   枠を外してただの記録として並べ、鍵の印で直せないことを示す。 */
.cat-tbl .is-locked td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.cat-fixed { color: var(--cat-muted); padding-left: 0.7rem; }
.cat-num { font-family: var(--font-mono); text-align: right; color: var(--cat-ink); }

.cat-lock {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 0.4rem;
  color: var(--cat-faint);
}
.money input, .cat-money input { font-family: var(--font-mono); text-align: right; }

/* 検証エラーのセル。枠を赤くして「どの欄を直すか」を指す（メッセージは下の行に出る） */
.cat-cell-error input, .cat-cell-error select {
  border-color: var(--kdk-negative);
  box-shadow: 0 0 0 1px var(--kdk-negative);
}
/* エラー文（Django の errorlist）。箇条書きの点と余白を消してセルの左端から始める */
.form-error ul.errorlist { list-style: none; margin: 0 0 0.35rem; padding: 0; }
/* 状態（現行/予約）。**色で立たせるのは「予約」だけ。** 現行は日付と同じ落ち着いた色、
   過去はバッジを出さない（全部に色を付けると、いちばん見たい予約が埋もれる）。 */
.cat-state {
  display: inline-flex;
  font-size: var(--cat-fs-sm);
  font-weight: 700;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cat-state.is-current { color: var(--cat-muted); background: transparent; border: 1px solid var(--cat-line-strong); }
.cat-state.is-reserved { color: var(--cat-soon); background: var(--cat-soon-bg); border: 1px solid var(--cat-soon); }

/* 予約行の金額は「現行（取り消し線）→ 新価格」。いくらからいくらへ動くかを行の中で見せる */
.cat-was { color: var(--cat-faint); text-decoration: line-through; }
.cat-to { color: var(--cat-muted); margin: 0 0.3rem; font-family: var(--font-sans); }

.cat-w-state { width: 5.5rem; }
.cat-w-kind { width: 11rem; }
.cat-w-kind2 { width: 15rem; }
.cat-w-date { width: 14rem; }
.cat-w-money { width: 10rem; }
/* 削除列は見出しの「削除」が入る幅。チェックだけだと何の列か分からない */
.cat-w-del { width: 4rem; text-align: center; }
.cat-w-del input { width: auto; }
.cat-datecell { display: flex; gap: 0.4rem; align-items: center; }
.cat-datecell input { flex: 1; min-width: 0; }

/* 車両情報：年式は 元号セレクト＋年＋月 を1行に。各項目の下に「不明」チェック。
   列が5つ＋削除で横に長いので、この表だけ入力欄を一回り小さくする */
#s-vehicle .cat-tbl input:not([type="checkbox"]),
#s-vehicle .cat-tbl select {
  font-size: var(--cat-fs-md);
  padding: 0.4rem 0.5rem;
}
#s-vehicle .cat-tbl td { max-width: 11rem; }
#s-vehicle .cat-tbl td input:not([type="checkbox"]) { width: 100%; min-width: 0; }
.cat-w-vyear { width: 13rem; }
.cat-vyear { display: flex; gap: 0.25rem; align-items: center; }
#s-vehicle .cat-tbl td .cat-vyear select { width: 4.5rem; }
#s-vehicle .cat-tbl td .cat-vyear input:not([type="checkbox"]) { width: 3.2rem; }
.cat-vsep { color: var(--cat-faint); }
.cat-vest {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  margin-top: 0.3rem;
  font-size: var(--cat-fs-sm);
  color: var(--cat-muted);
  white-space: nowrap;
}
.cat-vest input { width: auto; }

.cat-today {
  flex: none;
  font: inherit;
  font-size: var(--cat-fs-md);
  font-weight: 600;
  color: var(--cat-accent-ink);
  background: var(--cat-accent-dim);
  border: 1px solid #2B4E7A;
  border-radius: 0.5rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.cat-today:hover { background: #264A73; color: #fff; }

.cat-addrow {
  margin-top: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: inherit;
  font-size: var(--cat-fs-md);
  font-weight: 600;
  color: var(--cat-accent-ink);
  background: transparent;
  border: 1px dashed var(--cat-line-strong);
  border-radius: 0.5rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.cat-addrow:hover { border-color: var(--cat-accent); background: var(--cat-accent-dim); }

.cat-krow {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.65rem;
  border: 1px solid var(--cat-line);
  border-radius: 0.6rem;
  background: var(--cat-card2);
  margin-bottom: 0.5rem;
}

@media (max-width: 44rem) { .cat-krow { grid-template-columns: 1fr; } }
.cat-krow-kind { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.cat-krow-name { font-size: var(--cat-fs-md); font-weight: 600; }
.cat-krow-when { font-size: var(--cat-fs-xs); color: var(--cat-faint); line-height: 1.4; margin-top: 0.15rem; }

/* --- 画面下の固定バー --- */

.cat-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.85rem 0;
  background: var(--cat-bg);
  border-top: 1px solid var(--cat-line);
}

.cat-barnote { margin-left: auto; font-size: var(--cat-fs-sm); color: var(--cat-faint); }

.cat-page .btn {
  font-size: var(--cat-fs-base);
  padding: 0.55rem 1.1rem;
  border-radius: 0.55rem;
  background: var(--cat-card);
  border-color: var(--cat-line-strong);
  color: var(--cat-muted);
}

.cat-page .btn:hover { color: var(--cat-ink); border-color: var(--cat-faint); }
.cat-page .btn-primary { background: var(--cat-accent); border-color: var(--cat-accent); color: #fff; }
.cat-page .btn-primary:hover { background: #2f6fd6; border-color: #2f6fd6; }
/* disabled の灰色は cat 意匠でも効かせる。この2行が無いと上の `.cat-page .btn-primary`
   が後勝ちして、**無効なのに青く見える**（2026-08-08 先上げボタンで実際に起きた） */
.cat-page .btn-primary:disabled { background: var(--surface2); border-color: var(--border); color: var(--text-dim); cursor: not-allowed; }
.cat-page .btn-primary:disabled:hover { background: var(--surface2); border-color: var(--border); }
.cat-page .actions .btn-primary { margin-left: 0; }

/* 新規作成系だけ緑（--kdk-positive）にする用途で追加（2026-09-01・管理品番マスタ一覧の
   「＋ 新規追加」）。.btn-primary と役割が競合しないよう別クラスにしてある。
   display:flex で上下左右センタリング（.cat-searchrow .btn の height 固定＋line-height
   だけの縦中央取りは、この位置だと少しズレて見えたため確実な方法に倒した） */
.cat-page .btn-positive {
  background: var(--kdk-positive); border-color: var(--kdk-positive); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.cat-page .btn-positive:hover { background: #178f68; border-color: #178f68; }

/* --- 履歴モーダル --- */

.cat-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3.5rem 1.25rem;
  background: rgba(0, 0, 0, 0.62);
}

.cat-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 44rem;
  max-height: 82vh;
  background: var(--cat-card);
  border: 1px solid var(--cat-line-strong);
  border-radius: 0.9rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.cat-modalhead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cat-line);
}

.cat-modalhead h3 { font-size: var(--cat-fs-lg); font-weight: 700; }

.cat-modalclose {
  margin-left: auto;
  width: 2.1rem;
  height: 2.1rem;
  font: inherit;
  font-size: var(--cat-fs-base);
  line-height: 1;
  color: var(--cat-muted);
  background: var(--cat-field2);
  border: 1px solid var(--cat-line-strong);
  border-radius: 0.5rem;
  cursor: pointer;
}

.cat-modalclose:hover { color: var(--cat-ink); border-color: var(--cat-faint); }
.cat-modalbody { padding: 1.1rem 1.25rem; overflow-y: auto; }

.cat-modalfoot {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 1.25rem;
  border-top: 1px solid var(--cat-line);
  font-size: var(--cat-fs-sm);
  color: var(--cat-faint);
}

.cat-goto { margin-left: auto; font-size: var(--cat-fs-md); font-weight: 600; white-space: nowrap; }

/* 保存前の確認（価格）。閲覧用の履歴モーダルより幅は狭く、ボタンは右寄せ */
.cat-modal.is-confirm { max-width: 34rem; }
.cat-modalfoot.is-actions { justify-content: flex-end; }
.cat-warnlist { margin: 0; padding-left: 1.2rem; line-height: 1.9; color: var(--cat-ink); }
.cat-warnlist li::marker { color: var(--cat-warn); }

.cat-kind {
  display: inline-flex;
  font-size: var(--cat-fs-sm);
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 0.4rem;
  white-space: nowrap;
}

.cat-kind-oem { background: #2E2618; color: #D8BC6E; }
.cat-kind-sup { background: #14292B; color: #6ECBD8; }
.cat-kind-list { background: #1B2E18; color: #8FCB6E; }
.cat-kind-a { background: #12283F; color: #7FB6F5; }
.cat-kind-b { background: #241E3C; color: #A79AE8; }
.cat-kind-unused { background: #302315; color: #DDA45F; }
/* -ship はモーダル側、-shipping は表の行（PriceKind.SHIPPING の値そのもの） */
.cat-kind-ship, .cat-kind-shipping { background: #2A2130; color: #C79AD8; }
.cat-kind-auto { background: var(--cat-warn-bg); color: var(--cat-warn); }
.cat-kind-gray { background: var(--cat-field); color: var(--cat-muted); }

/* 履歴のタイムライン */

.cat-tl { list-style: none; margin: 0; padding-left: 1.25rem; border-left: 1px solid var(--cat-line-strong); }
.cat-tl li { position: relative; padding: 0 0 1.25rem 1.25rem; }
.cat-tl li:last-child { padding-bottom: 0; }

.cat-tl li::before {
  content: "";
  position: absolute;
  left: -1.55rem;
  top: 0.55rem;
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 50%;
  background: var(--cat-faint);
  border: 2px solid var(--cat-card);
}

.cat-tl li.is-current::before { background: var(--cat-pos); box-shadow: 0 0 0 3px var(--cat-pos-bg); }
.cat-tl-row { display: flex; align-items: baseline; gap: 0.65rem; flex-wrap: wrap; }
.cat-amt { font-family: var(--font-mono); font-size: var(--cat-fs-lg); }
.cat-amt.is-text { font-family: var(--font-sans); font-size: var(--cat-fs-base); font-weight: 600; }
.cat-tl-date { font-family: var(--font-mono); font-size: var(--cat-fs-md); color: var(--cat-muted); }
.cat-tl-meta { font-size: var(--cat-fs-sm); color: var(--cat-faint); }
.cat-tl-was { font-size: var(--cat-fs-sm); color: var(--cat-neg); }
.cat-tag { font-size: var(--cat-fs-xs); font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 0.3rem; }
.cat-tag.is-now { color: var(--cat-pos); background: var(--cat-pos-bg); }
.cat-tag.is-past { color: var(--cat-faint); background: var(--cat-field); }
.cat-tag.is-future { color: var(--cat-warn); background: var(--cat-warn-bg); }
.cat-tag.is-add { color: var(--cat-accent-ink); background: var(--cat-accent-dim); }
.cat-tag.is-del { color: var(--cat-neg); background: var(--cat-neg-bg); }
.cat-delta { font-family: var(--font-mono); font-size: var(--cat-fs-md); }
.cat-delta.is-up { color: var(--cat-neg); }
.cat-delta.is-down { color: var(--cat-pos); }
.cat-empty { color: var(--cat-faint); font-size: var(--cat-fs-base); padding: 0.65rem 0; }

/* 導出（一般C/D）の計算の詳細 */

.cat-calcbox {
  background: var(--cat-field2);
  border: 1px solid var(--cat-line);
  border-radius: 0.6rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.cat-calcline {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--cat-fs-lg);
  margin-bottom: 0.75rem;
}

.cat-calc-op { color: var(--cat-faint); }
.cat-calc-base { color: #8FCB6E; }
.cat-calc-rate { color: var(--cat-warn); }
.cat-calc-res { color: var(--cat-ink); font-size: var(--cat-fs-xl); }
.cat-calcmeta { display: grid; grid-template-columns: 7rem 1fr; gap: 0.35rem 0.9rem; font-size: var(--cat-fs-md); }
.cat-calcmeta dt { color: var(--cat-faint); }
.cat-calcmeta dd { margin: 0; color: var(--cat-ink); }

.cat-subh {
  font-size: var(--cat-fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cat-faint);
  margin: 1.25rem 0 0.75rem;
}

/* ===== 管理品番マスタ：一覧（2026-07-25 刷新） =====

   詳細パネルと同じ意匠（body.cat-page の --cat-* をそのまま使う）。
   ここは「探す」ための画面なので、1行に**探す判断に要るものだけ**を載せ、
   行のどこを押しても開けるようにする。

   絞り込み・並べ替え・ページ送りは全部サーバー（listing.py）のリンクとフォーム。
   JS（catalog_list.js）は行クリック・キーボード・検索語の強調だけで、止まっても使える。 */

/* 列が10ある。詳細パネルより広く使う。
   **ヘッダーの内側も同じ幅にする。** 揃えないとヘッダーだけ内側に寄って、
   マスタ名と検索欄・表の左端がずれる（2026-07-25 Kinya さん指摘） */
.cat-listpage .cat-main,
.cat-listpage .cat-topbar-inner { max-width: 88rem; }

/* 管理品番マスタ一覧だけ、本文ブロックをページ中央へ寄せる（2026-09-01 Kinya さん指示）。
   .cat-main には max-width はあっても margin:auto が無いため、ビューポートが
   88rem（≈1408px）より広い画面では本文が左に寄って見える。他の cat-listpage 画面は
   今回のスコープ外なので `.cat-productlist` にだけ効かせる（討議はモック
   kikan/mocks/catalog_column_custom.html 冒頭コメント） */
body.cat-productlist .cat-main { margin-left: auto; margin-right: auto; }
.cat-brand { font-size: var(--cat-fs-lg); font-weight: 700; line-height: 1.2; }

/* cat-topbar の見出し左アイキャッチ。--logo-icon と .ico-<name> は kikan/static/kdk-common.css の正本を
   そのまま使う（kikan.css は kdk-common.css の後に読むので変数・クラスは共有できる）。
   .cat-idlabel の直下の .cat-brand だけに絞るのは、同じクラスを M/S 伝票番号入力の見た目合わせ
   （.mslip-numpre/.mslip-numin）に流用している箇所を巻き込まないため（2026-08-10）。 */
.cat-idlabel > .cat-brand { display: inline-flex; align-items: center; gap: 0.5em; }
.cat-idlabel > .cat-brand::before {
  content: ""; width: 1em; height: 1em; flex-shrink: 0; background: currentColor;
  -webkit-mask: var(--logo-icon) center / contain no-repeat;
          mask: var(--logo-icon) center / contain no-repeat;
}

/* --- ツールバー（検索・絞り込み） --- */

/* ヘッダーの下にぴったり付ける。**高さは決め打ちにしない。**
   ヘッダーもツールバーも幅によって折り返して背が伸びるので、実測した高さを
   catalog_list.js が --cat-topbar-h / --cat-toolbar-h に入れる。
   JS が動かないときのために、折り返さない場合の実測値を既定値として置いてある。 */
.cat-toolbar {
  position: sticky;
  top: var(--cat-topbar-h, 3.4rem);
  z-index: 40;
  background: var(--cat-bg);
  padding: 0.4rem 0 0.75rem;
}

.cat-searchrow { display: flex; gap: 0.65rem; align-items: center; flex-wrap: wrap; }
.cat-searchbox { position: relative; flex: 1; min-width: 16rem; max-width: 29rem; }

.cat-searchbox svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cat-faint);
  pointer-events: none;
}

.cat-searchbox input { padding-left: 2.3rem; padding-right: 2.3rem; }

.cat-kbd {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--cat-fs-xs);
  color: var(--cat-faint);
  background: var(--cat-field2);
  border: 1px solid var(--cat-line-strong);
  border-radius: 0.3rem;
  padding: 0.1rem 0.35rem;
  pointer-events: none;
}

/* 絞り込みの選択欄は中身ぶんの幅でよい（入力欄の 100% を打ち消す） */
.cat-searchrow select { width: auto; min-width: 11rem; }
.cat-searchrow .btn-primary { margin-left: auto; }
/* 「絞り込む」は右端（既定の margin-left:auto）。「＋ 新規追加」はそのすぐ隣に
   並べる（auto を重ねると2つの間が開く）。2026-08-01 Kinya さん指示 */
.cat-searchrow .pe-addbtn { margin-left: 0; }

/* 横並びの操作部品は高さを揃える。上下 padding ではなく height で決める
   （理由は --cat-control-h の注記）。中身は input/select/button とも縦中央に来る */
.cat-searchrow input,
.cat-searchrow select,
.cat-searchrow .btn {
  height: var(--cat-control-h);
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.5;
}

.cat-chips { display: flex; gap: 0.45rem; align-items: center; margin-top: 0.65rem; flex-wrap: wrap; }

/* ⚠️ セレクタから .cat-page を外さないこと。チップもクリアも <a> なので、
   `.cat-page a { color: accent }`（要素セレクタぶん強い）に負けて全部青くなり、
   **押しているチップと押していないチップが見分けられなくなる**（2026-07-25 実際に発生）。 */
.cat-page .cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--cat-fs-sm);
  font-weight: 600;
  color: var(--cat-muted);
  text-decoration: none;
  background: var(--cat-card);
  border: 1px solid var(--cat-line);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.cat-page .cat-chip:hover { border-color: var(--cat-line-strong); color: var(--cat-ink); }
.cat-page .cat-chip.is-on { background: var(--cat-accent-dim); border-color: #2B4E7A; color: var(--cat-accent-ink); }
.cat-page .cat-chip.is-on.is-danger { background: var(--cat-neg-bg); border-color: #4A2018; color: var(--cat-neg); }
/* 件数は本文より一段落として、押す言葉のほうを先に読ませる */
.cat-chip-n { font-family: var(--font-mono); font-size: var(--cat-fs-xs); color: var(--cat-faint); }
.cat-page .cat-chip.is-on .cat-chip-n { color: inherit; opacity: 0.75; }

.cat-page .cat-clear { font-size: var(--cat-fs-sm); color: var(--cat-faint); }
.cat-page .cat-clear:hover { color: var(--cat-ink); }
.cat-count { margin-left: auto; font-size: var(--cat-fs-sm); color: var(--cat-muted); }
.cat-count b { font-family: var(--font-mono); font-size: var(--cat-fs-md); color: var(--cat-ink); }
.cat-of { color: var(--cat-faint); }

/* --- 列を選ぶ（管理品番マスタ一覧の列カスタム。2026-09-01） ---
   討議はモック kikan/mocks/catalog_column_custom.html。骨格・クラス名はそのまま実装へ。
   JS は static/js/catalog_columns.js（チェック/ドラッグ→保存→リロード） */

.colpick-btn.is-active {
  border-color: var(--kdk-accent); color: var(--kdk-accent);
  background: rgba(55, 138, 221, 0.12);
}

.colpick-panel {
  position: absolute; z-index: 50; margin-top: 0.4rem;
  width: 15rem;
  background: var(--cat-card); border: 1px solid var(--cat-line-strong);
  border-radius: 0.7rem; box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  padding: 0.7rem 0.2rem;
}
.colpick-panel[hidden] { display: none; }
.colpick-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 0.9rem 0.5rem; margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--cat-line);
  gap: 0.5rem;
}
.colpick-head h4 {
  font-size: var(--cat-productlist-headfs); color: var(--cat-muted); font-weight: 600;
  white-space: nowrap;
}
.colpick-reset {
  font-size: var(--cat-productlist-headfs); color: var(--kdk-accent); cursor: pointer;
  background: none; border: none; font: inherit; padding: 0; white-space: nowrap;
}
.colpick-reset:hover { text-decoration: underline; }

/* スクロールさせず、候補列が一度に全部見えるようにする（2026-09-01 Kinya さん指示） */
.colpick-list { max-height: none; overflow-y: visible; }
.colpick-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.9rem; font-size: var(--cat-fs-sm); color: var(--cat-ink);
}
.colpick-item:hover { background: rgba(255, 255, 255, 0.04); }
.colpick-item input { cursor: pointer; flex-shrink: 0; }
.colpick-item label { flex: 1; cursor: pointer; }
.colpick-drag {
  cursor: grab; color: var(--cat-faint); user-select: none; flex-shrink: 0;
  font-size: 0.9rem; line-height: 1; padding: 0 0.1rem;
}
.colpick-drag:active { cursor: grabbing; }
.colpick-item.is-dragging { opacity: 0.4; }
.colpick-item.is-dragover { border-top: 2px solid var(--kdk-accent); }

/* --- 表 --- */

/* ⚠️ ここに overflow:hidden を付けない。角丸のはみ出しは消せるが、
   **中の thead の position:sticky が効かなくなる**（2026-07-25 実測）。
   角はセル側で丸める。 */
.cat-tablecard {
  background: var(--cat-card);
  border: 1px solid var(--cat-line);
  border-radius: var(--cat-radius);
}

/* 表の本文は基準の 17px（--cat-base）。列10本を入れるために 0.88 へ縮めていたのを
   2026-07-29 に廃止（見た目の基準は詳細パネル。入らないときは幅側で調整し、文字は縮めない） */
.cat-list { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cat-base); }

.cat-list thead th {
  position: sticky;
  /* ツールバーの下。行を送っても列の意味が分からなくならないように残す */
  top: calc(var(--cat-topbar-h, 3.4rem) + var(--cat-toolbar-h, 5.2rem));
  z-index: 30;
  background: var(--cat-card2);
  text-align: left;
  font-size: var(--cat-fs-xs);
  font-weight: 700;
  color: var(--cat-faint);
  letter-spacing: 0.06em;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--cat-line);
  white-space: nowrap;
}

.cat-list thead th.is-num { text-align: right; }
/* 管理品番マスタ一覧だけ、見出しを+3px・中央寄せに（2026-09-01 Kinya さん指示。
   列カスタムで列数が可変になり、右寄せ/左寄せが混在すると視線が散るための調整）。
   列を選ぶパネルの見出し（.colpick-head h4/.colpick-reset）もこの値に揃えている */
:root { --cat-productlist-headfs: calc(var(--cat-fs-xs) + 3px); }
.cat-productlist .cat-list thead th { font-size: var(--cat-productlist-headfs); text-align: center; }
/* カード側で overflow を切れないぶん、角はここで丸める */
.cat-list thead th:first-child { border-top-left-radius: var(--cat-radius); }
.cat-list thead th:last-child { border-top-right-radius: var(--cat-radius); }
.cat-list thead th a { color: inherit; text-decoration: none; }
.cat-list thead th a:hover { color: var(--cat-muted); }
.cat-sort { opacity: 0.35; margin-left: 0.25rem; }
.cat-list thead th.is-active a { color: var(--cat-muted); }
.cat-list thead th.is-active .cat-sort { opacity: 1; color: var(--cat-accent); }

.cat-list tbody td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid #202024;
  vertical-align: middle;
  white-space: nowrap;
}

.cat-list tbody tr { cursor: pointer; transition: background 0.1s; }
.cat-list tbody tr:hover, .cat-list tbody tr.is-cursor { background: #1A1B1F; }
.cat-list tbody tr.is-cursor { box-shadow: inset 2px 0 0 var(--cat-accent); }
.cat-list tbody tr:hover .cat-go, .cat-list tbody tr.is-cursor .cat-go { opacity: 1; }
.cat-list tbody tr:last-child td { border-bottom: 0; }

/* 品番などの「リンクのある数字」は淡い青（--cat-accent-ink）で統一（2026-07-29）。
   a.cat-pn を並べているのは、`.cat-page a { color: --cat-accent }`（要素セレクタぶん強い）に
   負けて、リンクの品番だけ濃い青になっていたため。濃い青は文中リンク・ボタン用 */
.cat-pn,
.cat-page a.cat-pn { font-family: var(--font-mono); color: var(--cat-accent-ink); font-weight: 500; text-decoration: none; }
.cat-pn:hover { text-decoration: underline; }
.cat-listname { color: var(--cat-ink); max-width: 18rem; overflow: hidden; text-overflow: ellipsis; }

.cat-grp {
  font-family: var(--font-mono);
  font-size: var(--cat-fs-sm);
  color: var(--cat-muted);
  background: var(--cat-field);
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
}

.cat-list .cat-num { font-family: var(--font-mono); text-align: right; }
.cat-num.is-dim, .cat-dim { color: var(--cat-faint); }

.cat-st { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--cat-fs-md); font-weight: 600; }
.cat-st.is-selling { color: var(--cat-pos); }
.cat-st.is-suspended { color: var(--cat-warn); }
.cat-st.is-discontinued { color: var(--cat-faint); }
.cat-st.is-planned { color: var(--cat-accent-ink); }
.cat-st.is-disabled { color: var(--cat-neg); }
/* 例外販売あり。状態（販売中／無効）とは別軸の事実なので、状態色と被らない青にする */
.cat-st.is-special { color: var(--cat-accent-ink); }

.cat-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--cat-fs-xs);
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 0.4rem;
}

.cat-flag.is-ng { background: var(--cat-neg-bg); color: var(--cat-neg); }
.cat-flag.is-cond { background: var(--cat-warn-bg); color: var(--cat-warn); }

.cat-kn { font-family: var(--font-mono); font-size: var(--cat-fs-md); color: var(--cat-muted); }
.cat-kn.is-zero { color: var(--cat-faint); }
.cat-upd { font-family: var(--font-mono); font-size: var(--cat-fs-md); color: var(--cat-faint); }
.cat-w-go { width: 2rem; }
.cat-go { color: var(--cat-faint); opacity: 0; transition: opacity 0.12s; }

/* ============================================================
   一括価格改定（管理品番マスタ一覧・catalog:bulk_price_preview/apply）。
   意匠は mocks/catalog_bulk_price_update.html の討議どおり（2026-08-25）。
   配線は static/js/catalog_bulk_price.js。
   ============================================================ */

/* 一覧のチェック列。選択モード中（table.is-bulk-mode）だけ出す */
.cat-w-check { width: 2.4rem; text-align: center; }
.cat-list .cat-checkcol { display: none; }
.cat-list.is-bulk-mode .cat-checkcol { display: table-cell; }

/* 選択中の行。他の hover/is-cursor と見分けられるよう、うっすら色を乗せる
   （リファレンス_UI設計 §7「状態色の付いた行は hover 対象から外す」と同じ考え方） */
.cat-list tbody tr.is-picked { background: rgba(55, 138, 221, 0.10); }
.cat-list tbody tr.is-picked:hover { background: rgba(55, 138, 221, 0.16); }
.cat-list tbody tr.is-picked td:first-child { box-shadow: inset 2px 0 0 var(--kdk-accent); }

/* 選択モードの起点ボタン（トグル） */
.bulk-toggle-btn.is-active {
  border-color: var(--kdk-accent); color: var(--kdk-accent);
  background: rgba(55, 138, 221, 0.12);
}

/* 選択件数バー。画面下に固定。選択0件のときは隠す */
.bulk-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 40;
  display: flex; align-items: center; gap: 14px;
  background: var(--cat-card); border: 1px solid var(--cat-line-strong);
  border-radius: 999px; padding: 10px 12px 10px 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  font-size: var(--cat-fs-md);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar .bulk-count { color: var(--cat-ink); font-weight: 700; }
.bulk-bar .bulk-count b { color: var(--kdk-accent); font-family: var(--font-mono); }
.bulk-bar .btn-ghost {
  font: inherit; background: transparent; color: var(--cat-muted);
  border: 1px solid var(--cat-line-strong); border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
}
.bulk-bar .btn-ghost:hover { border-color: var(--kdk-active); color: var(--cat-ink); }
.bulk-bar .btn-primary {
  font: inherit; background: var(--kdk-accent); color: #fff; border: none;
  border-radius: 999px; padding: 8px 18px; font-weight: 700; cursor: pointer;
}
.bulk-bar .btn-primary:hover { filter: brightness(1.08); }

/* 条件入力パネル。cat-modal の骨格を再利用しつつ、この用途だけ広くする */
.cat-modal.is-bulk { max-width: 42rem; }

/* モーダル見出しの選択件数 */
.bulk-headcount { margin-left: -0.35rem; font-size: var(--cat-fs-sm); color: var(--cat-faint); }

/* 列選択（3枚のセグメントボタン）。リファレンス_UI設計 §7「選択中(active)状態」の
   標準（赤枠＋文字明度UP＋薄い赤の塗り・太字にしない）をそのまま使う */
.bulk-colpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.bulk-coltab {
  font: inherit; font-size: var(--cat-fs-md); cursor: pointer;
  border: 1px solid var(--cat-line-strong); border-radius: 0.6rem;
  background: var(--cat-field); color: var(--cat-muted);
  padding: 0.7rem 0.8rem; text-align: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bulk-coltab:hover { border-color: var(--kdk-active); color: var(--cat-ink); }
.bulk-coltab.is-active {
  border-color: var(--kdk-active); color: var(--cat-ink);
  background: rgba(122, 37, 37, 0.18);
}

.bulk-field { margin-bottom: 0.9rem; }
.bulk-field > label { display: block; font-size: var(--cat-fs-sm); color: var(--cat-muted); margin-bottom: 0.35rem; }
.bulk-inputrow { display: flex; align-items: center; gap: 0.5rem; }
.bulk-inputrow input[type="number"], .bulk-inputrow input[type="date"] {
  font: inherit; font-family: var(--font-mono); font-size: var(--cat-fs-md);
  background: var(--cat-field2); color: var(--cat-ink);
  border: 1px solid var(--cat-line-strong); border-radius: 0.5rem;
  padding: 0.5rem 0.7rem; width: 12rem;
}
.bulk-inputrow input:focus { outline: none; border-color: var(--kdk-active); }
.bulk-unit { color: var(--cat-faint); font-size: var(--cat-fs-sm); }
.bulk-datebtn {
  font: inherit; font-size: var(--cat-fs-sm); cursor: pointer; white-space: nowrap;
  background: var(--cat-field2); color: var(--cat-muted);
  border: 1px solid var(--cat-line-strong); border-radius: 0.5rem;
  padding: 0.45rem 0.7rem;
}
.bulk-datebtn:hover { border-color: var(--kdk-active); color: var(--cat-ink); }
.bulk-hint { margin-top: 0.35rem; font-size: var(--cat-fs-xs); color: var(--cat-faint); }

/* 確認（ドライラン）画面：品番ごとの現在→新価格を並べる表 */
.cat-modal.is-review { max-width: 52rem; }
table.bulk-diff { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cat-fs-md); }
table.bulk-diff th {
  text-align: left; font-size: var(--cat-fs-xs); font-weight: 600; color: var(--cat-faint);
  letter-spacing: .03em; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--cat-line-strong);
}
table.bulk-diff th.is-num, table.bulk-diff td.is-num { text-align: right; }
table.bulk-diff td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--cat-line); vertical-align: top; }
table.bulk-diff td.is-num { font-family: var(--font-mono); }
table.bulk-diff tr.is-excluded td { color: var(--cat-faint); }
table.bulk-diff tr.is-excluded .bulk-reason { color: var(--cat-warn); }
table.bulk-diff tr.is-error td { color: var(--cat-neg); }
.bulk-arrow { color: var(--cat-faint); margin: 0 0.35rem; }
.bulk-diff-new { color: var(--kdk-accent); font-weight: 700; }
.bulk-reason { font-size: var(--cat-fs-xs); display: block; margin-top: 0.15rem; }
.bulk-tally {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  font-size: var(--cat-fs-sm); color: var(--cat-muted);
  padding: 0.7rem 0; border-top: 1px dashed var(--cat-line-strong); margin-top: 0.6rem;
}
.bulk-tally b { color: var(--cat-ink); font-family: var(--font-mono); }
.bulk-tally .is-warn b { color: var(--cat-warn); }
.bulk-tally .is-err b { color: var(--cat-neg); }

.bulk-stopbox {
  display: flex; gap: 0.6rem; align-items: flex-start;
  background: var(--cat-warn-bg); border: 1px solid var(--cat-warn);
  border-radius: 0.6rem; padding: 0.8rem 1rem; margin-bottom: 0.8rem;
  color: var(--cat-ink); font-size: var(--cat-fs-sm); line-height: 1.7;
}
.bulk-stopbox .ico { font-size: 1.1rem; line-height: 1; }

/* 完了画面 */
.cat-modal.is-done { max-width: 30rem; text-align: center; }
.bulk-donebody { padding: 2.2rem 1.5rem; }
.bulk-doneicon {
  width: 3.2rem; height: 3.2rem; margin: 0 auto 0.9rem;
  border-radius: 50%; background: var(--cat-pos-bg); color: var(--cat-pos);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.bulk-donebody h3 { font-size: var(--cat-fs-lg); margin-bottom: 0.5rem; }
.bulk-donebody p { font-size: var(--cat-fs-sm); color: var(--cat-muted); line-height: 1.8; }

/* 互換品番マスタ：一覧がそのまま編集面。1行＝1つの form（実体は表の外。
   form は tr の直下に置けないため、セルの入力欄と form= で結んである） */
.cat-editlist td { vertical-align: middle; }
.cat-editlist input[type="text"] { width: 12rem; }
.cat-editlist select { max-width: 12rem; }
/* マスタ共通の一覧＝編集面（page_list.html）: 入力欄の幅は列の max_length から
   ビュー（page_listing._width_class）が決める。コードは短く・住所は広く。
   仕入先（8列）が 88rem に収まるよう、セルの左右パディングもこの表だけ詰める */
.cat-editlist input[type="text"].cat-in-xs { width: 5.5rem; }
.cat-editlist input[type="text"].cat-in-sm { width: 7rem; }
.cat-editlist input[type="text"].cat-in-md { width: 9.5rem; }
.cat-editlist input[type="text"].cat-in-lg { width: 13rem; }
/* 長い名前を打つ欄。ch は「0 の字幅」なので、半角40文字ぶんがそのまま見える */
.cat-editlist input[type="text"].cat-in-xl { width: 40ch; max-width: 100%; }
.cat-pagelist thead th,
.cat-pagelist tbody td { padding-left: 0.55rem; padding-right: 0.55rem; }

/* 行ごと form の置き場。一覧から外した列（list_fields 外）の入力欄も値付きで
   ここに入る（外すと1行保存がその列を空で上書きするため）。見せない・でも送る */
.cat-rowforms { display: none; }

/* 列の多いマスタ（仕入先）は、その表だけ一回り小さくする（リファレンス_UI設計 §13
   「列の多い入力表」の例外規定）。長い値（住所・メール）は省略で切って幅を守る。
   ドロワーへ移した入力欄はこの表の外に出るので、編集時は通常サイズに戻る */
.cat-dense { font-size: var(--cat-fs-md); }
.cat-dense .pe-val {
  display: inline-block;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.cat-dense input[type="text"], .cat-dense select {
  font-size: var(--cat-fs-md);
  padding: 0.4rem 0.5rem;
}

/* ---- 一覧の「見る」寄せ（master_edit_ui.js が有効なときだけ効く） -------------
   一覧テーブルには入力欄を見せず、値はテキスト表示。編集は
   パターンA（.pe-inline）＝行クリックでその場の入力欄、
   パターンB（.pe-drawer）＝行クリックで右ドロワー。
   JS が止まると body にクラスが付かず、従来の入力欄つき一覧のまま動く。
   色は既存の --cat-* だけを使う（意匠は変えない。2026-08-01 Kinya さん指示） */

.pe-inline .pe-field, .pe-inline .pe-fieldwrap,
.pe-drawer .cat-editlist .pe-field, .pe-drawer .cat-editlist .pe-fieldwrap { display: none; }
.pe-inline .cat-editlist .cat-rowsave,
.pe-drawer .cat-editlist .cat-rowsave { display: none; }
.pe-inline .cat-addrowline .cat-rowsave.is-add,
.pe-drawer .cat-addrowline .cat-rowsave.is-add { display: inline-block; }
.pe-inline .cat-addrowline .pe-val, .pe-drawer .cat-addrowline .pe-val { display: none; }
.pe-inline tbody tr:not(.cat-addrowline) { cursor: pointer; }
.pe-drawer tbody tr:not(.cat-addrowline) { cursor: pointer; }
.pe-val.pe-status:not(.is-off) { color: var(--cat-pos); }
.pe-val.pe-status::before {
  content: "";
  display: inline-block;
  width: 0.42rem; height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  margin-right: 0.4rem;
  vertical-align: 0.1rem;
}

/* パターンA: 編集中の行だけ入力欄・保存・取消を出す */
.pe-inline tr.is-editing .pe-field,
.pe-inline tr.is-editing .pe-fieldwrap { display: inline-block; }
.pe-inline tr.is-editing .pe-val { display: none; }
.pe-inline tr.is-editing .cat-rowsave { display: inline-block; opacity: 1; }
.pe-inline .pe-cancel, .pe-inline .pe-dirtytag { display: none; }
.pe-inline tr.is-editing .pe-cancel { display: inline-block; margin-left: 0.35rem; }
.pe-inline tr.is-dirty td { background: var(--cat-warn-bg); }
.pe-inline tr.is-dirty .pe-dirtytag {
  display: inline-block;
  margin-right: 0.5rem;
  font-size: var(--cat-fs-xs);
  font-weight: 700;
  color: var(--cat-warn);
}

/* パターンB: 追加は「＋ 新規追加」ボタン → ドロワー。追加行は隠すだけで DOM に残す
   （入力欄と form の実体。JS が止まれば追加行がそのまま見えて従来どおり使える） */
.pe-drawer.pe-hideaddrow .cat-addrowline { display: none; }
.cat-drawer .pe-dkey { display: none; }
.cat-drawer.is-add .pe-dkey { display: block; }

/* パターンB: 選択中の行 */
.pe-drawer tr.is-open td { background: var(--cat-accent-dim); }
.pe-drawer tr.is-open td:first-child { box-shadow: inset 2px 0 0 var(--cat-accent); }

/* 右ドロワー。素の .cat-overlay を再定義しないこと（履歴・保存確認モーダルが
   同じクラスを使っており、opacity: 0 を後勝ちでかぶせると見えなくなる）。
   ドロワーの幕は .is-drawer を付けた側だけに効かせる（2026-08-05） */
.cat-overlay.is-drawer {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s;
  z-index: 60;
}
.cat-overlay.is-drawer.open { opacity: 1; pointer-events: auto; }
.cat-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 28rem; max-width: 92vw;
  background: var(--cat-card);
  border-left: 1px solid var(--cat-line-strong);
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
  z-index: 70;
  display: flex; flex-direction: column;
}
.cat-drawer.open { transform: translateX(0); }
.cat-drawer-head {
  padding: 1.1rem 1.3rem 0.9rem;
  border-bottom: 1px solid var(--cat-line);
  display: flex; align-items: flex-start; gap: 0.6rem;
}
.cat-drawer-head .cat-eyebrow { display: block; margin-bottom: 0.2rem; }
.cat-drawer-head h2 { font-size: var(--cat-fs-lg); font-family: var(--font-mono); margin: 0; }
.cat-drawer-head .pe-dclose { margin-left: auto; padding: 0.25rem 0.6rem; }
.cat-drawer-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.3rem; }
.pe-dfield { margin-bottom: 1.1rem; }
.pe-dfield > label {
  display: block;
  font-size: var(--cat-fs-sm);
  font-weight: 700;
  color: var(--cat-faint);
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.pe-dfield [data-slot] .pe-fieldwrap { display: inline-flex; }
.cat-drawer .pe-field { display: inline-block; }
.cat-drawer input[type="text"].pe-field,
.cat-drawer select.pe-field { width: 100%; max-width: 100%; }
/* 自由記述（例: 仕入先マスタの注文書の注意書き）は1行入力欄だと狭すぎるので
   textarea にして幅いっぱい・複数行にする（ドロワー本体幅28rem・左右パディング
   1.3rem×2 = 実質25.4rem ≒ 全角30文字ぶん。2026-08-31 Kinya さん要望） */
.cat-drawer textarea.pe-field {
  width: 100%; max-width: 100%; min-height: 4.5rem; resize: vertical;
}
.pe-dmeta {
  background: var(--cat-card2);
  border: 1px solid var(--cat-line);
  border-radius: calc(var(--cat-radius) * 0.6);
  padding: 0.7rem 0.9rem;
  font-size: var(--cat-fs-sm);
  color: var(--cat-faint);
}
.pe-dmeta b { color: var(--cat-muted); font-weight: 500; font-family: var(--font-mono); }
.cat-drawer-foot {
  padding: 0.9rem 1.3rem;
  border-top: 1px solid var(--cat-line);
  display: flex; gap: 0.6rem;
}
.cat-drawer-foot .btn { flex: 1; }
/* 削除はドロワーの足元・左端。キャンセル／保存と同じ幅で並ばせず、
   「主たる操作ではない」ことを幅と色で見せる（押し間違いを減らす） */
.pe-ddel { display: flex; }
.pe-ddel:empty { display: none; }
.pe-ddel .btn {
  flex: 0 0 auto;
  color: var(--cat-neg);
  border-color: transparent;
}
.pe-ddel .btn:hover { border-color: var(--cat-neg); }
/* JS が動いていれば行の削除ボタンはドロワーへ移るので、行では隠す
   （移すのは開いた行だけなので、閉じている行のぶんをここで消しておく）。
   JS が止まれば pe-drawer が付かないため、行にそのまま出て使える */
.pe-drawer .cat-editlist .cat-rowdel { display: none; }

/* トースト（保存成功の知らせ。エラーは従来どおり上に出る） */
.cat-toast {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(4rem);
  background: var(--cat-card2);
  border: 1px solid var(--cat-line-strong);
  color: var(--cat-ink);
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-size: var(--cat-fs-md);
  z-index: 80;
  opacity: 0;
  transition: transform 0.25s, opacity 0.25s;
}
.cat-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.cat-toast::before { content: "✓ "; color: var(--cat-pos); font-weight: 700; }
/* 商品名は品番の**横**に添える（下に落とすと行が2段になって、50行では
   縦に間延びして探しにくい。2026-07-27 Kinya さん指摘） */
.cat-refname {
  margin-left: 0.5rem;
  font-size: var(--cat-fs-sm);
  color: var(--cat-faint);
  white-space: nowrap;
}
.cat-editlist .cat-f-product { white-space: nowrap; }
.cat-activebox { display: inline-flex; align-items: center; }
/* 追加の行。既存行と地続きに見えると打ち間違いのもとなので、下線で切って
   薄く沈めておく（普段は探す画面で、追加はときどきの操作）。
   見出しのすぐ下に固定する（スクロールしてもいつでも追加できる。
   2026-08-01 Kinya さん指示。積み位置は catalog_list.js が実測して返す変数） */
.cat-addrowline td {
  position: sticky;
  top: calc(var(--cat-topbar-h, 3.4rem) + var(--cat-toolbar-h, 5.2rem)
            + var(--cat-thead-h, 2.4rem));
  z-index: 20;
  background: var(--cat-field);
  border-bottom: 1px solid var(--cat-line);
}
.cat-addrowline input[type="text"] { width: 12rem; }
.cat-addcell { font-family: var(--font-mono); }
.cat-addrowline .cat-rowsave.is-add { opacity: 1; }

/* 「区分なし」はメーカーマスタへの入口。押せることが分かる見た目にする */
.cat-setcat { color: var(--cat-faint); font-size: var(--cat-fs-sm); text-decoration: underline dotted; }
.cat-setcat:hover { color: var(--cat-accent-ink); }
.cat-w-save { width: 5rem; }
/* 行に乗るボタンなので、hover するまで主張させない（50行ぶん並ぶため） */
.cat-rowsave { opacity: 0.55; transition: opacity 0.12s, border-color 0.12s, color 0.12s; }
.cat-list tbody tr:hover .cat-rowsave,
.cat-rowsave:focus-visible { opacity: 1; }
/* 直した行だけ押せる見た目にする（どの行が未保存かを一目で分かるように）。
   JS が付けるクラスなので、止まっていても保存自体は素の form で通る */
.cat-rowsave.is-dirty {
  opacity: 1;
  border-color: var(--cat-accent);
  color: var(--cat-accent-ink);
}
.cat-rowsave:disabled { opacity: 0.4; cursor: default; }
/* form の実体の隠し方は上の「行ごと form の置き場」（display: none）が正本。
   ここに display: contents を書かないこと。同じ詳細度で後勝ちするうえ、
   contents は箱だけ消して中身を残すので、一覧から外した列の入力欄が
   表の下にそのまま並んで見える（2026-08-05 得意先マスタで発覚） */

.cat-page mark { background: #3A3410; color: #F0D68C; padding: 0 0.1rem; border-radius: 0.2rem; }

.cat-listempty { padding: 3rem 1rem; text-align: center; color: var(--cat-faint); }
.cat-listempty .btn { margin-left: 0.75rem; }

.cat-listfoot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--cat-line);
  background: var(--cat-card2);
  font-size: var(--cat-fs-sm);
  color: var(--cat-faint);
  border-radius: 0 0 var(--cat-radius) var(--cat-radius);
}

.cat-pager { margin-left: auto; display: flex; align-items: center; gap: 0.65rem; }
.cat-pageno { font-family: var(--font-mono); }
.cat-page kbd { border-color: var(--cat-line-strong); background: var(--cat-field2); color: var(--cat-muted); }

/* ===== 仕入入力（Pトラン）＝ cat 意匠（2026-07-30 リデザイン） =====

   マスタメンテと同じ cat 意匠に乗せた（リファレンス_UI設計 §13）。
   トークン（--cat-*）は上の「管理品番マスタ：詳細パネル」ブロックが正本。ここには
   仕入入力だけの部品を足す。スコープは body.cat-page.pur-page。

   ⚠️ この画面は **スマホ（iPhone）から OCR を回すのが主な使い方**。
   下の @media が本番の使い方そのものなので、PC 幅だけ見て直さないこと。 */

/* cat 共通部品の追加分（他の cat 画面にも効く。命名は既存の cat- に合わせる） */
.cat-kicker.is-warn { background: var(--cat-warn); }
.cat-hint-box.is-warn { border-left-color: var(--cat-warn); }
.cat-state.is-cancel { color: var(--cat-faint); background: var(--cat-field); border: 1px solid var(--cat-line); }
.cat-kind-pc { background: #12283F; color: #7FB6F5; }
.cat-kind-ocr { background: #2A2130; color: #C79AD8; }
/* 列を落として情報を隠すより、横に流す（スマホの一覧） */
.cat-scroll { overflow-x: auto; }

/* 入り口は3枚（PC入力・写真・テンプレ印刷）。マスタ一覧の4列だと1枚ぶん空くので3列 */
.pur-page .mhub-grid { grid-template-columns: repeat(3, 1fr); }

/* 日付・時刻・伝票番号。数字が縦に揃うと拾い読みできる */
.cat-mono { font-family: var(--font-mono); color: var(--cat-muted); }

/* 取消・破棄。押す前は文字だけ赤、hover で面が赤くなる（誤爆しにくい強さ） */
.cat-page .btn-danger { color: var(--cat-neg); }
.cat-page .btn-danger:hover { color: #fff; background: var(--cat-neg-bg); border-color: var(--cat-neg); }
/* 共通の .btn-sm は共通トークンの 11px なので、cat の階段に載せ替える */
.cat-page .btn-sm { font-size: var(--cat-fs-md); padding: 0.3rem 0.7rem; }

/* 一覧の表。cat-tbl の既定は「入力欄を並べる表」なので、読む表として行間と区切りを足す */
.pur-page .cat-tbl td { padding: 0.5rem 0.6rem; border-top: 1px solid var(--cat-line); }
.pur-page .cat-tbl th { padding: 0.1rem 0.6rem 0.55rem; }
.pur-page .cat-tbl td:first-child, .pur-page .cat-tbl th:first-child { padding-left: 0; }
.pur-page .cat-tbl tbody tr:hover td { background: var(--cat-card2); }
.pur-page .cat-scroll .cat-tbl { min-width: 44rem; }

/* 絞り込みの帯 */
.pur-toolbar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; padding: 0.8rem 0; }
.pur-toolbar input[type="date"], .pur-toolbar select { width: auto; }
.pur-count { margin-left: auto; font-size: var(--cat-fs-sm); color: var(--cat-faint); font-family: var(--font-mono); }
.pur-check { display: flex; align-items: center; gap: 0.5rem; font-size: var(--cat-fs-md); color: var(--cat-muted); }
.pur-check input { width: auto; }

/* 写真アップロード。スマホでは capture="environment" で外向きカメラが直接開く */
.up-actions { display: grid; gap: 0.8rem; }
.up-big {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  font: inherit;
  font-size: var(--cat-fs-lg);
  font-weight: 700;
  color: var(--cat-ink);
  text-align: left;
  background: var(--cat-card);
  border: 1px solid var(--cat-line-strong);
  border-radius: var(--cat-radius);
  padding: 1.1rem 1.15rem;
  cursor: pointer;
}
.up-big:hover { border-color: var(--cat-accent); background: #17181C; }
.up-big:focus-within { border-color: var(--cat-accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); }
.up-big.is-primary { background: var(--cat-accent-dim); border-color: #2B4E7A; }
.up-big .mhub-ic { margin: 0; }
.up-big small { display: block; font-size: var(--cat-fs-sm); font-weight: 400; color: var(--cat-faint); }
/* 選んだファイル名（js/purchasing.js が入れる）。押したのに何も変わらないと不安になる */
.up-picked { margin-top: 0.8rem; font-size: var(--cat-fs-md); color: var(--cat-muted); }
.up-picked .cat-dot { background: var(--cat-pos); margin-right: 0.4rem; }

/* OCR確認：左に元画像、右に行 */
.ocr-split { display: grid; grid-template-columns: 22rem 1fr; gap: 1rem; align-items: start; }
.ocr-imgcard { position: sticky; top: 5rem; }
.ocr-img { display: block; width: 100%; border-radius: 0.5rem; border: 1px solid var(--cat-line); }
.ocr-imgnote { font-size: var(--cat-fs-sm); color: var(--cat-faint); margin: 0.5rem 0 0; }
.ocr-read {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.65rem;
  border: 1px solid var(--cat-line);
  border-radius: 0.6rem;
  background: var(--cat-card2);
  margin-bottom: 0.9rem;
  font-size: var(--cat-fs-md);
}
.ocr-read-lab { font-size: var(--cat-fs-sm); font-weight: 600; color: var(--cat-muted); }
.ocr-read-val { font-family: var(--font-mono); color: var(--cat-ink); }
.ocr-read-val .is-blank { font-family: var(--font-sans); color: var(--cat-faint); }
.ocr-done { opacity: 0.55; }
/* 行ごとの操作。画面下の固定バーではなく、その行のカードの中に置く */
.cat-actionbar.is-inline { position: static; border-top: 0; padding-bottom: 0; background: none; }

/* --- スマホ（iPhone）---------------------------------------------------
   iPhone SE(375px)〜15 Pro Max(430px) で成り立たせる。
   ・1カラム。横スクロールを作らない（表だけ .cat-scroll に逃がす）
   ・押すものは 44px 以上（Apple HIG の下限）
   ・入力欄は 16px 以上でないと Safari が勝手にズームする（--cat-base 17px なので既定でOK）
   ・下端は env(safe-area-inset-bottom) を足す（ホームインジケータにボタンが潜る）
   スコープを .pur-page に閉じてある。他の cat 画面（マスタ・管理品番）は
   このリデザインでは触らない（リファレンス_UI設計 §13「既存画面は一斉改修しない」）。 */
@media (max-width: 48rem) {
  .pur-page .cat-main { padding: 0.9rem 0.85rem 1rem; }
  .pur-page .cat-topbar-inner { padding: 0.55rem 0.85rem; gap: 0.5rem; }
  .pur-page .cat-idnum { font-size: var(--cat-fs-xl); }
  .pur-page .cat-idname { max-width: 100%; }
  /* 本人チップはスマホでは出さない（幅を食うだけ。誰で入っているかはヘッダーの外で足りる） */
  .pur-page .cat-userchip { display: none; }
  .pur-page .cat-cardbody { padding: 0.85rem; }
  /* 見出しは折り返さない。補足だけ次の行へ落とす */
  .pur-page .cat-cardhead { flex-wrap: wrap; row-gap: 0.1rem; }
  .pur-page .cat-cardhead h2 { white-space: nowrap; }
  .pur-page .cat-cardsub { flex-basis: 100%; }
  .pur-page .cat-grid3 { grid-template-columns: 1fr; gap: 0.8rem; }
  .pur-page .ocr-split { grid-template-columns: 1fr; }
  .pur-page .ocr-imgcard { position: static; }
  .pur-page .ocr-read { grid-template-columns: 1fr; gap: 0.2rem; }
  /* 写真は打ちながら見比べるので上に残すが、帯にとどめる。
     手書きの細かい字は縮小画像では読めないので、拡大（タップ）が主動線 */
  .pur-page .ocr-img { max-height: 22vh; object-fit: cover; object-position: top; }
  .pur-page .btn, .pur-page .cat-today, .pur-page input, .pur-page select { min-height: 2.9rem; }
  .pur-page .btn { padding: 0.7rem 1rem; }
  .pur-page .cat-nav a, .pur-page .cat-logout { padding: 0.55rem 0.6rem; }
  /* 行ごとの操作は縦積み。確定は幅いっぱいの主ボタン */
  .pur-page .cat-actionbar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .pur-page .cat-actionbar .btn-primary, .pur-page .cat-actionbar .is-wide { grid-column: 1 / -1; }
  .pur-page .cat-actionbar .btn { text-align: center; }
  /* 画面下の固定バーは端まで伸ばす（左右の余白ぶんを打ち消す） */
  .pur-page .cat-actionbar:not(.is-inline) {
    margin: 0 -0.85rem;
    padding: 0.75rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(11, 11, 12, 0.95);
    backdrop-filter: blur(12px);
  }
  .pur-page .cat-barnote { display: none; }
  .pur-page .pur-toolbar input[type="date"], .pur-page .pur-toolbar select { width: 100%; }
  .pur-page .mhub-grid { grid-template-columns: 1fr; }

  /* --- 表は1行=1カードに畳む（2026-07-30 Kinya さん指摘）---------------
     列が7〜8あるので、横スクロールだと「金額を見るのに毎回横に振る」ことになる。
     見出し行を消し、各セルの左に data-label（=見出し）を出して縦に積む。
     ⚠️ 列を足したら **td に data-label を付ける**こと。付け忘れるとスマホで
     何の値か分からなくなる（PC では見出し行があるので気づけない）。 */
  .pur-page .cat-scroll { overflow-x: visible; }
  .pur-page .cat-scroll .cat-tbl { min-width: 0; }
  .pur-page .cat-tbl, .pur-page .cat-tbl tbody, .pur-page .cat-tbl tr, .pur-page .cat-tbl td {
    display: block;
    width: 100%;
  }
  .pur-page .cat-tbl thead { display: none; }
  .pur-page .cat-tbl tr {
    border: 1px solid var(--cat-line);
    border-radius: 0.6rem;
    background: var(--cat-card2);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.6rem;
  }
  .pur-page .cat-tbl tbody tr:hover td { background: none; }
  .pur-page .cat-tbl td {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 0;
    padding: 0.2rem 0;
    text-align: left;
  }
  .pur-page .cat-tbl td[data-label]::before {
    content: attr(data-label);
    flex: none;
    width: 7.5rem;
    font-size: var(--cat-fs-sm);
    color: var(--cat-muted);
  }
  /* 操作セル（開く・取消）は見出しを持たない。ボタンは行の下に横並びで置く */
  .pur-page .cat-tbl td:not([data-label]) { display: inline-flex; width: auto; padding-top: 0.5rem; }
  .pur-page .cat-tbl td:not([data-label]) .btn { min-height: 2.4rem; }
}

/* ===== Pトラン：手書きテンプレの印刷ページ ===== */

.print-template-date { font-size: 1.1rem; margin: 1rem 0; }

/* table-layout: fixed で列幅を colgroup の指定どおりに固定する。
   コード列（仕入先・商品グループ・仕入担当者）は数字1〜3桁なので狭く、
   金額列（最大6桁）だけ広くとる */
.print-template-table { border-collapse: collapse; table-layout: fixed; width: 100%; }
.print-template-table th, .print-template-table td {
  box-sizing: border-box; padding: 0.4rem 0.5rem; text-align: left; border: 1px solid #ccc;
  overflow: hidden; white-space: nowrap;
}
.print-template-table td { height: 2.2rem; }
.print-template-table .col-no { width: 6%; }
.print-template-table .col-code { width: 16%; }
.print-template-table .col-amount { width: 46%; }

@media print {
  /* Pトランの手書きテンプレはA5横で1枚に収める */
  @page { size: A5 landscape; margin: 8mm; }
  /* ヘッダー（cat-topbar / 共通ヘッダー）と説明文は紙面では不要 */
  .app-header, .cat-topbar, .no-print { display: none !important; }
  .site-main, .cat-main { max-width: none; padding: 0; }
  .print-template-date { font-size: 11pt; margin: 0 0 3mm; }
  .print-template-table { font-size: 10pt; }
  .print-template-table th, .print-template-table td { padding: 1mm 2mm; border: 1px solid #000; color: #000; }
  /* 10行に減らした分、1行あたりの高さを広げて手書きしやすくする（A5横1枚に収まる範囲で） */
  .print-template-table td { height: 11mm; }
  body { background: #fff; color: #000; }
}

/* ===== ユーザー管理・ログイン履歴（portal admin_users / admin_audit_log の移植・Phase 4） =====
   CSP のためテンプレートに <style> を書けない。この2画面のスタイルはここが正本。
   色は kdk-common.css のトークン経由。.aum-page = ユーザー管理 / .alog-page = ログイン履歴 */

.aum-page .hidden, .alog-page .hidden { display: none !important; }

.aum-page .page-content { max-width: 800px; width: 100%; margin: 0 auto; padding: 0 20px 40px; }
.aum-page .aum-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 24px; }

.aum-page .admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.aum-page .admin-title { font-size: var(--fs-md); font-weight: 600; }
.aum-page .admin-add-btn { padding: 8px 16px; background: var(--kdk-accent); color: #fff; border: none; border-radius: var(--radius-md); font-size: var(--fs-sm); cursor: pointer; font-weight: 500; }
.aum-page .admin-add-btn:hover { opacity: 0.88; }
.aum-page .admin-form-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; }
.aum-page .admin-form-title { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 14px; }
.aum-page .admin-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.aum-page .admin-form-row label { font-size: 14px; color: var(--text-muted); }
.aum-page .admin-form-row input, .aum-page .admin-form-row select { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 16px; background: var(--surface); color: var(--text); outline: none; }
.aum-page .admin-form-row input:focus, .aum-page .admin-form-row select:focus { border-color: var(--kdk-active); }
.aum-page .admin-hint { font-size: 13px; color: var(--text-dim); font-weight: 400; }
.aum-page .admin-form-actions { display: flex; gap: 8px; }
.aum-page .admin-btn-primary { padding: 8px 20px; background: var(--kdk-accent); color: #fff; border: none; border-radius: var(--radius-md); font-size: 16px; cursor: pointer; font-weight: 500; }
.aum-page .admin-btn-primary:hover { opacity: 0.88; }
.aum-page .admin-btn-ghost { padding: 8px 16px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 16px; color: var(--text-muted); cursor: pointer; }
.aum-page .admin-error { background: #fef2f2; border: 1px solid #fca5a5; border-radius: var(--radius-sm); padding: 8px 12px; font-size: var(--fs-xs); color: #dc2626; margin-bottom: 10px; }

.aum-page .tester-preset { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; cursor: pointer; }
.aum-page .tester-preset input { cursor: pointer; }
.aum-page .tester-preset.disabled { opacity: 0.4; cursor: not-allowed; }
.aum-page .tester-preset.disabled input { cursor: not-allowed; }
.aum-page .tester-preset-label { font-size: var(--fs-sm); color: var(--text); }
.aum-page .tester-preset-desc { font-size: var(--fs-xs); color: var(--text-muted); }

.aum-page .user-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 10px; }
.aum-page .user-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aum-page .user-email { font-size: var(--fs-sm); font-weight: 500; flex: 1; min-width: 0; word-break: break-all; }
.aum-page .user-email-sub { margin-left: 8px; font-size: 11px; color: var(--text-muted); }
.aum-page .role-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
.aum-page .role-badge.admin { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
.aum-page .role-badge.tester { box-shadow: 0 0 0 1px var(--tester-ring); color: var(--tester-ring); border-color: var(--tester-ring); }

.aum-page .seg-row { margin-top: 4px; margin-bottom: 12px; }
.aum-page .seg-row .field-label { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 4px; }
.aum-page .seg-control { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.aum-page .seg-btn { padding: 6px 16px; font-size: var(--fs-sm); background: var(--surface); color: var(--text-muted); border: none; cursor: pointer; }
.aum-page .seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.aum-page .seg-btn.active { background: var(--kdk-accent); color: #fff; font-weight: 600; }
.aum-page .seg-btn.active.cust { background: var(--role-cust); }
.aum-page .seg-btn:disabled { cursor: not-allowed; }

.aum-page .edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 12px 0; }
@media (max-width: 560px) { .aum-page .edit-grid { grid-template-columns: 1fr; } }
.aum-page .field-row label { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 4px; }
.aum-page .field-row select, .aum-page .field-row input { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--fs-sm); background: var(--surface); color: var(--text); outline: none; box-sizing: border-box; }
.aum-page .field-row select:focus, .aum-page .field-row input:focus { border-color: var(--kdk-active); }
.aum-page .field-row select:disabled, .aum-page .field-row input:disabled { opacity: 0.4; cursor: not-allowed; }
.aum-page .req-mark { color: var(--tester-ring); }
.aum-page .tokuisaki-input-row { display: flex; gap: 6px; }
.aum-page .tokuisaki-input-row input { flex: 1; }
.aum-page .tokuisaki-search-btn { padding: 7px 10px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.aum-page .tokuisaki-search-btn:hover { border-color: var(--kdk-active); color: var(--kdk-active); }
.aum-page .tokuisaki-name-hint { font-size: var(--fs-xs); color: var(--kdk-accent); margin-top: 3px; min-height: 16px; }

.aum-page .user-toggle-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.aum-page .user-toggle-label { font-size: var(--fs-xs); color: var(--text-muted); min-width: 60px; }
.aum-page .toggle-label-gap { margin-left: 12px; }
.aum-page .kdk-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.aum-page .kdk-toggle input { display: none; }
.aum-page .kdk-toggle-track { width: 36px; height: 20px; border-radius: 999px; background: var(--border); transition: background 0.2s; flex-shrink: 0; position: relative; }
.aum-page .kdk-toggle input:checked + .kdk-toggle-track { background: var(--kdk-accent); }
.aum-page .kdk-toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.aum-page .kdk-toggle input:checked + .kdk-toggle-track::after { transform: translateX(16px); }
.aum-page .kdk-toggle-text { font-size: var(--fs-xs); color: var(--text-muted); }
.aum-page .kdk-toggle.tester-toggle input:checked + .kdk-toggle-track { background: var(--tester-ring); }
.aum-page .kdk-toggle.disabled { cursor: not-allowed; opacity: 0.35; }
.aum-page .kdk-toggle.disabled .kdk-toggle-track { background: var(--border) !important; }

.aum-page .feat-chips-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.aum-page .feat-chips-label { font-size: var(--fs-xs); color: var(--text-muted); padding-top: 4px; }
.aum-page .feat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.aum-page .feat-chip { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; border: 1px solid var(--border); background: var(--surface); cursor: pointer; user-select: none; transition: all 0.15s; }
.aum-page .feat-chip.on { background: #E6F4EA; color: #1D9E75; border-color: #1D9E75; }
.aum-page .feat-chip.off { background: var(--surface); color: var(--text-dim); border-color: var(--border); }
.aum-page .feat-chip.locked { cursor: not-allowed; opacity: 0.55; }
.aum-page .feat-chip.locked::after { content: "🔒"; font-size: 9px; margin-left: 2px; }
.aum-page .tester-note { font-size: var(--fs-xs); color: var(--tester-ring); margin-top: 8px; display: flex; align-items: center; gap: 6px; }

.aum-page .user-actions { display: flex; gap: 8px; margin-top: 10px; }
.aum-page .pw-reset-btn, .aum-page .delete-btn { padding: 5px 12px; font-size: 11px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); cursor: pointer; }
.aum-page .pw-reset-btn:hover { border-color: var(--kdk-active); color: var(--kdk-active); }
.aum-page .delete-btn:hover { border-color: #dc2626; color: #dc2626; }
.aum-page .aum-empty { color: var(--text-muted); font-size: var(--fs-sm); padding: 16px 0; }

/* 得意先検索モーダル */
.aum-page .toku-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; align-items: center; justify-content: center; }
.aum-page .toku-modal-backdrop.open { display: flex; }
.aum-page .toku-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 420px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; }
.aum-page .toku-modal-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.aum-page .toku-modal-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.aum-page .toku-modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: var(--fs-sm); padding: 4px 8px; border-radius: var(--radius-sm); }
.aum-page .toku-modal-close:hover { color: var(--text); background: var(--surface2); }
.aum-page .toku-modal-search { padding: 10px 12px; border-top: 1px solid var(--border); flex-shrink: 0; }
.aum-page .toku-modal-input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; font-size: var(--fs-sm); color: var(--text); outline: none; box-sizing: border-box; }
.aum-page .toku-modal-input:focus { border-color: var(--kdk-active); }
.aum-page .toku-modal-list { overflow-y: auto; flex: 1; min-height: 0; }
.aum-page .toku-modal-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; }
.aum-page .toku-modal-item:last-child { border-bottom: none; }
.aum-page .toku-modal-item:hover { background: var(--surface2); }
.aum-page .toku-modal-item-code { font-size: 12px; color: var(--kdk-accent); white-space: nowrap; flex-shrink: 0; }
.aum-page .toku-modal-item-name { font-size: var(--fs-sm); color: var(--text); }
.aum-page .toku-modal-empty { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

/* パスワードリセット／初期パスワード表示モーダル */
.aum-page .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; align-items: center; justify-content: center; }
.aum-page .modal-overlay.open { display: flex; }
.aum-page .modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 360px; }
.aum-page .modal-title { font-size: var(--fs-md); font-weight: 600; margin-bottom: 16px; }
.aum-page .modal-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 16px; }
.aum-page .modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.aum-page .pw-generated { margin-top: 8px; }
.aum-page .pw-generated-label { font-size: var(--fs-xs); color: var(--tester-ring); margin-bottom: 6px; }
.aum-page .pw-generated-value { display: block; font-family: var(--font-mono); font-size: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; user-select: all; color: var(--text); }

/* ロール色の凡例 */
.aum-page .role-legend { display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 6px 2px; }
.aum-page .role-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text); }
.aum-page .rl-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.aum-page .rl-admin { background: var(--role-admin, #D4AF37); }
.aum-page .rl-exec { background: var(--role-exec, #8B5CF6); }
.aum-page .rl-acct { background: var(--role-acct, #378ADD); }
.aum-page .rl-staff { background: var(--role-staff, #1D9E75); }
.aum-page .rl-cust { background: var(--role-cust, #8A8A8A); }
.aum-page .rl-dot.tester { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--tester-ring, #E5484D); }
.aum-page .legend-note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 10px; }

/* ── ログイン履歴（.alog-page） ── */

.alog-page .container { max-width: 1100px; margin: 0 auto; padding: 0 32px 40px; }

.alog-page .alog-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.alog-page .alog-tab { padding: 8px 18px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: 13px; }
.alog-page .alog-tab:hover { border-color: var(--kdk-active); color: var(--text); }
.alog-page .alog-tab.active { border-color: var(--kdk-active); color: var(--text); background: rgba(122,37,37,0.18); }

.alog-page .summary-wrap { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.alog-page .summary-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; flex: 1; min-width: 200px; }
.alog-page .summary-card.alert { border-color: var(--kdk-negative); }
.alog-page .summary-label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.alog-page .summary-value { font-size: 28px; font-weight: 700; font-family: var(--font-mono); color: var(--text); line-height: 1; }
.alog-page .summary-value.alert-num { color: var(--kdk-negative); }
.alog-page .ip-table { width: 100%; font-size: 12px; margin-top: 8px; }
.alog-page .ip-table td { padding: 2px 0; border: none; }
.alog-page .ip-table td:last-child { text-align: right; color: var(--kdk-negative); font-family: var(--font-mono); font-weight: 600; }
.alog-page .dim { color: var(--text-dim); }

.alog-page .filter-row { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
.alog-page .filter-row input { flex: 1; max-width: 320px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; }
.alog-page .filter-row input:focus { outline: none; border-color: var(--kdk-active); }
.alog-page .filter-sep { width: 1px; height: 28px; background: var(--border); margin: 0 2px; }
.alog-page .btn { padding: 8px 16px; border-radius: var(--radius-sm); border: none; cursor: pointer; font-size: 13px; font-weight: 500; }
.alog-page .btn-primary { background: var(--kdk-accent); color: #fff; }
.alog-page .btn-secondary { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); }
.alog-page .btn-danger-outline { background: transparent; color: var(--kdk-negative); border: 1px solid var(--kdk-negative); }
.alog-page .btn-danger-outline.active { background: var(--kdk-negative); color: #fff; }

.alog-page .table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.alog-page .alog-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.alog-page .alog-table th { padding: 10px 14px; text-align: left; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface2); }
.alog-page .alog-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.alog-page .alog-table tr:last-child td { border-bottom: none; }
.alog-page .alog-table tr:hover td { background: var(--surface2); }
.alog-page .alog-table tr.row-fail td { background: rgba(216, 90, 48, 0.06); }
.alog-page .alog-table tr.row-fail:hover td { background: rgba(216, 90, 48, 0.10); }
.alog-page .badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 500; font-family: var(--font-mono); }
.alog-page .badge-ok { background: #1D9E7520; color: #1D9E75; }
.alog-page .badge-fail { background: #D85A3020; color: #D85A30; }
.alog-page .badge-admin { background: #378ADD20; color: #378ADD; }
.alog-page .mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.alog-page .ua { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alog-page .empty { text-align: center; padding: 48px; color: var(--text-dim); }

.alog-page .pagination-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; }
.alog-page .pagination-row .btn { min-width: 90px; }
.alog-page .page-info { font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }

/* ── 検索ログ（.slog-page） ──
   基本意匠は .alog-page を body class の併記（alog-page slog-page）で再利用し、
   ここには検索ログだけの差分を置く（portal admin_search_log.html の移植）。 */
.slog-page .slog-top-card { flex: 2; }
.slog-page .rank-bar-wrap { position: relative; height: 22px; margin-top: 4px; }
.slog-page .rank-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(55,138,221,0.18); border-radius: 4px; }
.slog-page .rank-bar-label { position: relative; padding: 2px 8px; display: flex; justify-content: space-between; font-size: 12px; }
.slog-page .badge-cust { background: #8A8A8A20; color: #b5b5b5; }
.slog-page .badge-staff { background: #1D9E7520; color: #1D9E75; }
.slog-page .filter-row select { padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; }
.slog-page .filter-row select:focus { outline: none; border-color: var(--kdk-active); }

/* ============================================================
   M伝票の1画面（リファレンス_Mトラン設計 §10・2026-08-05 モック討議で確定）

   生産 → 出荷 → 返却・査定 → 売上 を左から右へ横並び。段の枠で状態が分かる
   （済＝静か／いまここ＝金の枠／まだ＝薄く入力不可）。

   **色・大きさは cat 意匠の `--cat-*` 変数だけを使う。** 生のカラーコードをここに
   書かない（書くと cat 意匠を直したときに片方だけ残る）。
   ============================================================ */

/* 24インチで4段が横に並ぶ幅。cat の既定（74rem）だと2列で折り返す。
   **帯と本体は必ず同じ幅**にする（2026-08-06 Kinya さん指示）。左右とも `auto` の
   余白で中央に置いているので、片方だけ狭いと帯の中身が内側に寄り、
   商品管理番号が1段目のカードの左端と揃わなくなる。1つの規則に束ねてあるのは、
   別々に書くと片方だけ直してズレるため（一覧ページ `.cat-listpage` と同じ流儀）。
   画面が狭くなれば `max-width` を下回って両方いっしょに縮む。 */
.mslip-page .cat-main.mslip-main,
.mslip-page .cat-topbar-inner { max-width: 118rem; }

/* **この画面だけ基準を一段落とす**（2026-08-06 Kinya さん指示）。
   M伝票は4段ぶんの入力を1画面に収める画面で、cat の 17px 基準のままだと
   縦にあふれて上下スクロールが要る。スクロールすると「4段を横に見渡す」という
   この画面の骨格（§10）そのものが成立しない。

   縮めるのは**この画面の中だけ**（`.mslip-page` スコープ）。cat の基準
   （`--cat-base` 17px）や他の画面は触らない ―― UI設計 §13 の
   「項目の多い表はその表だけ縮めてよい」の同じ考え方を、画面単位に当てたもの。

   余白は rem（ルート基準）なので `--cat-base` を下げても縮まない。
   **この画面の余白は `--m-gap` 系で持ち、大きさと一緒に動くようにしてある。** */
.mslip-page {
  --cat-base: 0.9375rem;        /* = 15px 相当（cat の 17px から一段） */
  --m-pad: 0.34rem;             /* 入力欄の上下パディング */
  --m-padx: 0.6rem;             /* 入力欄の左右パディング */
  --m-row: 0.2rem;              /* 項目の行間 */
  --m-num: calc(var(--cat-base) * 1.08);  /* 等幅（品番・金額）の視覚補正。下の .mslip-num 参照 */
}
/* 段の底の保存ボタンも段の文字に合わせる（ここだけ大きいと縦を食う） */
.mslip-step .btn {
  font-size: var(--cat-base);
  padding: var(--m-pad) 0.9rem;
}

.mslip-flow {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  /* stretch。段の高さを一番長いものに揃え、下端をだんだんにしない（2026-08-05） */
  align-items: stretch;
}
@media (min-width: 62rem) { .mslip-flow { grid-template-columns: 1fr 1fr; } }
@media (min-width: 95rem) { .mslip-flow { grid-template-columns: repeat(4, 1fr); } }

.mslip-step {
  background: var(--cat-card);
  border: 1px solid var(--cat-line);
  border-radius: var(--cat-radius);
  padding: 0.5rem 0.7rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
/* 入力欄は段の文字と同じ大きさ・薄いパディング。
   `.cat-page input` 側は触らない（他の cat 画面に効いてしまう）。
   セレクタを分けてあるので二重定義の検査（apps/core/tests_css.py）にも当たらない */
.mslip-step input,
.mslip-step select,
.mslip-step textarea {
  font-size: var(--cat-base);
  padding: var(--m-pad) var(--m-padx);
  line-height: 1.35;
}
/* 済んだ段は静かに、いまの段は金の枠、まだの段は薄く */
.mslip-step.is-now {
  border-color: var(--cat-warn);
  box-shadow: 0 0 0 3px rgba(224, 169, 59, 0.12);
}
.mslip-step.is-todo { opacity: 0.55; }
/* 先上げ中の返却・査定（stage_state "sakiage"）。枠は金にしない（いまここは売上）が、
   解除に使う3欄（受付区分・返却日・査定完了日）を先上げ色（warn）で目立たせて
   「返却が来たらここ」を示す（2026-08-08 Kinya さん） */
.mslip-step.is-sakiage select[name="return_branch"],
.mslip-step.is-sakiage #d-return,
.mslip-step.is-sakiage #d-assess {
  border-color: var(--cat-warn);
  background: var(--cat-warn-bg);
}

.mslip-stephd {
  display: flex; align-items: center; gap: 0.5rem;
  border-bottom: 1px solid var(--cat-line);
  padding-bottom: 0.35rem;
}
.mslip-stepno {
  font-family: var(--font-mono); font-size: var(--cat-fs-sm);
  width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cat-field); color: var(--cat-faint);
  border: 1px solid var(--cat-line-strong);
}
.mslip-step.is-done .mslip-stepno {
  background: var(--cat-pos-bg); color: var(--cat-pos); border-color: var(--cat-pos);
}
.mslip-step.is-now .mslip-stepno {
  background: var(--cat-warn-bg); color: var(--cat-warn); border-color: var(--cat-warn);
}
.mslip-step.is-todo .mslip-stepno { border-style: dashed; }
.mslip-stepttl { font-weight: 700; font-size: var(--cat-base); }
.mslip-step.is-done .mslip-stepttl { color: var(--cat-muted); }
.mslip-stephd .mslip-pill, .mslip-stephd .mslip-hint { margin-left: auto; }

/* **段の中の文字は1サイズに揃える**（2026-08-06 Kinya さん指示）。
   ラベル・表示値・入力欄が別々の大きさだと、同じ行の中で目が拡縮して読みにくい。
   以前はラベルと表示値が `--cat-fs-md`、入力欄だけ `--cat-base` で、
   **入力欄だけが一回り大きい**状態だった（`.cat-page input` の
   `font-size: var(--cat-fs-base)` が未定義の変数で、宣言ごと無効になり
   `font: inherit` の本文サイズが残っていたのが原因）。
   区別は大きさではなく色（ラベル＝faint／値＝ink）で付ける。 */
.mslip-kv {
  display: grid; grid-template-columns: 6.5rem 1fr;
  gap: var(--m-row) 0.6rem;
  font-size: var(--cat-base);
  align-items: center;
  margin: 0;
}
.mslip-kv dt { color: var(--cat-faint); }
.mslip-kv dd { margin: 0; }

/* **押せない数値**（品番・ロット・金額）。等幅で桁を揃えるが、色は本文と同じ。
   青（`.cat-pn`）は「押せる数字」の色なので、リンクでないものに付けない
   （2026-08-06 Kinya さん指摘。以前は品番もロットも金額も青く、どれも押せなかった）。

   **大きさは `--m-num`。** 等幅の BIZ UDGothic は、同じ px でも本文の
   BIZ UDPGothic より字面が小さく見える。隣り合う「449-01090」と「IPS」が
   別サイズに見えていたのはこれが原因なので、等幅側だけ少し上げて視覚的に揃える
   （token は上の `.mslip-page` にまとめてある）。 */
.mslip-num {
  font-family: var(--font-mono);
  font-size: var(--m-num);
  font-variant-numeric: tabular-nums;
}
/* 管理品番だけは本物のボタン（価格の窓を開く）。青のままでよい */
.mslip-pnbtn {
  font-family: var(--font-mono);
  font-size: var(--m-num);
  background: none; border: none; padding: 0;
  color: var(--cat-accent-ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
  text-decoration-color: var(--cat-accent-dim);
}
.mslip-pnbtn:hover { text-decoration-color: var(--cat-accent-ink); }
/* 帯の「廃棄」（未出荷の在庫のときだけ出る）。取り消せない操作なので赤を当てるが、
   押した先が念押しなので、警告色の塗りつぶしにはしない（文字色だけ） */
.cat-nav a.mslip-dispose-link { color: var(--cat-neg); }
.cat-nav a.mslip-dispose-link:hover {
  color: var(--cat-neg); background: var(--cat-neg-bg);
}
/* 金額の入力欄も等幅で桁を揃える（数字が縦に並ぶ） */
.mslip-step input.mslip-num { font-size: var(--cat-base); }
.mslip-era { display: flex; gap: 0.25rem; align-items: center; }
.mslip-era select { width: 6rem; flex: none; }
.mslip-era input { width: 3.4rem; flex: none; }
.mslip-inline { font-size: var(--cat-fs-sm); color: var(--cat-muted); }
/* 決まった値の横に置く小さな「変更」（出荷区分）。値そのものより弱く見せる */
.mslip-inline-link {
  font-size: var(--cat-fs-sm);
  margin-left: 0.5rem;
  color: var(--cat-accent-ink);
  text-decoration: underline; text-underline-offset: 0.2em;
  text-decoration-color: var(--cat-accent-dim);
}
.mslip-inline-link:hover { text-decoration-color: var(--cat-accent-ink); }
/* 金額ブロックの数値・数式は右揃え（2026-08-08 Kinya さん・追加請求の行と同じ）。
   入力欄（定価・仕切）と掛率セレクトも揃えて、桁が1本の右端に並ぶようにする */
.mslip-money dd,
.mslip-money dd input,
.mslip-money dd select { text-align: right; }
.mslip-money dd.mslip-total {
  font-size: var(--cat-fs-lg); font-weight: 700; color: var(--cat-pos);
}

.mslip-subhd {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  font-size: var(--cat-fs-sm); font-weight: 700; color: var(--cat-muted);
  border-top: 1px solid var(--cat-line);
  margin-top: 0.25rem; padding-top: 0.3rem;
}
.mslip-hint { font-weight: 400; font-size: var(--cat-fs-xs); color: var(--cat-faint); }
/* 一部の見出しは「工程パターン」等の項目ラベルと同じ大きさに揃える
   （2026-08-10 Kinya さん。`.mslip-subhd` 既定の `--cat-fs-sm` は車両明細等の
   見出しが使うので、ここだけ上書きする専用クラスにする） */
.mslip-subhd-base { font-size: var(--cat-base); }

/* 工程表＋日付は**ひとかたまりでカードの底**に付ける（2026-08-05 確定）。
   余白は工程表の上に出るので、4段の日付が横一線に揃う */
.mslip-crewhd { margin-top: auto; }
.mslip-crew {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.3rem;
}
/* **工程／工数／担当者を1行に**（2026-08-06 Kinya さん指示）。
   以前は「工程＋工数」を小さく薄い1行にして、その下に幅いっぱいの担当者セレクトを
   積んでいた。工程名が見出しのように見えて読み飛ばされるうえ、行が2段ぶんの背丈になる。
   **3つとも同じ大きさ・同じ色**で横に並べ、セレクトは行の半分で足りる。 */
.mslip-crew li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.2rem 0.4rem;
  background: var(--cat-field2);
  border: 1px solid var(--cat-line);
  border-left: 3px solid var(--cat-line-strong);
  border-radius: 0.4rem;
}
/* 工程名。長い工程（納品・発送・店頭出）でも行を折らず、入らなければ端を詰める */
.mslip-crewjob {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--cat-base); color: var(--cat-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mslip-crewload { flex: none; color: var(--cat-ink); }
/* 担当者は行の半分。`.cat-page select` の width:100% を上書きする */
.mslip-crew select { flex: 0 0 50%; width: auto; min-width: 0; }
/* 聞き返しの中の工程行と確定ボタンの間をあける（2026-08-08 Kinya さん） */
.mslip-ask .mslip-crew { margin: 0.75rem 0 1.25rem; }
/* 見出しがドラッグの取っ手（m_slip.js）。つかめることを形で示す */
.mslip-ask h2 { cursor: move; user-select: none; }
/* 売上済のあとに触った履歴（締め処理実装前の簡単な仕掛け・2026-08-08）。
   線を跨いだ変更が一覧で浮く ―― 按分を後から動かす操作の抑止 */
.mslip-ev .is-aftersold .mslip-evwhat { color: var(--cat-warn); }
.mslip-ev li.is-aftersold { border-left: 3px solid var(--cat-warn); padding-left: 0.5rem; }

.mslip-date {
  border-top: 1px dashed var(--cat-line-strong);
  padding-top: 0.35rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.mslip-date + .mslip-date { border-top: none; padding-top: var(--m-row); }
/* ラベル幅は「査定完了日」の5文字が基準。全段で入力欄の左端が揃う（2026-08-05）。
   大きさは段の本文と同じ（ここだけ小さいと日付の行で目が切り替わる） */
.mslip-date label {
  font-size: var(--cat-base); color: var(--cat-faint);
  white-space: nowrap; width: 5em; flex: none;
}
/* 日付欄は残りを埋め、「今日」は右端に置く。
   `.cat-page input` の `width: 100%` のままだと「今日」を押し出してしまう */
.mslip-date input { flex: 1 1 auto; min-width: 0; width: auto; }
/* 「今日」は仕入入力と同じ部品（`.cat-today`）。この画面は文字を1サイズに
   揃えてあるので、大きさだけ段の本文に合わせる */
.mslip-date .cat-today { font-size: var(--cat-base); padding: var(--m-pad) 0.6rem; }
.mslip-date .cat-today:disabled { opacity: 0.4; cursor: default; }
/* 日付を消す「×」。**「今日」より地味に**する ―― 隣り合うので、
   同じ強さで並べると押し間違えたときにどちらを押したか分からない。
   空欄のときは JS が disabled にするので、押せる形で残るのは値があるときだけ */
.mslip-clear {
  flex: none; font: inherit; font-size: var(--cat-base); line-height: 1;
  color: var(--cat-faint); background: none;
  border: 1px solid var(--cat-line);
  border-radius: 0.5rem;
  padding: var(--m-pad) 0.5rem;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.mslip-clear:hover { color: var(--cat-neg); border-color: var(--cat-neg); }
.mslip-clear:disabled { opacity: 0.3; cursor: default; }
.mslip-clear:disabled:hover { color: var(--cat-faint); border-color: var(--cat-line); }

/* `.mslip-askback`（聞き返しの小さな文字リンク）は 2026-08-12 に削除。
   出口は実行ボタンと同じ形の「キャンセル」に統一した（`_confirm_back.html`） */

.mslip-foot { display: flex; align-items: center; gap: 0.5rem; }
.mslip-stamp { font-size: var(--cat-fs-xs); color: var(--cat-faint); }
.mslip-foot .btn { margin-left: auto; }

/* 状態のピル */
.mslip-pill {
  display: inline-flex; align-items: center;
  font-size: var(--cat-fs-xs); font-weight: 700; letter-spacing: 0.04em;
  border-radius: 999px; padding: 0.05rem 0.6rem;
  border: 1px solid transparent; white-space: nowrap;
}
/* クラス名は SlipStatus の値と揃える（テンプレートは is-{{ slip.status }} で出す）。
   is-ship だけは出荷区分のピル（委託／通常）で使うので別に残してある */
.mslip-pill.is-stock { background: var(--cat-pos-bg); color: var(--cat-pos); border-color: var(--cat-pos); }
.mslip-pill.is-ship { background: var(--cat-accent-dim); color: var(--cat-accent-ink); border-color: var(--cat-accent); }
.mslip-pill.is-shipped { background: var(--cat-accent-dim); color: var(--cat-accent-ink); border-color: var(--cat-accent); }
.mslip-pill.is-consigned { background: var(--cat-field2); color: var(--cat-accent-ink); border-color: var(--cat-accent); }
.mslip-pill.is-assessing { background: var(--cat-warn-bg); color: var(--cat-warn); border-color: var(--cat-warn); }
.mslip-pill.is-ready { background: var(--cat-accent-dim); color: var(--cat-accent-ink); border-color: var(--cat-accent); }
/* 先上げ中＝返却待ち。注意色（返却日が入るまで消えない印） */
.mslip-pill.is-sakiage { background: var(--cat-warn-bg); color: var(--cat-warn); border-color: var(--cat-warn); }
.mslip-pill.is-sold { background: var(--cat-field); color: var(--cat-muted); border-color: var(--cat-line-strong); }
.mslip-pill.is-disposed { background: var(--cat-neg-bg); color: var(--cat-neg); border-color: var(--cat-neg); }
/* P伝の取消（電子台帳・2026-08-09）。廃棄と同じ否定色（確定は既定の見た目のまま） */
.mslip-pill.is-cancelled { background: var(--cat-neg-bg); color: var(--cat-neg); border-color: var(--cat-neg); }

/* 状態のスライサー（一覧） */
/* M/S 混在一覧の区分バッジ（電子台帳の卵・Sトラン設計 §5b）。
   状態ピルより一回り小さいチップで、伝票番号の隣に置く。色は既存トークン */
.mslip-kindtag {
  display: inline-block; margin-right: 0.35rem; padding: 0.05rem 0.4rem;
  border: 1px solid var(--cat-line-strong); border-radius: 999px;
  font-size: var(--cat-fs-xs); font-weight: 600; line-height: 1.3;
  background: var(--cat-field); color: var(--cat-muted);
}
.mslip-kindtag.is-m { border-color: var(--cat-accent); color: var(--cat-accent-ink); background: var(--cat-accent-dim); }
.mslip-kindtag.is-s { border-color: var(--cat-pos); color: var(--cat-pos); background: var(--cat-pos-bg); }

.mslip-slicer { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.75rem; }
.mslip-chip {
  font-size: var(--cat-fs-xs); font-weight: 600;
  padding: 0.15rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--cat-line-strong); color: var(--cat-muted);
  background: var(--cat-field); text-decoration: none; white-space: nowrap;
}
.mslip-chip:hover { border-color: var(--cat-accent); color: var(--cat-accent-ink); }
.mslip-chip.is-on {
  background: var(--cat-accent-dim); color: var(--cat-accent-ink);
  border-color: var(--cat-accent);
}

/* 聞き返し（通常/委託・廃棄・先上げ・クレーム）。伝票画面のまんなかに出る */
.mslip-ask {
  border: 1px solid var(--cat-accent);
  border-radius: 0.8rem;
  background: var(--cat-card);
  color: var(--cat-ink);
  padding: 1.4rem 1.6rem;
  max-width: min(46rem, 92vw);
  box-shadow: 0 1.4rem 3rem rgb(0 0 0 / 45%);
  /* 共通CSSのリセットで margin が 0 になり、UA の中央寄せが効かないため明示する */
  margin: auto;
}
.mslip-ask::backdrop { background: rgb(0 0 0 / 55%); }
.mslip-ask h2 { margin: 0 0 0.6rem; font-size: var(--cat-fs-lg); }
.mslip-ask .note { margin: 0 0 1rem; }
.mslip-askpick { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* 委託の引取（出荷の段） */
.mslip-consign {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin: 0.4rem 0 0; padding-top: 0.4rem;
  border-top: 1px dashed var(--cat-line);
}
.mslip-consign .mslip-hint { margin-right: auto; }

/* 追加請求 */
.mslip-bill { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.mslip-bill li {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: var(--cat-base);
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--cat-line);
  border-left: 3px solid var(--cat-warn);
  border-radius: 0.4rem;
  background: var(--cat-field2);
}
.mslip-bill li.mslip-billempty { border-left-color: var(--cat-line); color: var(--cat-faint); }
.mslip-bill .cat-pn { margin-left: auto; }
/* 数式は右揃え（2026-08-08 Kinya さん）。数式と × は billcalc の1箱で、
   折り返すときも一緒に右端へ落ちる（別々だと × だけ2行目の左端に残る） */
.mslip-billcalc {
  display: flex; align-items: center; gap: 0.5rem;
  margin-left: auto; text-align: right;
}
.mslip-billtotal { margin: 0.35rem 0 0; font-size: var(--cat-fs-sm); color: var(--cat-faint); }

/* 追加請求を足す欄は**段の中**（1/4幅）に置くので縦積みにする。
   フォームの実体はページ末尾（form は入れ子にできない）で、ここは入力欄だけ */
.mslip-billadd { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.35rem; }
.mslip-billnums { display: flex; gap: 0.3rem; align-items: flex-end; }
.mslip-billnums input { min-width: 0; width: 100%; }
.mslip-billnums .btn { flex: none; }

/* 添付の追加欄（生産・売上・§10）。`.mslip-billadd` は縦積み＋ストレッチ前提の
   追加請求用なので、ここに直接ボタンを置くと横いっぱいに伸びてしまう
   （2026-08-10 実機で発覚）。行として組み、ボタンは内容幅に留める */
.mslip-fileadd { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.mslip-fileadd input[type="file"] { min-width: 0; flex: 1 1 auto; }
.mslip-fileadd .btn { flex: none; }
/* 数量・単価・掛率の列に常時ラベルを付ける（2026-08-08 Kinya さん）。プレース
   ホルダだけだと、値が入った瞬間に「これが何の欄か」が消える */
.mslip-billcol { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 0; }
/* 2026-08-10 Kinya さん: 数量・単価・掛率のラベルが小さすぎたので二段上げる */
.mslip-billcol label { font-size: var(--cat-fs-md); color: var(--cat-faint); }
.mslip-billx {
  font: inherit; background: none; border: none; cursor: pointer;
  color: var(--cat-faint); padding: 0 0.2rem; flex: none;
}
.mslip-billx:hover { color: var(--cat-neg); }
.mslip-hiddenform { display: none; }

/* 「見るもの」の窓 */
dialog.mslip-sheet {
  background: var(--cat-card); color: var(--cat-ink);
  border: 1px solid var(--cat-line-strong);
  border-radius: var(--cat-radius);
  padding: 0; width: min(52rem, 92vw); max-height: 85vh; overflow: hidden;
  /* 共通CSSのリセットが margin を 0 にするため、dialog の中央寄せ（UA の margin:auto）が
     効かず左上に出る。明示的に戻す（2026-08-06 に画面で発見） */
  margin: auto;
}
dialog.mslip-sheet::backdrop { background: rgba(11, 11, 12, 0.72); }
/* 発行の窓だけ広く取る（2026-08-10 Kinya さん）。明細行が4列（管理品番・台数・
   工程パターン・生産担当者）なので、「見るもの」の窓と同じ 52rem では列が痩せる。
   列の折り返しは**画面幅**で決まる（`.mslip-row` のメディアクエリ）ため、窓を
   広げないと画面が広いときほど中身が窮屈に見える */
dialog.mslip-sheet-wide { width: min(72rem, 94vw); }
.mslip-sheethd {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--cat-line);
}
.mslip-sheethd .btn { margin-left: auto; }
/* 窓の見出しの補足（基準日など）。**大きさは補足のまま・色だけ読める明るさにする**
   （2026-08-06 Kinya さん「重要な情報なので、大きさはそのままで見やすい色味で」）。
   `--cat-faint` は補足を捨ててよい情報として引いた色で、基準日には弱すぎた */
.mslip-sheetsub { font-size: var(--cat-fs-sm); color: var(--cat-ink); }
/* 表の列見出しも同じ理由で本文サイズ・本文色にする。
   `.cat-list thead th` の既定（xs・faint）は一覧ページ向けで、
   数十行を走査するときは小さいほうが邪魔にならないが、窓の中の数行の表では
   ただ読みにくいだけになる。**窓の中だけ**上書きする */
.mslip-sheetbody .cat-list thead th {
  font-size: var(--cat-base);
  color: var(--cat-ink);
  letter-spacing: normal;
}
/* C/D の「定価 × 0.70」。種別名と同じ大きさ・色で、少し離して置く
   （掛率は重要な情報なので、補足の薄い小文字にしない・2026-08-06 Kinya さん） */
.mslip-formula { margin-left: 1.2rem; color: var(--cat-ink); }
.mslip-sheetbody { padding: 0.8rem 1rem 1rem; overflow-y: auto; max-height: calc(85vh - 4rem); }
/* 窓の中の表の見出しは**窓の上端**に貼り付ける。
   `.cat-list thead th` の top は一覧ページの帯とツールバーの高さぶん下げてあり
   （その画面ではページごとスクロールするので正しい）、窓の中でそのまま効くと
   **見出しが表の途中の行に見える**（2026-08-06 実測。工程の一覧も同じ状態だった）。
   窓は自前でスクロールするので、基準は窓の上端＝0 でよい */
.mslip-sheetbody .cat-list thead th { top: 0; }
.mslip-sheetbody tr.mslip-marked td { background: var(--cat-warn-bg); }
/* 工程表の合計行。tbody との区切りが要るので上罫線を引く（tfoot は
   `.cat-list tbody td` の padding を継がないので明示し直す） */
.mslip-sheetbody .cat-list tfoot td {
  padding: 0.55rem 0.85rem;
  font-weight: 700;
  border-top: 1px solid var(--cat-line-strong);
}

.mslip-ev { list-style: none; margin: 0; padding: 0; font-size: var(--cat-fs-md); }
.mslip-ev li {
  display: grid; grid-template-columns: 8rem 1fr; gap: 0 0.75rem;
  padding: 0.15rem 0 0.15rem 0.85rem;
  border-left: 2px solid var(--cat-line);
}
.mslip-ev li.is-void .mslip-evwhat { color: var(--cat-neg); text-decoration: line-through; }

/* 保存後の知らせは**画面のまんなか**に出す（2026-08-05 Kinya さん）。

   段ごと保存にしたことで、押したボタンと従来の帯（画面の左上）が離れてしまい、
   保存できたのか分からなくなった。目の動く先＝押した場所の近くではなく、
   どの段から押しても同じ場所＝画面の中央に出す。

   成功は数秒で消え、**エラーは押すまで消えない**（読まずに流れると困るのはエラーだけ）。 */
.mslip-page .messages {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
  /* 幅は文面に合わせて伸びる（先上げの2行目を折り返さず1行で見せる・2026-08-08）。
     天井は画面幅。短文のときは従来の 34rem を保つ */
  width: max-content;
  min-width: min(34rem, 92vw);
  max-width: 92vw;
}
.mslip-page .messages li {
  background: var(--cat-card2);
  border: 1px solid var(--cat-line-strong);
  border-left: 4px solid var(--cat-accent);
  border-radius: var(--cat-radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  padding: 0.9rem 1.1rem;
  font-size: var(--cat-fs-lg);
  color: var(--cat-ink);
  cursor: pointer;
  white-space: pre-line;   /* 文面の \n を改行として効かせる（先上げの2行組） */
  transition: opacity 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
/* ×ボタン（m_slip.js が**エラーと sticky にだけ**差し込む・2026-08-08 Kinya さん）。
   押すまで残るバナーの出口なので**地味にしない** ―― 塗りつぶしの丸でボタンだと
   分かる形にし、色は帯の種類に合わせる。ふつうの成功には置かない
   （「消さないとだめなのか」と思わせるため） */
.mslip-page .messages .msg-close {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--cat-accent);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.mslip-page .messages li.success .msg-close { background: var(--cat-pos); }
.mslip-page .messages li.error .msg-close { background: var(--cat-neg); }
.mslip-page .messages .msg-close:hover { filter: brightness(1.2); }
.mslip-page .messages li.success { border-left-color: var(--cat-pos); }
.mslip-page .messages li.error {
  border-left-color: var(--cat-neg);
  color: var(--cat-neg);
}
/* 消えるときは触れないようにする（残骸がクリックを飲まないように） */
.mslip-page .messages li.is-gone { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .mslip-page .messages li { transition: none; }
}

/* 発行フォーム・確認画面 */
.mslip-issuecard { display: grid; gap: 0.9rem; padding: 1rem 1.1rem 1.2rem; }
@media (min-width: 50rem) { .mslip-issuecard { grid-template-columns: 1fr 1fr; } }
.mslip-field { display: flex; flex-direction: column; gap: 0.15rem; }
.mslip-field > label { font-size: var(--cat-fs-sm); color: var(--cat-muted); }
/* 共通部（生産日）は1列のまま。2列に広げると、右半分が空いて行との境が読めない */
.mslip-issuecommon { max-width: 22rem; }

/* 一括発行の明細行（管理品番×台数×工程パターン×生産担当者・§3・2026-08-10）。
   1行でも複数行でも同じ形で並べる ―― 「1枚のとき専用の見た目」を作らない */
.mslip-rows { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.mslip-row {
  position: relative;
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem 2.2rem 1rem 1.1rem;
  background: var(--cat-card);
  border: 1px solid var(--cat-line);
  border-radius: var(--cat-radius);
}
/* 台数だけは狭くてよい（2桁）。品番・パターン・担当者は名前が長い */
@media (min-width: 62rem) {
  .mslip-row { grid-template-columns: 2fr 0.6fr 1.4fr 1.4fr; align-items: start; }
}
/* ===== モードで欄を出し分ける（個別／大量在庫／現物修理・2026-08-11）==========
   モードが決まれば要る欄も紙の出し方も決まる。**JS は `data-issue-mode` を書き換える
   だけ**で、どの欄が見えるかはここが持つ（見た目の分岐をJSに散らさない）。 */
.mslip-modecard .mslip-radio { margin-top: 0.35rem; }
/* 個別＝1台ずつ。**台数欄そのものを出さない**（欄が無ければ個体欄の開け閉ての
   ルールも要らなくなる ―― 打つ人が意識するものが1つ減る・2026-08-11 Kinya さん） */
.mslip-issuebody[data-issue-mode="single"] .mslip-qtyfield { display: none; }
/* 大量在庫＝同じものをまとめて作る。個体情報（1台に1つ）は付かない */
.mslip-issuebody[data-issue-mode="stock"] .mslip-unitrow { display: none; }
/* 得意先・先方担当・仕切は現物修理のときだけ */
.mslip-issuebody:not([data-issue-mode="repair"]) .mslip-salesrow { display: none; }
/* 台数欄を消した幅（品番・パターン・担当者の3列） */
@media (min-width: 62rem) {
  .mslip-issuebody[data-issue-mode="single"] .mslip-row {
    grid-template-columns: 2fr 1.4fr 1.4fr;
  }
}
/* 現物修理の欄は行の下段（個体欄と同じ組み方）。得意先は名前が長いので広く取る */
.mslip-salesrow {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--cat-line);
}
@media (min-width: 62rem) {
  .mslip-salesrow { grid-template-columns: 2fr 1.2fr 1.2fr 1fr; align-items: start; }
}

/* 個体欄（ロットN現物・テストデータ）は行の下段に敷く。**1台ずつ作るときだけの欄**
   （2026-08-11）で、使う人も使う場面も限られるため、主役の4列とは段を分けて静かに置く */
.mslip-unitrow {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--cat-line);
}
@media (min-width: 62rem) {
  .mslip-unitrow { grid-template-columns: 1.4fr 1.4fr; align-items: start; }
}
/* 台数が2以上のときに欄の代わりに出る説明。**欄を消さずに閉じる**ので、
   「入れられるはずの欄が消えた」ではなく「いまは入れられない」が読める */
.mslip-unitoff { grid-column: 1 / -1; color: var(--cat-faint); }
/* 閉じている欄は触れないことを見た目でも言う（readonly は色が変わらないため）。
   台数も同じ ―― 個体情報を入れた行では1台に固定される（両側から塞ぐ） */
.mslip-unitrow input[readonly],
.mslip-unitrow input:disabled,
.mslip-qtyfield input[readonly] { opacity: 0.45; cursor: not-allowed; }

/* 「現物修理」は状態チップと同じ列に並ぶが、**別の軸**（どう作られたか）なので、
   少しだけ離して置く（2026-08-11） */
.mslip-chip-mode { margin-left: 0.8rem; }

/* 保存期間で捨てた添付（テストデータは出荷から1年・§10）。行は残すので、
   開けないことが見た目で分かるように静かに落とす */
.mslip-billgone { color: var(--cat-faint); text-decoration: line-through; }
.mslip-billgone .mslip-hint { margin-left: 0.4rem; text-decoration: none; }

/* 行の札（現物修理）。状態のピルの隣に置くが、**状態ではない**ので枠線だけの
   静かな見た目にして、色付きのピルと役割が違うことを見た目でも分ける */
.mslip-modetag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  border: 1px solid var(--cat-line);
  border-radius: 999px;
  font-size: var(--cat-fs-xs);
  color: var(--cat-faint);
  white-space: nowrap;
}

.mslip-rowsact { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.6rem; }
/* 行を外す「×」は行の右上。日付欄の「×」と同じ静かさで置く */
.mslip-rowx {
  position: absolute; top: 0.5rem; right: 0.6rem;
  font: inherit; background: none; border: none; cursor: pointer;
  color: var(--cat-faint); padding: 0 0.2rem; line-height: 1;
}
.mslip-rowx:hover { color: var(--cat-neg); }

/* 現品票の出し方（代表1枚／台数分）。ラジオは行に組んで、補足をその場に添える */
.mslip-tagmode { margin-top: 0.9rem; }
.mslip-radio {
  display: flex; align-items: baseline; gap: 0.45rem;
  font-size: var(--cat-base); cursor: pointer;
}
/* **`width: auto` を明示する。** 共通の入力欄は `width: 100%` なので、`flex: none`
   （＝縮まない）と噛み合うとラジオが行幅を丸ごと取り、文字が1列に潰れる
   （2026-08-10 実機で発覚） */
.mslip-radio input { flex: none; width: auto; }

/* 管理品番の候補（`product_combo.js`）。入力欄の真下に重ねて出す ―― 押し出すと
   フォーム全体が動いて、下の欄を狙っていた指が外れる */
/* 幅は中の入力欄に従う（発行フォームは1列いっぱい・伝票の得意先欄は小さい欄）。
   inline のままだと絶対配置の基準として使えないので inline-block にする */
.ref-combo { position: relative; display: inline-block; width: 100%; }

/* 入力欄と「選んだ相手の控え」を**横に並べる**（2026-08-06 Kinya さん）。
   下に回すと欄の高さが増えて、隣の段と行がずれる */
.mslip-refrow { display: flex; align-items: center; gap: 0.6rem; }
.mslip-refrow .ref-combo { flex: 1 1 auto; min-width: 0; }
/* 直に入っている入力欄（発行フォームの生産日）も同じ扱い。`.cat-page input` の
   `width: 100%` のままだと隣のボタン（「今日」）を押し出す */
.mslip-refrow > input { flex: 1 1 auto; min-width: 0; width: auto; }
/* 控えは**その段の他の値（生産担当者など）と同じ見え方**にする。
   ここだけ小さく薄くすると、同じ「いま入っている値」なのに別物に見える */
.mslip-refecho { flex: none; color: var(--cat-ink); white-space: nowrap; }
/* 参照ピッカーで選んだ相手の控え（表の中に置く版）。`.mslip-refecho` は flex の行を
   前提にした部品なので使い回さない（別画面の tr が flex 化した事故がある） */
.cat-refecho { display: block; margin-top: 2px; color: var(--cat-muted); font-size: 12px; }
.ref-combo-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 17rem;
  overflow-y: auto;
  /* 小さい入力欄（伝票の得意先）でも候補は読める幅を取る。名前が並ぶため */
  min-width: 20rem;
  background: var(--cat-card2);
  border: 1px solid var(--cat-line-strong);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.ref-combo-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.35rem;
  cursor: pointer;
}
.ref-combo-list li b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* 商品名は**品番と同じ大きさ**にする（色だけ落とす）。小さくすると品番と目の
   ピントが切り替わって、選ぶときに名前が読み飛ばされる（2026-08-06 Kinya さん） */
.ref-combo-list li span {
  color: var(--cat-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 一言（得意先のランク・掛率）は右端へ。名前が長くても位置が動かない */
.ref-combo-list li .ref-combo-note {
  margin-left: auto;
  padding-left: 0.6rem;
  flex: none;
  color: var(--cat-faint);
  font-variant-numeric: tabular-nums;
}
.ref-combo-list li.is-active { background: var(--cat-accent-dim); }
.ref-combo-list li.ref-combo-empty {
  color: var(--cat-muted);
  font-size: var(--cat-fs-sm);
  cursor: default;
}

.mslip-issueact { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.9rem; }
.mslip-confirm { padding: 1.2rem 1.4rem 1.4rem; max-width: 46rem; }
.mslip-confirm h2 { margin: 0 0 0.5rem; font-size: var(--cat-fs-lg); }
/* `.cat-page .note`（詳細度2）に負けるので、こちらも2つ重ねる。
   単独クラスで書くと警告が灰色のまま出る（2026-08-06 に画面で発見） */
.cat-page .mslip-warn { color: var(--cat-neg); }


/* 帯の左の番号欄（2026-08-06 Kinya さん）。**表示と入力が同じ場所**。
   見た目は今までの番号（`.cat-brand`）のまま ―― 枠も背景も出さず、
   触った（hover / focus）ときだけ打てる面を見せる。帯の左は作業中ずっと見えるので、
   ここに常時の枠を置くと「入力欄が主役」になって伝票の番号が読みにくくなる。 */
.mslip-numform { display: flex; align-items: center; min-width: 0; }
/* `M-` は固定なので欄の外に出す（打つ場所には連番だけが残る） */
.mslip-numpre { color: var(--cat-ink); }
.mslip-numin {
  width: 5em;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--cat-ink);
  background: none;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  padding: 0.05rem 0.3rem;
  margin-left: 0;
}
.mslip-numin:hover { border-color: var(--cat-line); }
.mslip-numin:focus { border-color: var(--cat-accent); background: var(--cat-card2); }
.mslip-numin::placeholder { color: var(--cat-faint); font-weight: 400; }

/* 入口の画面の「空の4段」。**入力欄は置かない**（打てるのに保存できない欄を作らない）。
   まだ何も指していないことが分かればよいので、段の見出しと日付の名前だけを薄く出す */
.mslip-flow-empty .mslip-step { min-height: 12rem; }
.mslip-emptyline { margin: 0.8rem 0 0; color: var(--cat-faint); font-size: var(--cat-base); }
.mslip-boardnote { margin-top: 1rem; }

/* 発行フォームの「×」は**入力欄と同じ寸法・同じ面**にする（2026-08-06 Kinya さん）。
   伝票画面（`.mslip-date` / 得意先欄）の「×」は日付欄の隣で小さく地味にしてあるが、
   発行フォームは欄が背が高いので、同じ見た目のまま置くと欄の横に小さな的が浮く。
   色は入力欄の枠と面をそのまま借りる（別の意匠を作らない） */
.mslip-issuecard .mslip-clear {
  font-size: var(--cat-fs-base);
  line-height: 1.5;
  background: var(--cat-field);
  border-color: var(--cat-line-strong);
  padding: 0.55rem 0.75rem;
}

/* 帯の1行目＝番号と状態のチップ（2026-08-07 Kinya さん）。**番号と状態は対で読む**ので
   横に並べ、チップも番号の隣で読める大きさにする（一覧の中の小さいチップとは役目が違い、
   ここは「いま開いている伝票が何か」を作業中ずっと示す1つだけの表示） */
.mslip-idtop { display: flex; align-items: center; gap: 0.6rem; }
/* 1行目（番号＋チップ）と2行目（品番・ロット）を少し離す（2026-08-07 Kinya さん）。
   どちらも読む値なので、詰まっていると1かたまりに見えて目が滑る */
.mslip-page .cat-idlabel { gap: 0.35rem; }
.mslip-idtop .mslip-pill { font-size: var(--cat-base); padding: 0.2rem 0.8rem; }

/* 帯の2行目＝品番・ロット。**段の中の値と同じ色**にする（2026-08-07 Kinya さん）。
   faint のままだと、同じ値なのに帯だけ「補足」に見える。大きさも少し上げて、
   離れた席からでも品番が読めるようにする */
/* 大きさは 19px 相当（2026-08-07 Kinya さん・実機で決めた値）。
   **帯は離れて見る場所**なので、段の中（15px に落としてある）と同じにする必要はない。
   行の中で文字が混ざらないよう、地の文も等幅の品番・ロットも同じ大きさにする */
.mslip-page .cat-of, .mslip-page .cat-of .mslip-num { font-size: 1.1875rem; }
.mslip-page .cat-of { color: var(--cat-ink); }

/* ==== S伝票（部品販売・apps/sales）。mslip の部品を再利用し、S固有の差分だけ ====
   モックは kikan/mocks/s_slip.html / s_reminder.html（2026-08-09 討議）。
   色は既存トークン経由（生カラーコードを書かない・kikan/CLAUDE.md） */

.sslip-number { font-size: 1.15rem; font-weight: 700; }

/* ヘッダー（1）＋明細（2）の2カード横並び。狭い画面では縦積み */
.sslip-cols { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; }
.sslip-head { flex: 1 1 21rem; }
.sslip-lines { flex: 2 1 36rem; }

/* 明細表。cat-list の上に、入力欄がセルいっぱいに広がる差分だけ足す */
.sslip-table input,
.sslip-table select {
  width: 100%;
  font-size: var(--cat-base);
  padding: var(--m-pad) var(--m-padx);
}
.sslip-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sslip-n { text-align: right; }
.sslip-table input.sslip-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
td.sslip-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* 品名（自由文）の幅。もとは管理品番の欄で「半角20文字が収まる」ことが根拠だったが、
   2026-08-12 に行が「種別＋品名」になったので、品名がひととおり読める幅として引き継ぐ */
.sslip-w-pn { width: 15.6rem; }
/* 種別（督促／未使用返却違約金／部品／工賃／その他）。最長の「未使用返却違約金」は
   生成された行でしか出ず、そこは文字で描くので、セレクトの幅はこのままで足りる */
.sslip-w-grp { width: 8.5rem; }

/* 派生元のM伝票（督促・違約金の行に出る）。**入力欄の下に落とす** ――
   インラインのままだと品名欄の右へ流れて、隣の定価欄に重なる（2026-08-12 実機で発覚）。
   `.mslip-hint` 自体は他所でインラインとして使うので、ここだけの箱にする */
.sslip-srcref { display: block; margin-top: 0.2rem; }
/* 定価・仕切は「100,000」（6桁＋カンマ）が入力欄のパディング込みで切れない幅
   （2026-08-09 実機指摘）。増えたぶんは品番・グループ列を詰めて吸収 */
.sslip-w-price { width: 7.5rem; }
.sslip-w-rate { width: 5.5rem; }
.sslip-w-qty { width: 4rem; }
.sslip-w-del { width: 2rem; }
.sslip-newrow td { background: var(--cat-field); }

/* 行を消す「×」。M の追加請求の × と同じ気配（押すまで静か・触ると赤） */
.sslip-rowdel {
  background: none; border: none; cursor: pointer;
  color: var(--cat-faint); font-size: 1rem; padding: 0.2rem;
}
.sslip-rowdel:hover { color: var(--cat-neg); }

/* 合計（部品仕切計／消費税／合計）。右寄せの1列 */
.sslip-totals {
  display: flex; justify-content: flex-end; gap: 1.8rem; margin-top: 0.6rem;
}
.sslip-totals .t { font-size: var(--cat-fs-xs); color: var(--cat-faint); }
.sslip-totals .v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--cat-fs-lg); text-align: right;
}
.sslip-grand .v { font-weight: 700; color: var(--cat-pos); }
/* 赤伝（読み取り専用画面）のマイナス金額。合計の緑より優先させる */
.sslip-neg, .sslip-grand .v.sslip-neg { color: var(--cat-neg); }

/* 売上日＋赤伝＋保存の帯（明細カードの底） */
.sslip-salesbar {
  display: flex; align-items: flex-end; gap: 0.75rem;
  border-top: 1px solid var(--cat-line); margin-top: 0.75rem; padding-top: 0.75rem;
}
.sslip-datef { display: flex; flex-direction: column; gap: 0.2rem; }
.sslip-datef label { font-size: var(--cat-fs-xs); color: var(--cat-faint); }
.sslip-salesbar .btn-primary { margin-left: auto; }

/* 「赤伝を作る」。取り消せない操作なので赤の輪郭（塗りつぶしにはしない） */
.sslip-aka { color: var(--cat-neg); border-color: var(--cat-neg); }
.sslip-aka:hover:not(:disabled) { background: var(--cat-neg-bg); color: var(--cat-neg); }
.sslip-aka:disabled { opacity: 0.45; cursor: not-allowed; }

/* 未返却督促：得意先ごとの区切り行と、選ぶ材料の帯 */
.sslip-grouphd td {
  background: var(--cat-field); color: var(--cat-muted);
  font-size: var(--cat-fs-sm); font-weight: 700;
}
.sslip-late { color: var(--cat-neg); }
.sslip-bar {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  margin-top: 0.75rem;
}
.sslip-bar .btn-primary { margin-left: auto; }
.sslip-barfield {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--cat-fs-sm); color: var(--cat-muted);
}

/* ===== 締め処理・営業日カレンダー（リファレンス_締め処理設計.md） =================
   cat 意匠の上に差分だけを足す。色は --cat-* を使い、生のカラーコードは書かない。 */

/* 期間カード。並ぶのは同種（期間）だが件数が少なく、状態で選ぶのでカード側 */
.closing-cards { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.2rem; }
.closing-card {
  width: 22rem; background: var(--cat-card); border: 1px solid var(--cat-line);
  border-radius: 0.75rem; padding: 1rem 1.1rem;
}
.closing-card:hover { border-color: var(--cat-accent); }
.closing-card-head { display: flex; align-items: center; gap: 0.5rem; }
.closing-gname { color: var(--cat-muted); font-size: var(--cat-fs-sm); }
.closing-range { font-family: var(--font-mono); font-size: var(--cat-fs-md); margin: 0.15rem 0 0.4rem; }
.closing-amount { font-family: var(--font-mono); font-size: var(--cat-fs-xl); font-weight: 700; }
.closing-sub { font-size: var(--cat-fs-sm); color: var(--cat-faint); }
.closing-sub.is-diff { color: var(--cat-warn); }
.closing-sub.is-stop { color: var(--cat-neg); }
.closing-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.8rem 0 1rem; }

/* 関所の帯。止めるときは赤、知らせるだけは黄 */
.closing-band {
  display: flex; gap: 0.7rem; align-items: flex-start;
  border: 1px solid var(--cat-line); border-radius: 0.7rem;
  background: var(--cat-card); padding: 0.8rem 1rem; margin: 0 0 1rem;
  font-size: var(--cat-fs-sm);
}
.closing-band.is-stop { border-color: var(--cat-neg); }
.closing-band.is-info { border-color: var(--cat-warn); }
.closing-band-ic { font-size: var(--cat-fs-md); }

.closing-summary { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 1rem; }
.closing-k {
  display: inline-block; width: 9rem; color: var(--cat-muted); font-size: var(--cat-fs-sm);
}
.closing-n { text-align: right; font-family: var(--font-mono); }
.closing-h2 { font-size: var(--cat-fs-md); margin: 1.4rem 0 0.5rem; }
.closing-note { font-size: var(--cat-fs-sm); color: var(--cat-faint); margin: 0.5rem 0; }
.closing-skip td { color: var(--cat-faint); }
.closing-inline { display: inline-flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
/* `.cat-page input { width: 100% }`（詳細度 0,1,1）に勝つ必要があるので、
   ページのクラスと並べて 0,2,0 にする。素の `.closing-reason` だと負けて
   入力欄が画面幅いっぱいに伸びる（2026-08-12 実機） */
.cat-page .closing-reason {
  background: var(--cat-field); border: 1px solid var(--cat-line); border-radius: 0.4rem;
  color: var(--cat-ink); padding: 0.35rem 0.5rem; font-size: var(--cat-fs-sm);
  width: 18rem;
}
.closing-inline input[type="date"], .closing-inline input[type="number"] { width: 10rem; }
.closing-drift { margin-top: 0.5rem; }
.is-diff { color: var(--cat-neg); }

/* 営業日カレンダー */
.wcal-cols { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.wcal-main { flex: 1 1 34rem; }
.wcal-side { flex: 0 1 24rem; display: flex; flex-direction: column; gap: 1rem; }
.wcal-nav { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.wcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; }
.wcal-dow { text-align: center; font-size: var(--cat-fs-xs); color: var(--cat-muted); }
.wcal-dow.is-sat { color: var(--cat-accent); }
.wcal-dow.is-sun { color: var(--cat-neg); }
.wcal-cellform { display: block; }
.wcal-day {
  width: 100%; min-height: 3.6rem; text-align: left; cursor: pointer;
  background: var(--cat-field); border: 1px solid var(--cat-line);
  border-radius: 0.45rem; color: var(--cat-ink); padding: 0.3rem 0.4rem;
  display: flex; flex-direction: column; gap: 0.1rem; font-family: inherit;
}
.wcal-day:hover { border-color: var(--cat-accent); }
.wcal-day.is-off { background: var(--cat-neg-bg); }
.wcal-day.is-off .wcal-d { color: var(--cat-neg); }
.wcal-day.is-today { box-shadow: 0 0 0 1px var(--cat-accent) inset; }
.wcal-d { font-family: var(--font-mono); font-size: var(--cat-fs-sm); }
.wcal-lb { font-size: var(--cat-fs-xs); color: var(--cat-warn); }
.wcal-mark { font-size: var(--cat-fs-xs); color: var(--cat-faint); }
.wcal-blank { min-height: 3.6rem; }
.wcal-legend {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.8rem;
  font-size: var(--cat-fs-xs); color: var(--cat-faint);
}
.wcal-sw {
  display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 0.2rem;
  background: var(--cat-field); border: 1px solid var(--cat-line); margin-right: 0.3rem;
}
.wcal-sw.is-off { background: var(--cat-neg-bg); }
.wcal-box { padding: 0.9rem 1rem; }
.wcal-dry { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: var(--cat-fs-xs); color: var(--cat-faint); }

/* 締め後の変更は赤（売上後変更の黄より一段強い。設計 §4） */
.mslip-ev .is-afterclosed .mslip-evwhat { color: var(--cat-neg); }
.mslip-ev li.is-afterclosed { border-left: 3px solid var(--cat-neg); padding-left: 0.5rem; }

/* 売上が無かっただけの得意先は畳む（実データで77件並び、直すべき2件が埋もれた） */
.closing-quiet { margin: 0.8rem 0; font-size: var(--cat-fs-sm); color: var(--cat-faint); }
.closing-quiet summary { cursor: pointer; }
.closing-quiet ul { columns: 3; margin: 0.5rem 0 0; padding-left: 1.1rem; }

/* カレンダー右カラムの締日行。ラベル幅を詰めて折り返さないようにする */
.wcal-box .closing-k { width: 6.5rem; }
.closing-quiet-why { color: var(--cat-faint); margin-left: 0.4rem; font-size: var(--cat-fs-xs); }
/* カレンダーの日セルに出す個人の予定（締めには効かない・見えるだけ） */
.wcal-note {
  font-size: var(--cat-fs-xs); color: var(--cat-accent-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wcal-day:disabled { cursor: default; opacity: 1; }
/* 締め画面への入口。行末で折り返すと読みにくいので折り返さない */
.wcal-golink { white-space: nowrap; margin-left: 0.4rem; }

/* ── 管理分析（cockpit・ADR 0009 の移行先）──────────────────────
   Flask 版の意匠（KPIカード＋横棒グラフ）を kikan のトークンで組み直したもの。
   色・角丸は kikan/static/kdk-common.css の変数を使い、ここには写さない。 */

.ck-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ck-head-actions { display: flex; align-items: center; gap: 0.6rem; }
.ck-month { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); color: var(--text-muted); }
.ck-month input { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.35rem 0.5rem; color: var(--text); font: inherit; }

.ck-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 20px; }
.ck-panel-title { font-size: 14px; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 10px; padding-left: 2px; }
/* 「今月の目標」は横1列（Flask 版と同じ）。入力は万円・台・自動計算の欄が混ざる */
.ck-target-form { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.ck-target-form label, .ck-target-field { font-size: 14px; color: var(--text-muted); }
.ck-target-form input, .ck-target-view {
  display: flex; align-items: center; box-sizing: border-box;
  margin-top: 4px; height: 36px; padding: 0 10px;
  background: var(--surface2); border-radius: var(--radius-md);
  color: var(--text-muted); font: inherit;
}
/* 入力できる欄だけ縁を強調する（自動計算の欄と見分けるため・Flask 版と同じ） */
.ck-target-form input { width: 110px; border: 1px solid var(--kdk-accent); }
.ck-target-view { min-width: 90px; border: 1px solid var(--border); }
.ck-target-view.is-link { border-color: var(--kdk-accent); color: inherit; text-decoration: none; }
.save-status { font-size: var(--fs-xs); color: var(--text-muted); min-height: 18px; }
/* 月の送り（← 前月 / 2026年08月 / 次月 →）。ページ上部の中央に置く */
.ck-monthnav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 24px; }
.ck-monthnav-label { font-weight: 600; min-width: 90px; text-align: center; }

/* KPIカードは **Flask 版 cockpit の意匠をそのまま移したもの**（cockpit/templates/base.html
   のインライン style を、CSP 厳格モードのためクラスとして持ち直した）。
   クラス名も向こうと同じにしてある ―― 並べて比べたときに差が読めるようにするため。
   ⚠️ ラベル・サブ文言に --text-dim を使わないこと（ダークで #555 は暗すぎる）。 */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-section-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; margin: 24px 0 6px; padding-left: 2px; }
.kdk-kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; display: block; text-decoration: none; color: inherit; }
a.kdk-kpi-card:hover { border-color: var(--kdk-active); }
.kdk-kpi-label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); margin-bottom: 6px; }
.kdk-kpi-icon { font-size: 18px; line-height: 1; }
.kdk-kpi-value { font-size: 30px; font-weight: 500; line-height: 1; color: #b0b0b0; }
.kdk-kpi-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; min-height: 1em; }
/* 実績バー。幅と色は JS が入れる（値そのものなのでクラスにできない）。
   色の意味は cockpit_dashboard.js の barColor(): 未設定=水色 / 達成=緑 / 未達=赤 */
.kdk-kpi-bar { height: 8px; border-radius: 5px; background: var(--surface2); overflow: hidden; margin: 8px 0 4px; }
.kdk-kpi-bar > span { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--kdk-accent); }
.kdk-kpi-bar > span.is-good { background: var(--kdk-positive); }
.kdk-kpi-bar > span.is-bad { background: var(--kdk-negative); }
/* カード全体を塗る合図（目標達成＝緑・未達＝赤）。Flask 版の inline style の置き換え */
.kdk-kpi-card.is-good { background: rgba(29, 158, 117, 0.12); border-color: var(--kdk-positive); }
.kdk-kpi-card.is-bad { background: rgba(216, 90, 48, 0.10); border-color: var(--kdk-negative); }
/* 生産/販売バランスの乖離（10%超=黄・25%超=赤）。数字そのものを着色する */
.kdk-kpi-value.is-warn { color: #e8a838; }
.kdk-kpi-value.is-alert { color: var(--kdk-negative); }
/* 「追加予定」のプレースホルダー枠（生産分析の5列グリッドの空き枠） */
.kpi-placeholder { border-style: dashed; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-dim); text-align: center; gap: 4px; }
.kpi-placeholder-plus { font-size: 20px; opacity: 0.5; }
.kpi-placeholder-text { font-size: 12px; }

.ck-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
/* アクティブは縁だけ赤（Flask 版 production.html の .prod-view-btn.active を踏襲） */
.ck-tab.is-active, .ck-preset.is-active, #ck-sort.is-active { border-color: var(--kdk-negative); color: var(--text); }


.ck-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.6rem 0.9rem; margin-bottom: 0.6rem; }
.ck-block summary { cursor: pointer; list-style: none; }
.ck-block summary::-webkit-details-marker { display: none; }
.ck-sub-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); margin: 0.8rem 0 0.3rem; }

/* 生産台数（Flask 版 sections/production.html の意匠）──────────
   横棒グラフは「ラベル / トラック / 台数 / 構成比」の4列。ヘッダー・データ行・
   合計行が同じ列構造を共有するので、幅はここ1箇所で決める。 */
.prod-kpi { position: relative; }
.prod-month-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; font-weight: 600; padding: 2px 10px; border-radius: 999px;
  background: rgba(29, 158, 117, 0.12); color: #1d9e75;
  border: 1px solid rgba(29, 158, 117, 0.35);
}
.prod-big { font-size: 36px; font-weight: 700; line-height: 1; color: var(--text); }
.prod-unit { font-size: 17px; font-weight: 400; margin-left: 3px; }
.prod-plan-btn {
  display: inline-block; margin-top: 10px; padding: 5px 14px;
  border-radius: 6px; border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); font-size: 12px; text-decoration: none; transition: all 0.15s;
}
.prod-plan-btn:hover { border-color: var(--kdk-active); color: var(--text); }

.prod-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.prod-controls select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-sm); background: var(--surface); color: var(--text);
}
.prod-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
/* 選択中は --kdk-active の薄塗り（Flask 版 .prod-view-btn.active と同じ） */
.prod-view-btn {
  padding: 7px 18px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 13px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.prod-view-btn:hover { border-color: var(--kdk-active); color: var(--text); }
.prod-view-btn.is-active { background: rgba(122, 37, 37, 0.18); border-color: var(--kdk-active); color: var(--text); }

.prod-chart-title { font-size: 16px; color: var(--text); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 40px; }
.prod-chart-title::before { content: ""; width: 3px; height: 17px; border-radius: 2px; background: currentColor; }

.prod-bar-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.prod-bar-label {
  width: 100px; min-height: 44px; display: flex; flex-direction: column;
  justify-content: center; font-size: 16px; color: var(--text-muted);
  overflow: hidden; flex-shrink: 0;
}
.prod-bar-label.is-wide { width: 200px; }
.prod-bar-code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-bar-subname { font-size: 12px; color: var(--text-dim); }
.prod-bar-track { flex: 1; height: 20px; border-radius: 10px; background: rgba(128, 128, 128, 0.1); overflow: hidden; }
/* 構成比に依らず単色。彩度を落とした緑（成績欄でネオン感を出さない） */
.prod-bar-fill { height: 100%; border-radius: 10px; background: #2f7b61; transition: width 0.3s; }
.prod-bar-count { width: 70px; text-align: right; font-size: 16px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.prod-bar-pct { width: 58px; text-align: right; font-size: 16px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
/* ヘッダー・合計行のラベルはデータ行の min-height を引き継がない（高さを詰める） */
.prod-bar-head { padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border-light); }
.prod-bar-foot { padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--border); }
.prod-bar-head .prod-bar-label, .prod-bar-foot .prod-bar-label { min-height: 0; display: block; }
.prod-expand-wrap { text-align: center; margin-top: 14px; }
.prod-expand-btn {
  padding: 7px 20px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 12px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.prod-expand-btn:hover { border-color: rgba(55, 138, 221, 0.4); color: var(--text); }

.ck-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: 0.5rem; }
.ck-table th { text-align: left; font-weight: 500; color: var(--text-muted); font-size: var(--fs-xs); padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); }
.ck-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); }
.ck-num { text-align: right; font-variant-numeric: tabular-nums; }
.ck-rank { color: var(--text-dim); width: 3rem; }
.ck-total-row td { font-weight: 500; border-top: 2px solid var(--border); border-bottom: none; }

/* 管理分析の自前SVGチャート（依存ライブラリなし・Flask 版 trend.html の作りを踏襲） */
.ck-chart { width: 100%; height: auto; }
.ck-chart-line { fill: none; stroke: var(--kdk-accent); stroke-width: 2; }
.ck-chart-dot { fill: var(--kdk-accent); }
.ck-chart-baseline { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 4 4; }
.ck-chart-axis { fill: var(--text-dim); font-size: 11px; }
.ck-chart-bar-a { fill: var(--kdk-accent); }
.ck-chart-bar-b { fill: var(--surface2); }
/* 平均割れが続いたときのバッジ（量で稼ぐ状態への滑り落ちの早期警報） */
.ck-badge { margin-left: 0.4rem; font-size: var(--fs-xs); color: var(--kdk-negative); }
.ck-table td.is-alert { color: var(--kdk-negative); }

/* 内訳分析（Flask 版 sections/ranking.html の意匠）──────────
   表は <table> ではなく**横棒グラフと同じ行構造**で組む
   （2026-07 Kinya さん「他の数字や文字の感じが違うので日計表ベースで揃えて」）。
   金額は万円に丸めず実額（円・単位なし）。桁をそのまま読む画面のため。 */
.rk-kpis { margin-bottom: 36px; }
.rk-kpi { padding: 40px 20px; }
.rk-kpi-value { font-size: 36px; font-weight: 500; line-height: 1; color: var(--text); }
.rk-kpi-value.is-positive { color: var(--kdk-positive); }
.rk-kpi-value.is-negative { color: var(--kdk-negative); }
/* その次元では算出できない指標（得意先の粗利など）。0円と誤読させないため薄くする */
.rk-kpi-value.is-muted { opacity: 0.4; }

.rk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.rk-btn-row { display: flex; gap: 8px; }
/* 並び順は表示プリセットと別グループなので間隔を広く空ける */
.rk-sort { margin-left: 40px; }
.rk-period { margin-bottom: 24px; }
/* アクティブは**縁のみ赤**（背景は塗らない）。生産台数の切替ボタンとは塗り方が違う */
.rk-view-btn {
  padding: 7px 18px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 13px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.rk-view-btn:hover { border-color: var(--kdk-active); color: var(--text); }
.rk-view-btn.is-active { background: transparent; border-color: var(--kdk-active); color: var(--text); }
.rk-date {
  padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 13px; font-family: inherit;
}
.rk-date:hover { border-color: var(--kdk-active); color: var(--text); }
/* カレンダーのアイコンをテーマに追従させる */
[data-theme="dark"] input[type="date"] { color-scheme: dark; }
.rk-tilde { color: var(--text-muted); }

.rk-chart-head-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rk-chart-period { font-size: 13px; color: var(--text-muted); }

.rk-bar-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.rk-bar-rank { width: 28px; text-align: center; font-size: 15px; color: var(--text-muted); flex-shrink: 0; }
.rk-bar-rank.is-crown { font-size: 17px; }
.rk-bar-label {
  width: 140px; font-size: 15px; color: var(--text); flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-bar-label.is-wide { width: 220px; }
.rk-bar-code { color: var(--text-dim); font-size: 11px; margin-left: 6px; }
.rk-staff-link { color: inherit; text-decoration: none; }
.rk-staff-link:hover { color: var(--kdk-accent); text-decoration: underline; }
.rk-bar-num { width: 90px; text-align: right; font-size: 15px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.rk-bar-num.is-positive { color: var(--kdk-positive); }
.rk-bar-num.is-negative { color: var(--kdk-negative); }
.rk-bar-rate { width: 58px; text-align: right; font-size: 15px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.rk-bar-pct { width: 58px; text-align: right; font-size: 15px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.rk-bar-spacer { flex: 1; }
.rk-bar-head { padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border-light); }
.rk-bar-head > div { font-size: 13px; color: var(--text-muted); }
.rk-bar-foot { padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--border); }
.rk-bar-foot > div { font-weight: 500; }
.rk-empty { text-align: center; padding: 20px; color: var(--text-dim); }

/* 推移分析（Flask 版 sections/trend.html の意匠）─────────────
   自前 SVG チャート3枚。クラス名は Flask 版とほぼ同じ（意味が一目で対応するように）。
   色は kikan/static/kdk-common.css の変数から取り、ここに数値を転記しない。 */
.kdk-chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 20px; }
.kdk-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 12px; flex-wrap: wrap; }
.kdk-chart-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.kdk-chart-title-note { color: var(--text-dim); font-size: var(--fs-xs); font-weight: 400; margin-left: 6px; }

.alert-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  font-size: var(--fs-xs); background: rgba(216, 90, 48, 0.10); color: var(--kdk-negative);
  border: 1px solid rgba(216, 90, 48, 0.35);
}

.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.gridline { stroke: var(--border-light); stroke-width: 1; }
.axis-label { fill: var(--text-dim); font-size: 10px; font-family: var(--font-sans); }
.unit-bar { fill: var(--text-dim); opacity: 0.22; }
.bar-production { fill: var(--kdk-accent); opacity: 0.85; }
.bar-sales { fill: var(--kdk-positive); opacity: 0.85; }
.gpu-line { fill: none; stroke: var(--kdk-accent); stroke-width: 2; }
.balance-line { fill: none; stroke: var(--kdk-accent); stroke-width: 2; }
.ma-line { fill: none; stroke: #e8a838; stroke-width: 1.5; stroke-dasharray: 2 3; }
.avg-line { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 5 4; }
.avg-label { fill: var(--text-muted); font-size: 10px; font-family: var(--font-sans); }
.band-ok { fill: var(--kdk-positive); opacity: 0.06; }
.pt { fill: var(--kdk-accent); stroke: var(--surface); stroke-width: 1.5; }
.pt.is-warn { fill: #e8a838; }
.pt.is-bad { fill: var(--kdk-negative); }

.hover-strip { fill: transparent; cursor: pointer; }
.hover-guide { stroke: var(--border); stroke-width: 1; opacity: 0; pointer-events: none; }

.chart-tooltip {
  position: absolute; display: none; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px; font-size: var(--fs-xs); white-space: nowrap; z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.chart-tooltip b { font-size: var(--fs-sm); }
.chart-tooltip table td { padding: 1px 0; color: var(--text-muted); }
.chart-tooltip table td:last-child { text-align: right; color: var(--text); font-weight: 600; padding-left: 14px; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--text-muted); }
.legend-swatch { width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0; background: var(--text-dim); }
.legend-swatch-accent { background: var(--kdk-accent); }
.legend-swatch-muted { background: var(--text-muted); }
.legend-swatch-band { background: var(--kdk-positive); opacity: 0.3; }
.legend-swatch-positive { background: var(--kdk-positive); }
/* 仕入高（finance PL チャート）。既存トークンに合う色が無いための固有色 */
.legend-swatch-purchase { background: #FF9A3C; }
.legend-dotmark { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; background: var(--text-dim); }
.legend-dot-warn { background: #e8a838; }
.legend-dot-bad { background: var(--kdk-negative); }
.legend-dot-ref { background: var(--text-dim); opacity: 0.4; }
.legend-dot-accent { background: var(--kdk-accent); }
.legend-dot-positive { background: var(--kdk-positive); }
.ck-checkbox { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer; margin-left: auto; }

/* 生産効率・査定で共通に使う「素の値の色」（Flask 版 .pos/.neg・会計の慣習で ＋/−） */
.is-negative { color: var(--kdk-negative); }
.is-positive { color: var(--kdk-positive); }

/* テーブルカード（Flask 版 .kdk-table-card。月別サマリー表など） */
.kdk-table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; }
.kdk-table-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--border-light); }
.kdk-table-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.kdk-table-scroll { overflow-x: auto; }
.kdk-table-card table { width: 100%; border-collapse: collapse; }
.kdk-table-card th { text-align: left; padding: 8px 16px; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; background: var(--surface2); border-bottom: 1px solid var(--border-light); white-space: nowrap; }
.kdk-table-card th.r, .kdk-table-card td.r { text-align: right; }
.kdk-table-card td { padding: 9px 16px; font-size: var(--fs-sm); border-bottom: 1px solid var(--border-light); color: var(--text); white-space: nowrap; }
.kdk-table-card tr:last-child td { border-bottom: none; }
.kdk-table-card tr.is-selected td { background: var(--surface2); font-weight: 500; }

/* 指標の説明（誤読対策の常設注記。Flask 版 .callout） */
.callout { margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: linear-gradient(to right, rgba(55, 138, 221, 0.06), transparent); }
.callout-title { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 4px; }
.callout-body { color: var(--text-muted); font-size: var(--fs-xs); }
.chart-note { font-size: 12px; color: var(--text-dim); margin-top: 10px; }

/* 生産効率の合計KPIカード（内訳分析の .rk-kpi と同意匠・4列） */
.kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ck-month-chips { margin-bottom: 24px; }

/* 担当者別の横棒（内訳分析の行意匠＋台数列・トラック棒。順位/👑は無い） */
.rk-bar-units { width: 80px; text-align: right; font-size: 15px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.rk-bar-track { flex: 1; height: 18px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.rk-bar-track.is-faint { opacity: 0.45; }
.rk-bar-fill { height: 100%; border-radius: 4px; background: var(--kdk-accent); opacity: 0.85; }

/* 生産効率（全体）の月次推移。シンプルな折れ線＋加重平均の破線（ホバーなし） */
.eff-line { fill: none; stroke: var(--kdk-accent); stroke-width: 2; }
.eff-dot { fill: var(--kdk-accent); }
.eff-avg-line { stroke: var(--kdk-negative); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: 0.7; }
.eff-avg-label { fill: var(--kdk-negative); font-size: 11px; }

/* 査定（Flask 版 sections/staff_detail.html の意匠）─────────────
   株価チャートと同じ見せ方: 区間ごとに目標超過=緑/未達=赤で塗り分けた面グラフ
   ＋目標ペースの破線。色は kikan/static/kdk-common.css の変数から取る。 */
.ck-staff-select {
  padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg); color: var(--text); font: inherit;
}
.legend-dashed { background: transparent; border-top: 2px dashed var(--text-dim); height: 0; }

.ticker-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.ticker-value { font-size: 34px; font-weight: 500; line-height: 1; color: var(--text); }
.ticker-unit { font-size: 14px; color: var(--text-muted); }
.ticker-delta { font-size: 16px; font-weight: 400; padding: 2px 10px; border-radius: 999px; }
.ticker-delta.is-positive { color: var(--kdk-positive); background: rgba(29, 158, 117, 0.12); }
.ticker-delta.is-negative { color: var(--kdk-negative); background: rgba(216, 90, 48, 0.12); }
.ticker-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }

/* 財務分析（finance・Flask 版 finance/templates/base.html の移植分）─────
   .ck-head / .page-title / .page-desc / .callout / .badge / .legend / .r /
   .pos / .neg / .kdk-kpi-card / .kdk-chart-card / .kdk-table-card / .chart-wrap /
   .chart-tooltip / .btn-primary / .btn-secondary は既存の汎用クラスをそのまま使う
   （cockpit と同じ要領）。ここに足すのは finance だけで使う形だけ。 */
.nendo-selector { display: flex; align-items: center; gap: 8px; }
.nendo-selector label { font-size: var(--fs-sm); color: var(--text-muted); }
.stack-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 16px; }
.note-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.note-card { border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px; background: var(--surface); }
.note-card-title { font-weight: 600; margin-bottom: 10px; color: var(--text); }
.note-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.note-card textarea {
  width: 100%; min-height: 88px; resize: vertical; font-family: inherit;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-sm); background: var(--surface); color: var(--text);
}
.action-row { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.chip-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; padding: 4px 9px; font-size: 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--text-muted); }
/* .save-status は cockpit の目標保存欄と共通（上の方で定義済み・margin-top だけ足りないので下で補う） */
.search-bar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.search-count { font-size: var(--fs-xs); color: var(--text-dim); margin-bottom: 10px; }
.pagination { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-light); align-items: center; }
.page-btn { padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--fs-xs); cursor: pointer; transition: background 0.15s; }
.page-btn:hover { background: var(--surface2); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-info { font-size: var(--fs-xs); color: var(--text-muted); }
/* 想定税率カードのホバー明細（Flask 版 .kpi-has-tooltip の移植） */
.kpi-has-tooltip { position: relative; }
.kpi-has-tooltip .kpi-tooltip {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 0;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; white-space: nowrap; z-index: 200; font-size: var(--fs-xs);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
.kpi-has-tooltip:hover .kpi-tooltip { display: block; }
.kpi-tooltip table { border-collapse: collapse; }
.kpi-tooltip td { padding: 2px 10px 2px 0; color: var(--text-muted); }
.kpi-tooltip td:last-child { text-align: right; color: var(--text); font-weight: 600; padding-right: 0; }
.kpi-tooltip .tip-active td { color: var(--kdk-accent); }
.info-icon { font-size: 10px; color: var(--text-dim); margin-left: 4px; vertical-align: middle; cursor: default; }
/* 汎用ユーティリティ（JS が innerHTML で組み立てる断片用。CSP に inline style が
   使えないため、色や余白の小さな指定はここに集約する）。 */
/* 財務分析のハブ（Flask 版 hub.html の4枚横並びを踏襲）。
   kikan の .site-main は max-width:72rem（≒1112px 可用）で Flask 版の
   1180px 想定より狭いため、.portal-card の既定280pxをここだけ縮めて
   4枚が確実に1行に収まるようにする（.portal-card 自体は portal と共有なので触らない）。 */
.finance-hub { display: flex; justify-content: center; padding: 0 20px 40px; }
.finance-hub .portal-cards { max-width: 1120px; }
.finance-hub .portal-card { width: 250px; }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }
.table-empty { text-align: center; padding: 20px; }
.is-clickable { cursor: pointer; }
.row-note-hint { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.cell-date { white-space: nowrap; font-size: 12px; }
.cell-summary { color: var(--text-muted); font-size: 12px; }
.sub-note { font-size: 11px; color: var(--text-dim); }
@media (max-width: 900px) {
  .stack-grid, .note-grid { grid-template-columns: 1fr; }
  .note-meta { grid-template-columns: 1fr; }
}

.chart-tooltip-head { font-size: 14px; display: block; margin-bottom: 3px; }
.chart-tooltip-sub { color: var(--text-muted); font-size: 11px; }

.staff-target-line { fill: none; stroke: var(--text-dim); stroke-width: 1.5; stroke-dasharray: 5 4; }
.staff-seg-good { stroke: var(--kdk-positive); stroke-width: 2.5; }
.staff-seg-bad { stroke: var(--kdk-negative); stroke-width: 2.5; }
.staff-grad-good stop { stop-color: var(--kdk-positive); }
.staff-grad-bad stop { stop-color: var(--kdk-negative); }
.staff-dot-good { fill: var(--kdk-positive); stroke: var(--surface); stroke-width: 1.5; }
.staff-dot-bad { fill: var(--kdk-negative); stroke: var(--surface); stroke-width: 1.5; }

/* ============================================================
   玄関（ハブ・apps/hub）＝旧 portal トップの移植（ADR 0009 最終弾）
   portal.html のインライン <style> を CSP 対応で外部化しただけで、見た目は変えない
   （portal リデザインは「メニューが出尽くすまで着手しない」2026-07-28 判断）。
   カード・ヘッダーの正本は kdk-common.css。ここは portal トップ固有の差分のみ。
   ============================================================ */
.hub-page .site-main.is-hub {
  max-width: none; padding: 0 20px 48px;
  display: flex; flex-direction: column; align-items: center;
}
/* portal トップだけカード4列幅に広げる（280×4 + gap20×3 = 1180）。既定は 880px（3列） */
.hub-page .portal-cards { max-width: 1180px; }

/* スモールカードメニュー（外部リンク集・カードより明確に小さい行） */
.hub-page .maker-links {
  width: 100%; max-width: 1180px; margin: 16px auto 48px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.hub-page .maker-links-group { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.hub-page .maker-links-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  width: 100%; gap: 10px;
}
.hub-page .maker-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: 13px; color: var(--text);
  text-decoration: none; text-align: center; transition: border-color 0.2s, background 0.2s;
}
.hub-page .maker-link:hover { border-color: var(--kdk-active); background: var(--surface); }
.hub-page .maker-link .icon { font-size: 15px; line-height: 1; }

/* お知らせ帯（管理品番マスタの更新通知。正本は apps/hub/notices.py）
   一覧はバーの下にオーバーレイで開く（カードメニューを押し下げず、上にかぶせる。
   一段上のレイヤーの感覚・2026-07-30 Kinya さん指示） */
.hub-page .notice { width: 100%; max-width: 600px; margin: 0 auto 26px; position: relative; }
.hub-page .notice-bar {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 36px; padding: 0 10px 0 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text); font-family: var(--font-sans); font-size: var(--fs-sm);
  cursor: pointer; text-align: left;
}
.hub-page .notice-bar:hover { background: var(--surface2); }
.hub-page .notice-count {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em;
  color: var(--kdk-positive); border: 1px solid rgba(29,158,117,.35);
  background: rgba(29,158,117,.1); border-radius: var(--radius-sm); padding: 1px 6px; flex: none;
}
.hub-page .notice-bar-label { color: var(--text); font-size: var(--fs-sm); flex: none; }
.hub-page .notice-bar-latest {
  color: var(--text-muted); font-size: var(--fs-sm); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-page .notice-bar-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.hub-page .notice-chev { color: var(--text-muted); font-size: 10px; transition: transform .18s ease; padding: 0 4px; }
.hub-page .notice.open .notice-chev { transform: rotate(180deg); }

.hub-page .notice-list {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.hub-page .notice.open .notice-list { display: block; }

.hub-page .notice-row { border-bottom: 1px solid var(--border-light); }
.hub-page .notice-row:last-child { border-bottom: 0; }
.hub-page .notice-row-main { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 0; min-height: 34px; cursor: pointer; }
.hub-page .notice-row-main:hover { background: var(--surface2); }

.hub-page .notice-rail { width: 3px; align-self: stretch; background: var(--border-light); flex: none; position: relative; }
.hub-page .notice-rail i { position: absolute; left: 0; bottom: 0; width: 100%; background: var(--kdk-positive); opacity: .75; }
.hub-page .notice-row.low .notice-rail i { background: #E8A838; }
.hub-page .notice-row.read .notice-rail i { opacity: .3; }

.hub-page .notice-time { font-family: var(--font-mono); font-size: 11px; color: #999; flex: none; padding-left: 9px; }
.hub-page .notice-tag { font-size: 10.5px; padding: 1px 6px; border-radius: 3px; flex: none; font-weight: 500; letter-spacing: .04em; color: var(--kdk-positive); background: rgba(29,158,117,.15); }
.hub-page .notice-msg { flex: 1; font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-page .notice-msg .pn { color: #85B7EB; font-family: var(--font-mono); font-size: 12.5px; }
.hub-page .notice-row.read .notice-msg { color: var(--text-muted); }
.hub-page .notice-row.read .notice-msg .pn { color: #5f7f9f; }
.hub-page .notice-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; flex: none; }
.hub-page .notice-ttl { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); flex: none; }
.hub-page .notice-row.low .notice-ttl { color: #E8A838; }
.hub-page .notice-x { background: none; border: 0; color: transparent; font-size: 15px; line-height: 1; padding: 5px 6px; border-radius: var(--radius-sm); cursor: pointer; flex: none; }
.hub-page .notice-row-main:hover .notice-x { color: var(--text-dim); }
.hub-page .notice-x:hover { background: var(--surface2); color: var(--text); }

.hub-page .notice-detail { display: none; padding: 2px 14px 12px 62px; }
.hub-page .notice-row.open .notice-detail { display: block; }
.hub-page .notice-detail li { list-style: none; font-size: 12.5px; color: var(--text-muted); padding: 2px 0; }
.hub-page .notice-detail li::before { content: "—"; color: var(--text-dim); margin-right: 8px; }

.hub-page .notice-empty { padding: 10px 14px; font-size: 12.5px; color: var(--text-dim); }

@media (max-width: 768px) {
  .hub-page .portal-cards { flex-direction: column; align-items: center; }
  .hub-page .portal-card  { width: 100%; max-width: 340px; }
  .hub-page .site-main.is-hub { padding: 0 16px 32px; }
  /* スマホはサービスのうち Parts のみ表示（現在の機能範囲での措置） */
  .hub-page .card-service:not([data-feature="parts_ai"]) { display: none; }
  /* 管理カードは既定でスマホ非表示。スマホでも使う機能だけ cards.py 側で
     mobile=True を立て、テンプレートが card-mobile を付けたものを残す（仕入入力のOCRなど） */
  .hub-page .card-admin:not(.card-mobile) { display: none; }
  .hub-page .maker-links-row { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
  .hub-page .notice-time { display: none; }
  .hub-page .notice-detail { padding-left: 24px; }
}

/* ユーザー管理: 氏名行（氏名統合・2026-08。得意先=編集可 / 社内=担当者マスタが正本で表示のみ） */
.aum-page .name-row .name-input { max-width: 260px; }
.aum-page .name-row .name-value { font-size: var(--fs-sm); }
.aum-page .name-row .name-hint { margin-left: 8px; font-size: 11px; color: var(--text-muted); }
/* 氏名の氏/名 2欄（半角スペース自動連結・2026-08-18） */
.aum-page .name-pair { display: inline-flex; gap: 8px; }
.aum-page .name-pair .name-input { max-width: 130px; }
.aum-page .admin-form-row .name-pair input { flex: 1; min-width: 0; }