@charset "UTF-8";
/* ==========================================================
   在庫機 問い合わせ管理 — 共通スタイル（4画面共通）
   地：白・黒・グレー ／ 色は合図専用（赤・黄土色・緑）
   ========================================================== */
:root {
  --bg: #ffffff;
  --bg-sub: #f4f4f4;
  --bg-head: #ececec;
  --ink: #1a1a1a;
  --ink-2: #555555;
  --ink-3: #767676;
  --line: #d4d4d4;
  --line-strong: #8c8c8c;
  /* 合図（ここ以外で使わない） */
  --sig-red: #c4211b;
  --sig-ochre: #8f6400;
  --sig-ochre-bg: #f7efd9;
  --sig-green: #1f7a35;
  /* 操作の色（合図ではない。ボタン・選択中・見出しの印だけに使う） */
  --accent: #3b4f9a;
  --accent-hover: #2f3f7e;
  --accent-press: #26336a;
  --accent-tint: #eef0f8;
  --accent-line: #c9cfe6;
  --font: "Yu Gothic UI", "Meiryo", sans-serif;
  --fs: 13px;
  --fs-lg: 14px;
  --pad-x: 16px;
  --r: 6px;      /* ボタン・入力欄 */
  --r-box: 10px; /* 枠・パネル */
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg-sub);
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { margin: 0; font-weight: bold; }
h1 { font-size: var(--fs-lg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[hidden] { display: none !important; }

/* ---------- 未定 ---------- */
.tbd {
  display: inline-block;
  padding: 0 6px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-3);
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
}
.tbd-block {
  display: block;
  padding: 8px 12px;
  border-radius: var(--r-box);
  font-size: var(--fs);
  line-height: 1.5;
  white-space: normal;
  text-wrap: pretty;
}
.note { margin: 6px 0 0; color: var(--ink-2); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { background: var(--accent-tint); border-color: var(--accent-line); color: var(--ink); }
.btn:active { background: var(--accent-line); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: bold; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-primary:active { background: var(--accent-press); }

/* ---------- 共通ヘッダー ---------- */
.app-header { border-top: 3px solid var(--accent); border-bottom: 1px solid var(--line); background: var(--bg); }
.app-header .bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 8px var(--pad-x);
}
.app-name { font-size: 15px; font-weight: bold; white-space: nowrap; color: var(--accent); }
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tab {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
a.tab:hover { background: var(--accent-tint); color: var(--accent); }
.tab.is-current { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent); font-weight: bold; }
a.tab.is-current:hover { background: var(--accent-line); color: var(--accent-hover); }
.tab-off { color: var(--ink-3); }
.tabs .tbd { margin-left: 6px; }
.header-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.operator { display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink-2); }
.pagelinks {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  padding: 4px var(--pad-x);
  border-top: 1px solid var(--line);
  background: var(--accent-tint);
}
.pagelinks a { color: var(--ink-2); text-decoration: none; }
.pagelinks a:hover { color: var(--accent); text-decoration: underline; }
.pagelinks a[aria-current="page"] { color: var(--accent); font-weight: bold; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- ページ本体 ---------- */
.page { padding: 12px var(--pad-x) 32px; }
.page-head { margin-bottom: 10px; }
h1 { font-size: 18px; }
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin: 18px 0 8px;
}
.section-title::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--accent); }
.block + .block { margin-top: 10px; }

/* ---------- 入力部品 ---------- */
.input, .select, .textarea {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  min-width: 0;
}
.textarea { height: auto; min-height: 56px; padding: 6px 8px; resize: vertical; width: 100%; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.input::placeholder { color: var(--ink-3); }

/* ==========================================================
   トップ
   ========================================================== */
.stats-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.stat { border: 1px solid var(--line); border-radius: var(--r-box); background: var(--bg); padding: 10px 14px 12px; min-width: 0; }
.stat-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--ink-2); }
.stat-value { margin-top: 6px; }
.stat-lg { border: 2px solid var(--ink); padding: 14px 18px 16px; }
.stat-lg .stat-label { font-size: 16px; font-weight: bold; color: var(--ink); }
.stat-lg .stat-value .tbd { font-size: 18px; line-height: 30px; padding: 0 12px; }
.sig-mark { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sig-mark.red { background: var(--sig-red); }
.sig-mark.ochre { background: var(--sig-ochre); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }

/* ==========================================================
   一覧
   ========================================================== */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.filter:hover { background: var(--accent-tint); border-color: var(--accent-line); }
.filter.is-current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: bold; }
.filter .count { font-weight: bold; }
.count-red { color: var(--sig-red); }
.count-ochre { color: var(--sig-ochre); }
.filter.is-current .count-red, .filter.is-current .count-ochre { color: #fff; }
.filter .count .tbd { padding: 0 6px; }
.filter.is-current .count .tbd { background: transparent; color: #fff; border-color: #fff; }
.search { flex: 1 1 360px; display: flex; min-width: 240px; }
.search .input { flex: 1; width: 100%; border-radius: 999px; padding: 0 14px; }
.list-note { margin-bottom: 8px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--bg); }
.ledger { width: 100%; min-width: 1280px; border-collapse: collapse; table-layout: fixed; }
.ledger thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 28px;
  padding: 0 10px;
  background: var(--accent-tint);
  border-bottom: 1px solid var(--accent-line);
  color: var(--accent);
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
}
.ledger tbody td {
  height: 50px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  overflow: hidden;
}
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr.row { cursor: pointer; }
.ledger tbody tr.row:hover td { background: var(--accent-tint); }
.ledger .num { text-align: right; }
/* 上下2段 */
.l1, .l2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; }
.l2 { color: var(--ink-2); }
.l1 + .l2 { margin-top: 2px; }
.company { font-weight: bold; }
.company-none { color: var(--ink-3); font-weight: normal; }
.none { color: var(--ink-3); }

/* 業者／ユーザーの印（グレーの枠だけ。合図の色は使わない） */
.party {
  display: inline-block;
  margin-right: 5px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  vertical-align: 1px;
}

/* 銘板風ラベル（在庫番号） */
.plate {
  display: inline-block;
  max-width: 100%;
  padding: 0 6px;
  border: 1px solid #6e6e6e;
  border-radius: 1px;
  background: linear-gradient(#fafafa, #dedede);
  box-shadow: inset 0 0 0 1px #ffffff;
  color: var(--ink);
  font-weight: bold;
  letter-spacing: .06em;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.plate-none {
  border: 1px dashed var(--line-strong);
  background: none;
  box-shadow: none;
  color: var(--ink-3);
  font-weight: normal;
  letter-spacing: 0;
}
.plate-unknown { border: 2px solid var(--sig-red); box-shadow: none; line-height: 14px; }

/* 担当営業の色分け（人の見分け用。合図の赤・黄土色・緑と操作の紺は使わない） */
.staff {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 0 8px 0 6px;
  border: 1px solid var(--staff-line, var(--line));
  border-radius: 999px;
  background: var(--staff-bg, var(--bg-sub));
  color: var(--staff-ink, var(--ink));
  font-weight: bold;
  line-height: 18px;
  white-space: nowrap;
}
.staff::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--staff-ink, var(--ink-3)); }
.staff-1 { --staff-ink: #6b46a8; --staff-bg: #f3effa; --staff-line: #d9cdef; } /* 紫 */
.staff-2 { --staff-ink: #a8366f; --staff-bg: #fbeff5; --staff-line: #efcadb; } /* 桃 */
.staff-3 { --staff-ink: #17758f; --staff-bg: #ebf5f8; --staff-line: #c3e0e8; } /* 水色 */
.staff-4 { --staff-ink: #5c5c5c; --staff-bg: #f1f1f1; --staff-line: #d4d4d4; } /* 灰 */

/* 対応状況ラベル */
.status {
  display: inline-block;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  line-height: 16px;
  white-space: nowrap;
}
.status-new { border-color: var(--sig-red); color: var(--sig-red); font-weight: bold; }        /* 未対応 */
.status-progress { border-color: var(--sig-green); color: var(--sig-green); }                  /* 見積提出・見学調整・商談中 */
.status-won { border-color: var(--sig-green); background: var(--sig-green); color: #fff; font-weight: bold; } /* 成約 */
.status-lost { border-color: var(--line); color: var(--ink-3); text-decoration: line-through; } /* 失注 */

/* 次回予定日が過ぎている：td に .is-overdue、日付に .overdue */
.overdue { color: var(--sig-ochre); font-weight: bold; }
td.is-overdue { background: var(--sig-ochre-bg); }

/* 何もないとき */
.ledger tbody td.empty-cell { height: auto; padding: 40px 16px; text-align: center; border-bottom: 0; cursor: default; }
.empty-msg { margin: 0 0 12px; font-size: var(--fs-lg); color: var(--ink-2); }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ==========================================================
   詳細（項目と値の並び）
   ========================================================== */
.detail-page { max-width: 1200px; }
.detail-page .kv { padding: 4px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--bg); }
.kv {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 16px;
  margin: 0;
}
.kv-item {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 4px 0;
  border-bottom: 1px solid var(--bg-head);
}
.kv-item dt { color: var(--ink-2); }
.kv-item dd { margin: 0; min-width: 0; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.page-actions .btn { min-width: 96px; }

/* ==========================================================
   入力フォーム
   ========================================================== */
.form-page { max-width: 1100px; }
.guide { margin-bottom: 8px; }
.group { margin: 0 0 12px; padding: 12px 16px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--bg); min-width: 0; }
.group legend { float: left; width: 100%; margin-bottom: 8px; padding: 0 0 0 12px; border-left: 4px solid var(--accent); font-size: 15px; font-weight: bold; line-height: 16px; }
.fields { clear: both; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--ink-2); }
.field .input, .field .select { width: 100%; }
.field.span-2 { grid-column: span 2; }
.field.span-4 { grid-column: 1 / -1; }
.req { padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: bold; line-height: 16px; }
.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  background: var(--bg-sub);
  border-top: 1px solid var(--line);
}
.form-actions .btn { min-width: 96px; }
.form-notes { margin-top: 6px; }
.form-notes p { margin: 2px 0; color: var(--ink-2); }

@media (max-width: 900px) {
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field.span-2 { grid-column: 1 / -1; }
  .stats-primary { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .header-actions { margin-left: 0; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 入力フォームの中に置く「未定」の注記 */
.form-tbd { margin-top: 10px; }