:root {
  --accent: #2b5f8a;
  --bg: #f5f6f8;
  --panel-bg: #ffffff;
  --border: #d9dde3;
  --text: #222;
  --muted: #6b7280;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.topbar h1 { font-size: 18px; margin: 0; }

.topbar nav { display: flex; gap: 8px; }

.nav-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
}

.nav-btn.active { background: #fff; color: var(--accent); font-weight: bold; }
.nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }

main { padding: 20px; max-width: 1200px; margin: 0 auto; }

.view.hidden { display: none; }

/* 議事録アプリ表示中は、インク模様の帯（.topbar-drips）ごとトップバーを隠して
   画面いっぱいに使う。サイドメニュー（他タブへの切替）はそのまま残す */
body.minutes-fullscreen .topbar { display: none; }
body.minutes-fullscreen main { padding: 0; max-width: none; margin: 0; }

/* 議事録アプリのiframe。装飾パネル（splat panel）は中身が別アプリの画面なので外し、
   高さはトップバーが消えた分の画面いっぱいにする */
.view-minutes { padding: 0; background: none; }
.view-minutes::before,
.view-minutes::after { display: none; }
#minutes-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 20px);
  min-height: 600px;
  border: 0;
}

.toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.toolbar input[type="text"] { min-width: 260px; }

input, select, textarea, button {
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

button { cursor: pointer; background: #fff; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.link-btn { background: none; border: none; color: var(--accent); padding: 4px 0; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel-bg);
}

.data-table th, .data-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  font-size: 13px;
}

.data-table thead th {
  background: #eef1f5;
  position: sticky;
  top: 0;
}

.data-table tbody tr:hover { background: #f0f6fb; cursor: pointer; }

.pager { margin-top: 10px; color: var(--muted); font-size: 13px; }

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}

.panel h3 { margin-top: 0; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

.form-grid label.span2 { grid-column: span 2; }

.form-inline {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

.form-inline .grow { flex: 1; }

.doc-list { list-style: none; padding: 0; margin: 0 0 10px; }
.doc-list li { padding: 4px 0; display: flex; align-items: center; gap: 8px; }
.doc-list li .link-btn { margin-left: auto; }

.survey-item-row {
  display: grid;
  grid-template-columns: 1fr 120px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.survey-item-thumb { display: flex; align-items: center; justify-content: center; }
.survey-thumb-img { max-width: 110px; max-height: 80px; border-radius: 4px; }
.survey-item-actions { display: flex; align-items: center; gap: 8px; }

.as-status-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  background: #fdecea;
  color: #b3261e;
}
.as-status-badge[data-status="完了"] { background: #e6f4ea; color: #1e7b34; }

#save-status { margin-left: 10px; color: var(--muted); font-size: 13px; }

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: -1px;
}

.tab-btn {
  background: #eef1f5;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 8px 16px;
}

.tab-btn.active { background: var(--panel-bg); font-weight: bold; color: var(--accent); }

.tab-panel { border-radius: 0 6px 6px 6px; }
.tab-panel.hidden { display: none; }

.muted-note { color: var(--muted); font-size: 13px; }

#p-customer-results { margin-top: 8px; max-height: 200px; overflow-y: auto; }
.customer-result-row {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-top: none;
  cursor: pointer;
  font-size: 13px;
}
.customer-result-row:first-child { border-top: 1px solid var(--border); }
.customer-result-row:hover { background: #f0f6fb; }

/* ログイン画面 */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-box {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  width: 320px;
  max-width: 90vw;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.login-box h1 {
  font-size: 16px;
  text-align: center;
  color: var(--accent);
  margin-top: 0;
  margin-bottom: 20px;
}

.login-box form { display: flex; flex-direction: column; gap: 12px; }
.login-box label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.login-box button { margin-top: 8px; }
.error-text { color: #b3261e; font-size: 13px; min-height: 1em; margin: 0; }

/* 保存できなかった入力欄を目立たせる（小さな状態文字だけでは見落とされるため） */
.input-error { border-color: #c9372c !important; box-shadow: 0 0 0 2px rgba(201, 55, 44, .3) !important; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-actions span { font-size: 13px; opacity: 0.9; }
.header-actions button { background: rgba(255,255,255,0.15); color: #fff; border: none; padding: 6px 12px; border-radius: 4px; }

/* レスポンシブ（スマホ幅） */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  main { padding: 10px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar input[type="text"] { min-width: 0; width: 100%; }
  .data-table { display: block; overflow-x: auto; white-space: nowrap; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label.span2 { grid-column: span 1; }
  .form-inline { flex-wrap: wrap; }
}

/* ============================================================
   スプラトゥーン風デザイン（試験導入: ヘッダー＋顧客見込台帳）
   本家は「黒〜濃いグレーの濃淡がベース、白は文字だけ、有彩色は
   選択中・重要操作にだけ使う」比率。地に色を敷くのではなく、
   グレースケールのパネルの上に彩度の高い色を"差す"設計にする。
   ============================================================ */
:root {
  --splat-orange: #f5540b;
  --splat-orange-shadow: #c11a6b;   /* オレンジの影は色相をずらしてマゼンタ寄りに */
  --splat-cyan: #05c8c8;
  --splat-cyan-shadow: #2b4bd8;     /* ターコイズの影は青紫寄りに */
  --splat-lime: #d4ff00;
  --splat-pink: #ff2f92;
  --splat-purple: #6d3ce0;
  --splat-purple-shadow: #2d1466;   /* 紫の影は青寄りに */
  --splat-ink: #16161a;
  --splat-panel: #38383e;          /* パネル本体のグレー */
  --splat-panel-soft: #4a4a52;     /* パネル内の一段明るいグレー（チップ・ホバー用） */
  --splat-panel-dark: #232327;     /* パネル内の一段暗いグレー（見出し・縞用） */
  --splat-line: rgba(255, 255, 255, 0.14);
}

/* --- ヘッダー（全画面共通） --- */
.topbar {
  background: var(--splat-ink);
  position: relative;
  z-index: 3;
  border-bottom: none;
  padding-bottom: 16px;
}

/* CSSで描いた滴は「それらしいランダムさ」に見えなかったため、画像生成AIで
   作った素材（上端は直線で切り、下端だけが不規則に垂れる形）を横に繰り返す */
.topbar-drips {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 76px;
  pointer-events: none;
  background-image: url("/img/topbar_ink_edge.png");
  background-repeat: repeat-x;
  background-position: left top;
  background-size: auto 76px;
}

/* サイドメニューの大分類（例:「物件」）配下のタブ。インクの帯に重なって
   見づらいとの指摘を受け、ロゴの右側・ヘッダー本体の中に並べる通常の
   flexアイテムにした */
.section-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-tabs .nav-btn.section-tab {
  background: var(--splat-panel);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 7px 20px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease, background 0.1s ease;
}

.section-tabs .nav-btn.section-tab:hover {
  transform: translateY(-1px) rotate(-1.5deg);
  background: var(--splat-panel-soft);
}

.section-tabs .nav-btn.section-tab.active {
  background: var(--splat-lime);
  color: var(--splat-ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  transform: rotate(-1.5deg);
}

/* 垂れたインクが各画面の先頭のボタン等に被らないよう、本文の上に余白を確保する */
main { padding-top: 60px; }

/* ヘッダーに出す「今何の業務をやっているか」のラベル（例: 物件管理／取引先管理）。
   中身は app.js の showView() が更新する */
.topbar-section-label {
  font-family: "Rampart One", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  transform: rotate(-1.5deg);
  color: #fff;
  text-shadow: 3px 3px 0 var(--splat-orange);
  margin: 0;
}

/* 非選択タブは暗いグレー地に白文字（本家のオプション画面のタブ列を参考） */
.topbar .nav-btn {
  background: var(--splat-panel);
  color: #fff;
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 6px 16px;
  transition: transform 0.08s ease, background 0.08s ease;
}

.topbar .nav-btn:hover { transform: translateY(-1px) rotate(-1.5deg); background: var(--splat-panel-soft); }

/* 選択中タブだけ紫の塗りつぶし＋傾き。輪郭線は使わず、塗りと影だけで形を作る */
.topbar .nav-btn.active {
  background: var(--splat-purple);
  color: #fff;
  border-color: transparent;
  box-shadow: 3px 3px 0 var(--splat-purple-shadow);
  transform: rotate(-1.5deg);
}

.header-actions button {
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  padding: 6px 16px;
}

/* --- 各画面のパネル: 白ベースをやめ、ダークグレーのパネルに ---
   四隅の半径をわざと不揃いにして、機械的な長方形に見えないようにする */
.view {
  position: relative;
  padding: 26px 24px 22px;
  background-color: var(--splat-panel);
  border-radius: 48px 32px 52px 36px / 36px 52px 32px 48px;
}

/* インクの飛沫はパネルの角からはみ出させる。
   背景画像として敷くとパネルの縁で直線的に切られてしまうため、
   はみ出せる疑似要素として置いている */
.view::before {
  content: "";
  position: absolute;
  top: 18px;
  right: -46px;
  width: 140px;
  height: 140px;
  transform: rotate(12deg);
  pointer-events: none;
  z-index: 0;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23f5540b' fill-opacity='0.9' d='M96 22c9-2 11 12 20 15s22-11 28-3-8 19-6 29 20 9 21 20-15 13-18 23 8 22-1 27-19-9-29-8-16 15-26 12-8-16-15-22-21-1-24-11 9-16 8-26-13-16-8-25 18-3 25-11 16-18 25-20z'/%3E%3Ccircle fill='%23f5540b' fill-opacity='0.9' cx='178' cy='30' r='10'/%3E%3Ccircle fill='%23f5540b' fill-opacity='0.9' cx='188' cy='150' r='5'/%3E%3C/svg%3E");
}

.view::after {
  content: "";
  position: absolute;
  bottom: -52px;
  left: -58px;
  width: 125px;
  height: 125px;
  transform: rotate(150deg);
  pointer-events: none;
  z-index: 0;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%2305c8c8' fill-opacity='0.9' d='M100 20c10 3 9 16 18 21s23-8 27 2-9 18-5 28 19 11 18 22-16 11-20 21 5 23-5 26-17-11-27-11-18 13-27 9-6-17-13-23-21-3-22-14 11-15 11-25-11-17-5-25 17 0 25-8 15-25 25-23z'/%3E%3Ccircle fill='%2305c8c8' fill-opacity='0.9' cx='24' cy='26' r='9'/%3E%3C/svg%3E");
}

.view > * { position: relative; z-index: 1; }

/* 検索ツールバー: 輪郭線は使わず、白い塗りとくぼみの影だけでピル型に */
.view .toolbar input[type="text"],
.view .toolbar select {
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  background: #fdfdfb;
  color: #1c1c1e;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
}

.view .toolbar input[type="text"]:focus,
.view .toolbar select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(5, 200, 200, 0.55), inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* ピル型のチャンキーなボタン。輪郭線をやめ、塗りとハードシャドウで形を作る。
   ホバーでアクティブタブと同じように軽く傾いて弾む動きを付ける */
.view .toolbar button {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 999px;
  padding: 10px 26px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.view .toolbar button:hover {
  transform: translateY(-2px) rotate(-2deg) scale(1.04);
  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.55);
}

.view .toolbar button:active {
  transform: translate(2px, 2px) rotate(0deg) scale(1);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}

/* 検索系（既定）はターコイズ、新規追加など主要な操作はライム */
.view .toolbar button {
  background: var(--splat-cyan);
  color: var(--splat-ink);
}

.view .toolbar button.primary {
  background: var(--splat-lime);
  color: var(--splat-ink);
  border-color: transparent;
}

/* 一覧表は「罫線で区切られた表」ではなく「角丸のバーが並んでいる」形にする。
   行間は隙間で区切り、線は一切引かない（本家のオプション画面と同じ考え方） */
.view .data-table {
  border: none;
  background: transparent;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.view .data-table th,
.view .data-table td {
  border-bottom: none;
  color: #fff;
  padding: 8px 14px;
}

.view .data-table thead th {
  background: var(--splat-ink);
  color: var(--splat-lime);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.view .data-table thead th:first-child { border-radius: 18px 0 0 18px; }
.view .data-table thead th:last-child { border-radius: 0 18px 18px 0; }

/* 行の塗りはtrではなくtdに乗せる（trに背景を敷くと角丸が効かないため） */
.view .data-table tbody tr:nth-child(odd) td { background: #22222a; }
.view .data-table tbody tr:nth-child(even) td { background: #2c2c35; }

.view .data-table tbody td:first-child { border-radius: 18px 0 0 18px; }
.view .data-table tbody td:last-child { border-radius: 0 18px 18px 0; }

.view .data-table tbody tr:hover td { background: #4a2c14; }

.view .pager {
  color: rgba(255, 255, 255, 0.75);
  margin-top: 6px;
}

.view .pager button {
  border: none;
  border-radius: 999px;
  font-weight: 700;
  padding: 7px 18px;
  background: var(--splat-panel-soft);
  color: #fff;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

.view .pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.view .pager button:disabled { opacity: 0.35; cursor: default; }
.pager .pager-page { width: 64px; text-align: center; color-scheme: light; }
.pager .pager-size { margin-left: 8px; }
.pager .pager-size select { margin-left: 4px; color-scheme: light; }

/* 並べ替えできる列見出し */
.data-table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th[data-sort]::after { content: attr(data-mark); margin-left: 4px; font-size: 11px; }
.data-table th.sort-active { text-decoration: underline; }

/* --- 案件の状況プルダウン（詳細の上部と一覧の行） --- */
.project-status-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; }
.status-select { color-scheme: light; font-weight: 700; }
.project-status-bar .status-select { font-size: 15px; padding: 6px 10px; }
/* 契約済にした瞬間のインク演出の起点 */
.status-anchor { position: relative; display: inline-block; }

/* 商談中→契約済にした瞬間だけ再生する、ポップな弾みアニメーション */
@keyframes ohtori-btn-pop {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.18) rotate(-4deg); }
  60% { transform: scale(0.94) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.status-anchor.is-popping { animation: ohtori-btn-pop 550ms ease-out; }

/* インクが放射状に弾け飛ぶ、一回限りの演出。
   JS側で.ink-burst-fx要素を一時的に追加し、アニメーション終了後に削除する。
   ループさせないので常時の負荷はゼロ */
.ink-burst-fx {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 5;
}

.ink-burst-fx .ink-drop {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  background: var(--drop-color, var(--splat-orange));
  transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(0) scale(0.4);
  opacity: 1;
  animation: ohtori-ink-burst 650ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes ohtori-ink-burst {
  0% {
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(0) scale(0.5);
    opacity: 1;
  }
  55% { opacity: 1; }
  100% {
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(var(--dist, -60px)) scale(0.2);
    opacity: 0;
  }
}

/* --- 額縁: 画面中央（main、max-width:1200px）の外側にできる左右の余白を、
   施工事例のスプラ風写真タイルで埋める。パネルの背後に1枚敷くと大部分が
   隠れてしまうため、常に見えている左右の余白側に置く方針にした。
   十分な余白がない画面幅では表示しない（メディアクエリで制御） --- */
.bg-frame {
  position: fixed;
  top: 0;
  bottom: 0;
  /* サイドメニュー(240px)を除いた余白の幅。さらにmainのpadding(20px)ぶん
     内側まで伸ばし、パネルとの間に地の色が見える隙間ができないようにする */
  width: calc((100vw - 240px - 1200px) / 2 + 20px);
  display: none;
  flex-direction: column;
  pointer-events: none;
  z-index: 0;
  background: var(--splat-ink);
}

.bg-frame-left { left: 240px; }
.bg-frame-right { right: 0; }

.bg-frame-tile {
  position: relative;
  flex: 1 1 0;
  background-color: var(--splat-panel-dark);
  background-size: cover;
  background-position: center;
  border-bottom: 3px solid var(--splat-ink);
  overflow: hidden;
  /* 画像自体は鮮やかなまま生成し、CSS側の彩度・明るさだけを落として
     背景として馴染む主張の弱さにする（AI側で直接彩度を落とすと絵が
     ただ薄汚れて見え、スプラトゥーンらしい鮮やかさ自体が失われることを
     確認済みのため。CSSなら画像を作り直さず何度でも微調整できる） */
  filter: saturate(0.4) brightness(0.42);
}

.bg-frame-tile:last-child { border-bottom: none; }

.bg-frame-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, 0.25);
}

/* サイドメニュー(240px)＋本文(1200px)を引いてなお、写真1枚分として意味のある
   幅（180px程度）が左右に残る画面幅でのみ表示する */
@media (min-width: 1800px) {
  .bg-frame.has-images { display: flex; }
}

/* ============================================================
   左サイドメニュー（全画面共通のナビゲーション）
   ボタンには既存の nav-btn / data-view をそのまま使っているため、
   app.js の画面切替まわりは変更していない
   ============================================================ */
/* アプリ画面（ログイン画面以外）は全体を暗い地にする。明るいままだと
   パネルとの間に白い隙間が見えるうえ、ブラウザの自動ダークモードに
   勝手に色を調整されてしまうため、color-schemeも明示する */
body:not(.login-body) {
  padding-left: 240px;
  background: #1a1a1e;
  color-scheme: dark;
}

.sidemenu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  padding: 0 12px 20px;
  overflow-y: auto;
  background: var(--splat-ink);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidemenu-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Rampart One", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 26px;
  color: #fff;
  text-shadow: 3px 3px 0 var(--splat-orange);
  transform: rotate(-2deg);
  padding: 20px 8px 14px 14px;
  letter-spacing: 0.08em;
}

.sidemenu-logo {
  height: 32px;
  width: auto;
}

.sidemenu-group {
  margin: 14px 0 4px;
  padding-left: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}

.sidemenu .nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.1s ease, background 0.1s ease;
}

.sidemenu .nav-btn .mi { font-size: 15px; line-height: 1; }
/* 別サービスへのリンク（議事録）を <a> で置いたときもボタンと同じ見た目にする */
.sidemenu a.nav-btn { text-decoration: none; box-sizing: border-box; cursor: pointer; }
/* 経営者だけの項目（スタッフ管理・開発）は hidden で隠す。上の display: flex が hidden に勝ってしまい、
   一般社員にも見えていた（APIは403で守られていた）ので、hidden のときは必ず消す */
.sidemenu .nav-btn[hidden] { display: none; }

.sidemenu .nav-btn:hover:not(:disabled) {
  background: var(--splat-panel);
  transform: translateX(2px) rotate(-1deg);
}

/* 選択中の項目だけ塗りつぶし＋傾き。トップレベルのナビなので紫を使い、
   画面内のタブ（ライム）と階層を色で区別する */
.sidemenu .nav-btn.active {
  background: var(--splat-purple);
  color: #fff;
  box-shadow: 3px 3px 0 var(--splat-purple-shadow);
  transform: rotate(-1.5deg);
}

.sidemenu .nav-btn.soon {
  color: rgba(255, 255, 255, 0.38);
  cursor: default;
}

.soon-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   スプラ風の暗色地に合わせた、各画面の共通パーツ
   ============================================================ */

/* 画面内の入れ子パネルは、外側のパネルより一段暗くして階層を分ける */
.view .panel {
  background: var(--splat-panel-dark);
  border: none;
  border-radius: 22px 16px 24px 18px / 18px 24px 16px 22px;
  padding: 18px 20px;
}

.view h2 {
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.04em;
}

.view h3 {
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.06em;
  border-left: 5px solid var(--splat-orange);
  padding-left: 10px;
}

.view .form-grid label,
.view .form-inline label { color: rgba(255, 255, 255, 0.72); }

.view p { color: rgba(255, 255, 255, 0.82); }

.view .muted-note,
.view #save-status { color: rgba(255, 255, 255, 0.55); }

.view a { color: var(--splat-cyan); }

.view .link-btn {
  background: none;
  color: var(--splat-lime);
  font-weight: 700;
  padding: 4px 0;
}

/* 入力欄は白い塗り。ツールバーのピル型ほど丸めず、フォーム用に控えめな角丸に */
.view input[type="text"],
.view input[type="email"],
.view input[type="date"],
.view input[type="number"],
.view select,
.view textarea {
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  background: #fdfdfb;
  /* color-scheme: dark を指定しているため、白い入力欄には文字色も
     明示しないと白文字になって読めなくなる。日付欄はさらに、この指定が
     無いとカレンダーアイコンも白地に白抜きでほぼ見えなくなる（クリックはできるが
     見えないので気付けない）ため、明示的に light に戻す */
  color: #1c1c1e;
  color-scheme: light;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.22);
}

.view input:focus,
.view select:focus,
.view textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(5, 200, 200, 0.55), inset 0 2px 5px rgba(0, 0, 0, 0.18);
}

.view input[readonly] { background: #dedede; color: #555; }

/* ツールバー以外のボタンも同じチャンキーなピル型に揃える */
.view button:not(.link-btn):not(.tab-btn):not(.btn-celebrate) {
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  font-weight: 800;
  background: #f0f0ec;
  color: var(--splat-ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.view button:not(.link-btn):not(.tab-btn):not(.btn-celebrate):hover {
  transform: translateY(-2px) rotate(-2deg) scale(1.04);
  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.55);
}

.view button:not(.link-btn):not(.tab-btn):not(.btn-celebrate):active {
  transform: translate(2px, 2px) rotate(0deg) scale(1);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}

.view button.primary:not(.btn-celebrate) {
  background: var(--splat-lime);
  color: var(--splat-ink);
}

/* パネル内の検索ボタンはツールバーと同じターコイズに揃える。
   .link-btnは除外しないと、通常ボタンと同じ塗りで上書きされてしまう
   （実際に見積書パネルの削除リンクで発生したのを見つけて修正） */
.view .form-inline button:not(.primary):not(.btn-celebrate):not(.link-btn) {
  background: var(--splat-cyan);
}

/* 案件詳細のタブ: 選択中はライム（サイドメニューの紫と階層を分ける） */
.view .tabs {
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.view .tab-btn {
  background: var(--splat-panel-soft);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 8px 18px;
  font-weight: 700;
  transition: transform 0.1s ease, background 0.1s ease;
}

.view .tab-btn:hover { transform: translateY(-1px) rotate(-1.5deg); }

.view .tab-btn.active {
  background: var(--splat-lime);
  color: var(--splat-ink);
  font-weight: 800;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  transform: rotate(-1.5deg);
}

.view .tab-panel { border-radius: 22px 16px 24px 18px / 18px 24px 16px 22px; }

.view .customer-result-row {
  border: none;
  border-radius: 10px;
  margin-bottom: 4px;
  background: var(--splat-panel);
  color: #fff;
}

.view .customer-result-row:hover { background: var(--splat-panel-soft); }

.view .survey-item-row { border-bottom: 1px solid var(--splat-line); }

/* 狭い画面ではサイドメニューを縦置きできないため、上部の横スクロール帯にする */
@media (max-width: 1100px) {
  /* body:not(.login-body) と詳細度を揃えないと padding-left が上書きできない */
  body:not(.login-body) { padding-left: 0; }

  .sidemenu {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 12px;
  }

  .sidemenu-brand {
    font-size: 18px;
    padding: 0 10px 0 0;
    white-space: nowrap;
  }

  .sidemenu-logo {
    height: 22px;
  }

  .sidemenu-group { display: none; }

  .sidemenu .nav-btn {
    width: auto;
    white-space: nowrap;
    padding: 7px 12px;
  }

  .sidemenu .nav-btn.soon { display: none; }
}

/* ============================================================
   工事台帳タブ: スタッフが日常使っているExcel版の見た目にまず合わせる
   （他画面のスプラ風デザインはあえて適用しない。定着が確認できたら
   段階的にスプラ風へ切り替える方針。#IDセレクタでスプラ風の.view指定
   より詳細度を上げて上書きしている）
   ============================================================ */
#tab-cost-ledger {
  background: #ffffff;
  border-radius: 4px;
  padding: 6px;
}

#tab-cost-ledger .panel {
  background: #ffffff;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
  padding: 12px 14px;
}

#tab-cost-ledger .panel h3 {
  color: #1c1c1e;
  font-size: 14px;
  border-bottom: 2px solid #2b5f8a;
  padding-bottom: 4px;
  margin-top: 0;
}

#tab-cost-ledger p,
#tab-cost-ledger label,
#tab-cost-ledger span,
#tab-cost-ledger strong {
  color: #1c1c1e;
}

#tab-cost-ledger .data-table {
  border: 1px solid #b7b7b7;
  border-collapse: collapse;
  background: #fff;
  border-spacing: 0;
}

#tab-cost-ledger .data-table th,
#tab-cost-ledger .data-table td {
  border: 1px solid #d0d0d0;
  color: #1c1c1e;
  padding: 1px 3px;
  font-size: 11px;
  line-height: 1.3;
  border-radius: 0;
  background: #fff;
  white-space: nowrap;
}

#tab-cost-ledger .data-table thead th {
  background: #e8eef5;
  color: #1c1c1e;
  font-weight: 700;
  border-radius: 0;
}

#tab-cost-ledger .data-table tbody tr:nth-child(odd) td,
#tab-cost-ledger .data-table tbody tr:nth-child(even) td {
  background: #fff;
}

#tab-cost-ledger .data-table tbody tr:hover td { background: #eaf3fb; }

#tab-cost-ledger input[type="text"],
#tab-cost-ledger input[type="date"],
#tab-cost-ledger input[type="number"],
#tab-cost-ledger input[type="month"],
#tab-cost-ledger select {
  border: 1px solid #a0a0a0;
  border-radius: 2px;
  padding: 1px 3px;
  background: #ffffff;
  color: #1c1c1e;
  color-scheme: light;
  box-shadow: none;
  font-size: 11px;
}

/* 表の中の数値入力欄は、Excelのセルに近い密度にするためさらに詰める */
#tab-cost-ledger .cl-main-table input[type="text"],
#tab-cost-ledger .cl-main-table input[type="number"] {
  padding: 1px 2px;
  height: 20px;
}

/* Excel/工務店クラウドのように、セル自体の罫線だけで区切られた見た目にする
   （入力欄に別の枠が付くと「枠の中に枠」で二重線になり窮屈に見えるため） */
#tab-cost-ledger .cl-main-table td:has(input),
#tab-cost-ledger .cl-main-table td:has(select),
#tab-quote .q-item-table td:has(input),
#tab-quote .q-item-table td:has(select) {
  padding: 0;
}

#tab-cost-ledger .cl-main-table td input,
#tab-cost-ledger .cl-main-table td select,
#tab-quote .q-item-table td input,
#tab-quote .q-item-table td select {
  border: none;
  border-radius: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2px 3px;
}

#tab-cost-ledger .cl-main-table td:has(input):focus-within,
#tab-cost-ledger .cl-main-table td:has(select):focus-within,
#tab-quote .q-item-table td:has(input):focus-within,
#tab-quote .q-item-table td:has(select):focus-within {
  outline: 2px solid #2b5f8a;
  outline-offset: -2px;
}

#tab-cost-ledger .cl-main-table td input:focus,
#tab-cost-ledger .cl-main-table td select:focus,
#tab-quote .q-item-table td input:focus,
#tab-quote .q-item-table td select:focus {
  outline: none;
}

#tab-cost-ledger .cl-main-table input[type="checkbox"] {
  transform: scale(0.85);
  vertical-align: middle;
  margin: 0 1px 0 0;
}

/* 発注金額・追加発注額: 「済」チェックが入っている間、数字の色を変えて完了を示す */
#tab-cost-ledger .cl-main-table input.cl-done {
  color: #1f8a3d;
  font-weight: 700;
  background: #eafaf0;
}

/* 表内のボタン（追加/保存/削除）は行の高さに収まるよう小さめに */
#tab-cost-ledger .cl-main-table button:not(.link-btn) {
  padding: 1px 6px;
  font-size: 11px;
}

#tab-cost-ledger input:focus,
#tab-cost-ledger select:focus {
  outline: 2px solid #2b5f8a;
  box-shadow: none;
}

#tab-cost-ledger button:not(.link-btn) {
  border: 1px solid #8a8a8a;
  border-radius: 3px;
  padding: 5px 12px;
  font-weight: 600;
  background: #f0f0f0;
  color: #1c1c1e;
  box-shadow: none;
}

#tab-cost-ledger button:not(.link-btn):hover {
  background: #e2e2e2;
  transform: none;
  box-shadow: none;
}

#tab-cost-ledger button:not(.link-btn):active {
  background: #d6d6d6;
  transform: none;
  box-shadow: none;
}

#tab-cost-ledger button.primary {
  background: #2b5f8a;
  color: #fff;
  border-color: #2b5f8a;
}

#tab-cost-ledger .link-btn {
  color: #2b5f8a;
  font-weight: 600;
  background: none;
}

/* 列見出しに埋め込む「＋」（追加金額・追加発注額の列を右に増やすボタン） */
/* 表内ボタン用のスタイル（#tab-cost-ledger .cl-main-table button:not(.link-btn)）に
   詳細度で負けて余白が入り、＋が潰れていたため、こちらの詳細度を上げている */
#tab-cost-ledger .cl-main-table button.cl-col-plus {
  border: 1px solid #2b5f8a;
  border-radius: 3px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  line-height: 1;
  padding: 0;
  font-size: 14px;
  font-weight: 800;
  color: #2b5f8a;
  background: #eaf2fa;
  vertical-align: middle;
  margin-left: 3px;
  cursor: pointer;
}

#tab-cost-ledger .cl-main-table button.cl-col-minus {
  border: 1px solid #a33;
  border-radius: 3px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  line-height: 1;
  padding: 0;
  font-size: 14px;
  font-weight: 800;
  color: #a33;
  background: #fbeaea;
  vertical-align: middle;
  margin-left: 2px;
  cursor: pointer;
}

#tab-cost-ledger .cl-main-table button.cl-col-plus:hover {
  background: #2b5f8a;
  color: #fff;
}

#tab-cost-ledger .cl-main-table button.cl-col-minus:hover {
  background: #a33;
  color: #fff;
}

/* 諸経費小計と小計の間は区切りとして太い罫線にする */
#tab-cost-ledger .cl-main-table tr.cl-grand-first td {
  border-top: 3px solid #4a4a4a;
}


/* 工事台帳タブだけは画面いっぱいを使うポップアップ的な全画面表示にする */
body.cl-fullscreen { overflow: hidden; }

body.cl-fullscreen .sidemenu,
body.cl-fullscreen .topbar {
  display: none;
}

body.cl-fullscreen main {
  padding: 0;
  max-width: none;
  margin: 0;
}

body.cl-fullscreen #view-project-detail > button,
body.cl-fullscreen #view-project-detail > h2,
body.cl-fullscreen #view-project-detail > p,
body.cl-fullscreen #new-project-customer-picker,
body.cl-fullscreen .tabs {
  display: none;
}

body.cl-fullscreen #tab-cost-ledger {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #fff;
  overflow: auto;
  padding: 10px;
}

/* ============================================================
   見積書→工事台帳の転記画面
   見積明細を1件=1行のフラットな表で並べ、各行に業者名・工種・原価区分を持たせる。
   この3列はアイが最初から埋めておき、人は違うところだけ直す。
   269行を扱うので、原案のまま(.is-ai)と人が直した(.is-edited)を色で見分けられるようにする。
   ============================================================ */
#cl-transfer-modal .cl-transfer-inner {
  position: fixed;
  inset: 20px;
  z-index: 1000;
  background: #fff;
  border: 1px solid #999;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  font-family: "Meiryo UI", "Yu Gothic UI", sans-serif;
  font-size: 12px;
  color: #222;
}

#cl-transfer-modal h3 {
  margin: 0 0 8px;
  font-size: 15px;
  border-bottom: 2px solid #2b5f8a;
  padding-bottom: 4px;
  color: #222;
}

#cl-transfer-modal .cl-tr-toolbar,
#cl-transfer-modal .cl-tr-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#cl-transfer-modal .cl-tr-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #ddd;
}

#cl-transfer-modal .cl-tr-spacer { flex: 1; }

#cl-transfer-modal .cl-tr-stats {
  font-weight: 700;
  color: #2b5f8a;
}

#cl-transfer-modal .cl-tr-preview {
  font-size: 13px;
}

#cl-transfer-modal .cl-tr-review-count {
  color: #c0392b;
  font-weight: 700;
}

#cl-transfer-modal .cl-tr-allpartners {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #666;
  cursor: pointer;
  user-select: none;
}

/* 表本体 */
#cl-transfer-modal .cl-tr-gridwrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid #c0c0c0;
  margin-top: 8px;
  background: #fff;
}

#cl-transfer-modal .cl-tr-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#cl-transfer-modal .cl-tr-grid th,
#cl-transfer-modal .cl-tr-grid td {
  border: 1px solid #d8d8d8;
  padding: 1px 4px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cl-transfer-modal .cl-tr-grid thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #eef2f6;
  font-weight: 700;
  height: 22px;
}

/* 分類の見出し行。スクロール中も「いまどの分類を見ているか」が分かるよう固定する */
#cl-transfer-modal .cl-tr-cathead th {
  position: sticky;
  top: 22px;
  z-index: 2;
  background: #dde8f2;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  height: 22px;
  cursor: pointer;
}

#cl-transfer-modal .cl-tr-cathead-sub {
  float: right;
  font-weight: 400;
  color: #555;
  font-size: 11px;
}

#cl-transfer-modal .cl-tr-row { height: 22px; }
#cl-transfer-modal .cl-tr-row:hover { background: #f5f9fc; }

#cl-transfer-modal .cl-tr-amount,
#cl-transfer-modal .ta-r { text-align: right; font-variant-numeric: tabular-nums; }

#cl-transfer-modal .cl-tr-memo { color: #777; }
#cl-transfer-modal .cl-tr-flag { text-align: center; }
#cl-transfer-modal .cl-tr-flag input { margin: 0; }

/* 選択中の行（ドラッグ範囲選択） */
#cl-transfer-modal .cl-tr-row.is-selected,
#cl-transfer-modal .cl-tr-row.is-selected:hover { background: #d6e9f8; }

/* 業者が決まらなかった行。見落とすと間違った業者のまま登録されるので目立たせる */
#cl-transfer-modal .cl-tr-row.is-review td:nth-child(5) { background: #fff4e2; }
#cl-transfer-modal .cl-tr-row.is-review .cl-tr-flag {
  border-left: 3px solid #e8a33d;
}

#cl-transfer-modal .cl-tr-row.is-excluded {
  opacity: .45;
  text-decoration: line-through;
}

#cl-transfer-modal .cl-tr-row.is-hidden { display: none; }

/* セル内の入力欄は罫線を消してExcelのセルのように見せる */
#cl-transfer-modal .cl-tr-grid td input[type="text"],
#cl-transfer-modal .cl-tr-grid td select {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 11px;
  font-family: inherit;
  padding: 0 2px;
  height: 18px;
  box-sizing: border-box;
}

#cl-transfer-modal .cl-tr-grid td input[type="text"]:focus,
#cl-transfer-modal .cl-tr-grid td select:focus {
  background: #fff;
  outline: 2px solid #2b5f8a;
  outline-offset: -2px;
}

/* アイの原案のまま＝青灰の細字、人が直した＝黒の太字 */
#cl-transfer-modal .is-ai { color: #6b7a8c; font-weight: 400; }
#cl-transfer-modal .is-edited { color: #1c1c1e; font-weight: 600; }

/* 「この案件の業者を決める」パネル。拮抗していてアイに決められない工種を最初に選んでもらう */
#cl-transfer-modal .cl-tr-decide[hidden] { display: none; }

#cl-transfer-modal .cl-tr-decide {
  margin-top: 6px;
  padding: 8px 10px;
  background: #eef4f9;
  border: 1px solid #2b5f8a;
  border-radius: 3px;
  font-size: 13px;
}

#cl-transfer-modal .cl-tr-decide-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

#cl-transfer-modal .cl-tr-decide-table { border-collapse: collapse; }
#cl-transfer-modal .cl-tr-decide-table th,
#cl-transfer-modal .cl-tr-decide-table td {
  padding: 3px 8px;
  text-align: left;
  vertical-align: middle;
  border: 0;
}
#cl-transfer-modal .cl-tr-decide-table th { font-weight: 700; white-space: nowrap; }
#cl-transfer-modal .cl-tr-decide-sub { white-space: nowrap; color: #555; }
/* モーダル内のselectは黒地の既定スタイルを継ぐので、薄い背景の上では明示的に白地にする */
#cl-transfer-modal .cl-tr-decide-partner {
  min-width: 280px; max-width: 440px; font-size: 13px; padding: 2px 4px; line-height: normal;
  background: #fff; color: #222; border: 1px solid #9ab3c7; border-radius: 2px;
}
#cl-transfer-modal .cl-tr-decide-reason { font-size: 11px; }

#cl-transfer-modal .cl-tr-decide-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

/* 一括変更バー。選択が1件以上のときだけ出る
   （display:flex は hidden 属性に勝ってしまうので明示的に打ち消す） */
#cl-transfer-modal .cl-tr-bulk[hidden] { display: none; }

#cl-transfer-modal .cl-tr-bulk {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding: 6px 8px;
  background: #2b5f8a;
  border-radius: 3px;
  color: #fff;
}

#cl-transfer-modal .cl-tr-bulk label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

#cl-transfer-modal .cl-tr-bulk input[type="text"],
#cl-transfer-modal .cl-tr-bulk select {
  height: 22px;
  font-size: 12px;
  border: 1px solid #fff;
  border-radius: 2px;
  padding: 0 4px;
}

#cl-transfer-modal .cl-tr-bulk input[type="text"] { width: 150px; }
#cl-transfer-modal .cl-tr-bulk select#cl-tr-bulk-partner { min-width: 260px; max-width: 420px; }
#cl-transfer-modal .cl-tr-bulk select#cl-tr-bulk-worktype { min-width: 130px; }

#cl-transfer-modal #cl-tr-bulk-count {
  font-weight: 700;
  white-space: nowrap;
}

#cl-transfer-modal .cl-tr-bulk .link-btn { color: #cfe4f5; }

/* 内訳パネル（登録前に「台帳に何行できるか」を目視確認する） */
#cl-tr-breakdown {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}

#cl-tr-breakdown .cl-tr-breakdown-inner {
  background: #fff;
  border-radius: 4px;
  padding: 14px 18px;
  width: 720px;
  max-width: 92vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  font-family: "Meiryo UI", "Yu Gothic UI", sans-serif;
  font-size: 12px;
}

#cl-tr-breakdown h4 { margin: 0 0 8px; font-size: 14px; }

#cl-tr-breakdown .cl-tr-breakdown-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid #c0c0c0;
  margin-bottom: 10px;
}

#cl-tr-breakdown .cl-tr-grid { width: 100%; border-collapse: collapse; }
#cl-tr-breakdown .cl-tr-grid th,
#cl-tr-breakdown .cl-tr-grid td {
  border: 1px solid #d8d8d8;
  padding: 2px 6px;
  font-size: 11px;
}
#cl-tr-breakdown .cl-tr-grid thead th { background: #eef2f6; position: sticky; top: 0; }
#cl-tr-breakdown .ta-r { text-align: right; font-variant-numeric: tabular-nums; }

#cl-transfer-modal input,
#cl-transfer-modal select,
#cl-transfer-modal button {
  font-family: inherit;
}

#cl-transfer-modal button:not(.link-btn) {
  padding: 4px 12px;
  border: 1px solid #999;
  border-radius: 3px;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 12px;
}

#cl-transfer-modal button.primary {
  background: #2b5f8a;
  color: #fff;
  border-color: #2b5f8a;
  font-weight: 700;
}

#cl-transfer-modal .link-btn { color: #2b5f8a; font-weight: 600; background: none; border: none; cursor: pointer; }
#cl-transfer-modal .cl-tr-bulk button:not(.link-btn) { border-color: #fff; }


/* ============================================================
   発注タブ: 工事台帳と同じ方針で、Excelの「注文書」帳票の見た目に
   近い素朴な罫線ベースの表示にする（スプラ風デザインは適用しない）
   ============================================================ */
#tab-purchase-orders {
  background: #ffffff;
  border-radius: 4px;
  padding: 6px;
}

#tab-purchase-orders .panel {
  background: #ffffff;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
  padding: 12px 14px;
}

#tab-purchase-orders .panel h3 {
  color: #1c1c1e;
  font-size: 14px;
  border-bottom: 2px solid #2b5f8a;
  padding-bottom: 4px;
  margin-top: 0;
}

#tab-purchase-orders p,
#tab-purchase-orders label,
#tab-purchase-orders span,
#tab-purchase-orders h2,
#tab-purchase-orders h3 {
  color: #1c1c1e;
}

#tab-purchase-orders .data-table {
  border: 1px solid #b7b7b7;
  border-collapse: collapse;
  background: #fff;
}

#tab-purchase-orders .data-table th,
#tab-purchase-orders .data-table td {
  border: 1px solid #d0d0d0;
  color: #1c1c1e;
  padding: 4px 8px;
  font-size: 12px;
  background: #fff;
}

#tab-purchase-orders .data-table thead th {
  background: #e8eef5;
  font-weight: 700;
}

#tab-purchase-orders .data-table tbody tr:hover td { background: #eaf3fb; }

#tab-purchase-orders input,
#tab-purchase-orders select {
  border: 1px solid #a0a0a0;
  border-radius: 2px;
  padding: 3px 5px;
  background: #ffffff;
  color: #1c1c1e;
  box-shadow: none;
  font-size: 12px;
}

#tab-purchase-orders button:not(.link-btn) {
  border: 1px solid #8a8a8a;
  border-radius: 3px;
  padding: 5px 12px;
  font-weight: 600;
  background: #f0f0f0;
  color: #1c1c1e;
  box-shadow: none;
}

#tab-purchase-orders button.primary {
  background: #2b5f8a;
  color: #fff;
  border-color: #2b5f8a;
}

#tab-purchase-orders .link-btn {
  color: #2b5f8a;
  font-weight: 600;
  background: none;
}

/* 発注書の帳票本体（画面表示・印刷共通） */
#po-print-area {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  color: #1c1c1e;
}

.po-doc-section h2 { font-size: 20px; margin: 10px 0 16px; }
.po-doc-section h3 { border-bottom: 1px solid #999; padding-bottom: 2px; margin-top: 18px; }

.po-info-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.po-info-table td { padding: 4px 6px; border-bottom: 1px solid #eee; font-size: 13px; }
.po-info-table td:first-child { width: 140px; font-weight: 700; white-space: nowrap; }

.po-item-table th, .po-item-table td { font-size: 12px; }

/* 印刷時は発注書本体だけを表示する */
@media print {
  body * { visibility: hidden; }
  #po-print-area, #po-print-area * { visibility: visible; }
  #po-print-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: none;
    padding: 0;
  }
}

/* ============================================================
   見積書タブ: 工事台帳と同じ方針で、開いた見積書は画面いっぱいの
   専用画面（工務店クラウドの編集画面に近い、左に分類ツリー・右に明細）
   で編集する。スプラ風デザインは適用しない
   ============================================================ */
#tab-quote {
  background: #ffffff;
  border-radius: 4px;
  padding: 6px;
}

#tab-quote .panel {
  background: #ffffff;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
  padding: 12px 14px;
}

#tab-quote .panel h3 {
  color: #1c1c1e;
  font-size: 14px;
  border-bottom: 2px solid #2b5f8a;
  padding-bottom: 4px;
  margin-top: 0;
}

#tab-quote p,
#tab-quote label,
#tab-quote span {
  color: #1c1c1e;
}

#tab-quote .data-table {
  border: 1px solid #b7b7b7;
  border-collapse: collapse;
  background: #fff;
  width: 100%;
}

#tab-quote .data-table th,
#tab-quote .data-table td {
  border: 1px solid #d0d0d0;
  color: #1c1c1e;
  padding: 2px 5px;
  font-size: 11px;
  background: #fff;
}

#tab-quote .data-table thead th {
  background: #e8eef5;
  font-weight: 700;
}

#tab-quote .data-table tbody tr:hover td { background: #eaf3fb; }

#tab-quote input,
#tab-quote select {
  border: 1px solid #a0a0a0;
  border-radius: 2px;
  padding: 2px 4px;
  background: #ffffff;
  color: #1c1c1e;
  box-shadow: none;
  font-size: 11px;
}

#tab-quote button:not(.link-btn) {
  border: 1px solid #8a8a8a;
  border-radius: 3px;
  padding: 5px 12px;
  font-weight: 600;
  background: #f0f0f0;
  color: #1c1c1e;
  box-shadow: none;
}

#tab-quote button.primary {
  background: #2b5f8a;
  color: #fff;
  border-color: #2b5f8a;
}

#tab-quote .link-btn {
  color: #2b5f8a;
  font-weight: 600;
  background: none;
}

/* ヘッダーは2行程度にまとめ、明細表の表示領域を広くとる */
.q-header-panel { padding: 6px 10px !important; }
.q-header-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  padding: 3px 0;
}
.q-header-line input, .q-header-line select { font-size: 12px; padding: 2px 4px; }
.q-header-line b { color: #1c1c1e; }
.q-header-spacer { flex: 1; }
.q-header-extra { margin-top: 4px; border-top: 1px dashed #ccc; padding-top: 6px; }
.q-header-extra.hidden { display: none; }

.q-body {
  display: flex;
  gap: 10px;
  height: calc(100vh - 200px);
  min-height: 300px;
}

.q-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
  flex: none;
  overflow-y: auto;
  border: 1px solid #c0c0c0;
  background: #fafafa;
}
.q-tree-node {
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
}
.q-tree-node.q-tree-child { padding-left: 20px; }
.q-tree-node:hover { background: #eaf3fb; }
.q-tree-node.q-tree-active { background: #2b5f8a; color: #fff; font-weight: 700; }

.q-content {
  flex: 1;
  overflow: auto;
}

.q-item-table th, .q-item-table td { white-space: nowrap; }
.q-item-table tfoot td { background: #f5f5ec; border-top: 2px solid #999; }

/* 明細行の右クリックメニュー（行の挿入・削除・コピー） */
#q-context-menu {
  position: fixed;
  z-index: 2000;
  background: #fff;
  border: 1px solid #999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  padding: 4px 0;
  min-width: 150px;
}
#q-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 14px;
  border: none;
  background: none;
  font-size: 12px;
  color: #1c1c1e;
  cursor: pointer;
}
#q-context-menu button:hover { background: #eaf3fb; }

/* 見積書タブだけは画面いっぱいを使うポップアップ的な全画面表示にする */
/* --- 敷地調査報告書タブ（工事台帳と同じく全画面・白地の事務用レイアウト） --- */
body.sr-fullscreen { overflow: hidden; }

body.sr-fullscreen .sidemenu,
body.sr-fullscreen .topbar {
  display: none;
}

body.sr-fullscreen main {
  padding: 0;
  max-width: none;
  margin: 0;
}

body.sr-fullscreen #view-project-detail > button,
body.sr-fullscreen #view-project-detail > h2,
body.sr-fullscreen #view-project-detail > p,
body.sr-fullscreen #new-project-customer-picker,
body.sr-fullscreen .tabs {
  display: none;
}

body.sr-fullscreen #tab-site-report {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #fff;
  overflow: auto;
  padding: 10px 16px 40px;
}

#tab-site-report { color: #1c1c1e; }

#tab-site-report .panel,
#tab-site-report details.sr-section {
  background: #ffffff;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

#tab-site-report h3, #tab-site-report h4 { margin: 0 0 8px; }
#tab-site-report summary { cursor: pointer; font-weight: 700; font-size: 15px; padding: 2px 0 8px; }
#tab-site-report .sr-group-title { font-weight: 700; font-size: 13px; margin: 10px 0 4px; color: #333; border-bottom: 1px solid #ddd; }

#tab-site-report .sr-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
#tab-site-report .sr-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#tab-site-report .sr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 16px;
}
#tab-site-report .sr-grid-1 { grid-template-columns: 1fr; }
#tab-site-report .sr-grid label { display: flex; flex-direction: column; font-size: 12px; color: #444; gap: 2px; }
#tab-site-report .sr-grid label.sr-check { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: #1c1c1e; }
#tab-site-report .sr-unit { font-size: 11px; color: #666; margin-left: 4px; }

#tab-site-report input[type="text"],
#tab-site-report input[type="date"],
#tab-site-report input[type="number"],
#tab-site-report select,
#tab-site-report textarea {
  border: 1px solid #a0a0a0;
  border-radius: 2px;
  padding: 3px 5px;
  background: #ffffff;
  color: #1c1c1e;
  color-scheme: light;
  box-shadow: none;
  font-size: 13px;
}

.sr-auto-badge {
  display: inline-block; background: #e6f4ea; color: #1e7e34; font-size: 11px;
  padding: 0 6px; border-radius: 8px; margin-left: 4px; vertical-align: middle;
}
.sr-req-badge { display: inline-block; background: #fff3cd; color: #8a6d00; font-size: 11px; padding: 0 6px; border-radius: 8px; margin-left: 4px; }

#sr-map { height: 320px; border: 1px solid #c0c0c0; margin: 8px 0; }
#sr-autofill-result { font-size: 13px; margin-top: 8px; }
#sr-autofill-result ul { margin: 4px 0 8px 18px; }
.sr-links { margin: 0 0 8px 18px; font-size: 13px; }

#tab-site-report .sr-scroll { overflow-x: auto; }
.sr-sides-table { border-collapse: collapse; width: 100%; font-size: 12px; margin-bottom: 8px; }
.sr-sides-table th, .sr-sides-table td { border: 1px solid #c0c0c0; padding: 2px 4px; vertical-align: middle; }
.sr-sides-table th { background: #f3f3f3; white-space: nowrap; }
.sr-sides-table td input[type="text"], .sr-sides-table td input[type="number"], .sr-sides-table td select { width: 100%; box-sizing: border-box; }

#tab-site-report .sr-list-table { font-size: 12px; margin-bottom: 8px; }
#tab-site-report .sr-list-table th, #tab-site-report .sr-list-table td { color: #1c1c1e; }
#tab-site-report .sr-add-row { flex-wrap: wrap; gap: 6px; }
.sr-attachments { margin: 0 0 8px 18px; font-size: 13px; }

@media (max-width: 900px) {
  #tab-site-report .sr-top { grid-template-columns: 1fr; }
}

body.q-fullscreen { overflow: hidden; }

body.q-fullscreen .sidemenu,
body.q-fullscreen .topbar {
  display: none;
}

body.q-fullscreen main {
  padding: 0;
  max-width: none;
  margin: 0;
}

body.q-fullscreen #view-project-detail > button,
body.q-fullscreen #view-project-detail > h2,
body.q-fullscreen #view-project-detail > p,
body.q-fullscreen #new-project-customer-picker,
body.q-fullscreen .tabs {
  display: none;
}

body.q-fullscreen #tab-quote {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #fff;
  overflow: auto;
  padding: 10px;
}

/* 見積書の印刷（御見積書・内訳明細書） */
#quote-print-area {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  color: #1c1c1e;
  display: none;
}

.q-print-cover { padding: 20px; }
.q-print-topline { display: flex; justify-content: space-between; font-size: 13px; }
.q-print-customer { font-size: 16px; margin: 16px 0 4px; text-decoration: underline; }
.q-print-title { text-align: center; font-size: 26px; letter-spacing: 6px; margin: 20px 0; }
.q-print-total-table { width: 100%; margin: 16px 0; border-collapse: collapse; }
.q-print-total-label { font-size: 15px; width: 200px; }
.q-print-total-amount { font-size: 26px; font-weight: 700; }
.q-print-total-sub { font-size: 12px; color: #333; padding-top: 4px; }
.q-print-worktitle { border-bottom: 1px solid #333; padding-bottom: 6px; margin: 16px 0; font-size: 14px; }
.q-print-info-grid { display: flex; justify-content: space-between; margin-top: 16px; }
.q-print-info-left p, .q-print-info-right p { font-size: 12px; margin: 3px 0; }
.q-print-company-name { font-size: 16px; font-weight: 700; margin-bottom: 6px !important; }

.q-print-page { padding: 20px; page-break-before: always; break-before: page; }
.q-print-page-title { text-align: center; font-size: 18px; letter-spacing: 4px; margin-bottom: 12px; }
.q-print-item-table { width: 100%; border-collapse: collapse; }
.q-print-item-table th, .q-print-item-table td {
  border: 1px solid #333;
  padding: 3px 6px;
  font-size: 11px;
}
.q-print-item-table thead th { background: #eee; }

@media print {
  @page { size: A4 landscape; margin: 12mm; }

  body * { visibility: hidden; }
  #quote-print-area, #quote-print-area * { visibility: visible; }

  /* 見積書タブは全画面表示中position:fixedになっているため、そのままだと
     印刷時にページ区切りが機能しない。印刷時だけ通常の配置に戻す */
  body.q-fullscreen #tab-quote {
    position: static;
    overflow: visible;
    inset: auto;
    padding: 0;
  }

  #quote-print-area {
    display: block;
    position: static;
    width: 100%;
  }

  .q-print-cover { page-break-after: always; break-after: page; }
}

/* ============================================================
   取引先マスタ: 担当工種（工事台帳の語彙）をチップで選ぶ
   ============================================================ */
.pf-worktypes { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.pf-worktypes-label { color: var(--muted); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
/* 取引先画面はスプラ風の黒テーマ。未選択は暗いグレーの玉に白文字、選択中はオレンジ。
   `.view .form-grid label` の文字色指定より強い詳細度にしておかないと文字が消える */
.view .form-grid .pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--splat-line);
  border-radius: 999px;
  background: var(--splat-panel-soft);
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  flex-direction: row;
}
.view .form-grid .pf-chip input { margin: 0; accent-color: var(--splat-orange); }
.view .form-grid .pf-chip:has(input:checked) {
  background: var(--splat-orange);
  border-color: var(--splat-orange);
  color: #fff;
  font-weight: 700;
}
.pf-worktypes input[type="text"] { font-size: 12px; }

/* お客さん詳細: 顧客区分のタグ（グループごとのチップ）。取引先の担当工種のチップと同じ見た目 */
.tag-field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.view .tag-field-label { color: rgba(255, 255, 255, 0.72); }
.tag-groups { display: flex; flex-direction: column; gap: 6px; }
.tag-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.view .tag-group-label { min-width: 7.5em; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.view .tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--splat-line);
  border-radius: 999px;
  background: var(--splat-panel-soft);
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.view .tag-chip.on {
  background: var(--splat-orange);
  border-color: var(--splat-orange);
  font-weight: 700;
}
.view .tag-chip:focus-visible { outline: 2px solid var(--splat-lime); outline-offset: 1px; }
.tags-cell { font-size: 12px; }

/* お客さん詳細の「つながり」と、案件詳細のお客様欄のつながり */
.relation-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.relation-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.view .relation-kind {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--splat-panel-soft);
  border: 1px solid var(--splat-line);
  font-size: 11px;
  color: #fff;
}
.relation-form { flex-wrap: wrap; }
.relation-form select { max-width: 22em; }
.project-relation { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-size: 13px; }

/* 案件詳細: 定期アフター対象のチェック行（form-grid の label は縦積みなので横並びに戻す） */
.p-check-line { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; }
.p-check-line input { margin: 0; }

/* ===== 協力業者のログインアカウント発行（取引先詳細） ===== */
/* 業者会で手渡す紙をこの画面からそのまま印刷する。初期パスワードは再表示できないため */

.pa-card {
  margin-top: 16px;
  border: 2px solid #1b4a72;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.pa-card-warning { margin: 0 0 12px; color: #b3261e; }

.pa-print-area {
  border: 1px solid #dfe4ea;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
}

.pa-print-area h4 { margin: 0 0 12px; font-size: 16px; }

.pa-print-area dl {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 6px 12px;
  margin: 0 0 12px;
}

.pa-print-area dt { color: #63707d; margin: 0; }
.pa-print-area dd { margin: 0; }

/* IDとパスワードは読み間違いが致命的なので、等幅で大きく出す */
.pa-cred {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pa-card-hint { font-size: 13px; color: #63707d; margin: 0; }

@media print {
  /* 印刷時はこの案内カードだけを残す。画面の他の部分（顧客情報を含む）は出さない */
  body * { visibility: hidden; }
  .pa-print-area, .pa-print-area * { visibility: visible; }
  .pa-print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: none;
  }
}

/* 取引先マスタに未紐付けの発注先の警告。業者のスマホに発注が届かない状態を社員に知らせる */
.po-warning {
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid #e0a800;
  border-left: 4px solid #e0a800;
  border-radius: 4px;
  background: #fffbe6;
  font-size: 14px;
}

/* ===== 業者の受諾（発注書画面） ===== */
/* 紙の請書の代わりではなく意思確認の記録。文言も「請書を受領した」と読めないようにしてある */

.po-accepted { color: #1c6b3f; font-weight: 700; }
.po-awaiting { color: #8a6d00; }

.po-accepted-line { margin: 0 0 8px; }

.po-acceptance-history {
  margin: 10px 0 8px;
  padding-left: 1.2em;
  font-size: 13px;
  color: #63707d;
}

.po-acceptance-history li { margin-bottom: 2px; }

/* ===== 写真台帳（現場のスマホから入った内容を事務所でも見る） ===== */

.survey-na-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef1f4;
  color: #63707d;
  font-size: 12px;
}

.survey-item-memo {
  margin-top: 2px;
  font-size: 13px;
  color: #3d4a57;
  white-space: pre-wrap;
}

.survey-summary {
  margin: 10px 0;
  padding: 10px 14px;
  border-left: 4px solid #2f5d3a;
  background: #f2f7f3;
  border-radius: 4px;
}

.survey-summary p { margin: 4px 0 0; white-space: pre-wrap; }

/* 写真台帳の行は 1fr 120px auto の3カラム。狭い画面では項目名が潰れるので縦に積む。
   現場用の画面は /m に別で用意してあるが、事務所のノートPCを現地で開く場面もある */
@media (max-width: 640px) {
  .survey-item-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* --- タスク管理（Trello/Asana風のカンバンボード。ドラッグ&ドロップは無し、列移動はボタン） --- */

.task-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: flex-start;
}

.task-column {
  flex: 0 0 280px;
  background: #ebecf0;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.task-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  padding: 4px 6px 8px;
  color: #44546f;
}

.task-column-count {
  background: #d6d9e0;
  color: #44546f;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 400;
}

.task-column-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 40px;
}

.task-card {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(9, 30, 66, .25);
  padding: 8px 10px;
}

.task-card-top {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.task-card-title {
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  white-space: pre-wrap;
}
.task-card-title:hover { text-decoration: underline; }

.task-card-project {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.task-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.task-card-actions .link-btn { font-size: 12px; padding: 2px 0; margin-right: 8px; }

.task-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: #fff;
  background: #6b7280;
}
.task-label[data-color="red"] { background: #c9372c; }
.task-label[data-color="orange"] { background: #e07a1f; }
.task-label[data-color="yellow"] { background: #cf9f02; color: #33261a; }
.task-label[data-color="green"] { background: #2f8a4a; }
.task-label[data-color="blue"] { background: var(--accent); }
.task-label[data-color="purple"] { background: #6b3fa0; }
.task-label[data-color="gray"] { background: #6b7280; }

.task-due {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: #eef1f4;
  color: #44546f;
}
.task-due-today { background: #fde9c8; color: #7a4e00; }
.task-due-overdue { background: #fbdcd9; color: #a3291d; }

.task-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.task-avatar-empty { background: #c1c7d0; color: #44546f; }

.task-add-card {
  margin-top: 4px;
  text-align: left;
  background: none;
  border: none;
  color: #44546f;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}
.task-add-card:hover { background: #d6d9e0; }

#task-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}

#task-modal .task-modal-inner {
  background: #fff;
  border-radius: 6px;
  padding: 16px 20px;
  width: 480px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#task-modal label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  flex: 1;
}

#task-modal .form-inline { margin-top: 0; align-items: stretch; }

#task-modal .task-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
#task-modal .task-modal-actions .spacer { flex: 1; }

/* --- 議事録からのタスク下書き（会議ごとのパネル、人が確認して登録） --- */

.nav-badge,
.task-draft-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: #c9372c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.nav-badge[hidden],
.task-draft-count[hidden] { display: none; }

.task-drafts-group {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(9, 30, 66, .25);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.task-drafts-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.task-drafts-title { font-weight: 700; color: #172b4d; }
.task-drafts-date { margin-left: 8px; font-weight: 400; font-size: 12px; color: var(--muted); }
.task-drafts-where { font-size: 12px; color: var(--muted); margin-top: 2px; }

.task-drafts-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.task-drafts-approve-all {
  background: #eef1f5;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.task-drafts-approve-all:hover { background: #d6d9e0; }

.task-draft-row {
  border-top: 1px solid #eef1f4;
  padding: 8px 0;
}

.task-draft-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.task-draft-main .task-draft-title { flex: 1 1 260px; min-width: 200px; }
.task-draft-main .task-draft-assignee { flex: 0 1 150px; }
.task-draft-main .task-draft-due { flex: 0 0 auto; }
.task-draft-main .task-draft-approve { white-space: nowrap; }

.task-draft-kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: #eef1f4;
  color: #44546f;
  white-space: nowrap;
}
.task-draft-kind-calendar { background: #e3ecfb; color: #1f4b8f; }

.task-draft-hint { font-size: 12px; color: var(--muted); margin-top: 4px; padding-left: 4px; }

/* --- 案件ピッカー（タスク編集モーダル・下書き行から案件を検索して選ぶ） --- */

.task-project-current { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.task-project-current .link-btn { font-size: 12px; padding: 0; }

.task-project-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-project-picker {
  background: #fff;
  border-radius: 6px;
  padding: 16px 20px;
  width: 560px;
  max-width: 92vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.task-project-picker .form-inline { margin-top: 0; }
.task-project-picker h3 { margin: 0; color: var(--text); }
/* 白いパネルの上ではテーマ側のボタン色（白文字）が消えるので色を明示する */
.task-project-picker #tpp-search { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 6px 14px; cursor: pointer; }
.task-project-picker #tpp-search:hover { filter: brightness(1.1); }
.task-project-picker-results { max-height: 45vh; overflow-y: auto; }
.task-project-picker .customer-result-row { color: var(--text); background: #fff; border: 1px solid var(--border); border-top: none; border-radius: 0; margin: 0; }
.task-project-picker .customer-result-row:first-child { border-top: 1px solid var(--border); }
.task-project-picker .customer-result-row:hover { background: #f0f6fb; }
.task-project-picker .customer-result-row.task-project-picker-current { font-weight: 700; }
.task-project-picker .task-modal-actions { display: flex; align-items: center; gap: 10px; }
.task-project-picker .task-modal-actions .spacer { flex: 1; }

/* Googleカレンダー連携（タスク画面ツールバー右端・カード・モーダル） */
#view-tasks .toolbar .spacer { flex: 1; }
.google-cal-box { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.google-cal-box .primary { padding: 4px 12px; }
.task-card-gcal { margin-left: 4px; font-size: 11px; text-decoration: none; }
.task-modal-gcal { font-size: 13px; }
.task-draft-main .task-draft-time { flex: 0 0 auto; }

/* 一覧の行の未完了タスク数チップ */
.task-count-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: #c9372c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.task-count-chip:hover { background: #a3291d; }

/* --- 領収書一覧（receipts.js） --- */
.receipt-table .receipt-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  background: #e9edf1;
  display: block;
}
.receipt-table input[type="text"], .receipt-table input[type="date"], .receipt-table input[type="number"] {
  width: 100%;
  min-width: 90px;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  padding: 4px 6px;
}
.receipt-table .rc-amount { width: 110px; text-align: right; }
.receipt-table .nowrap { white-space: nowrap; }
.receipt-table tbody tr:hover { cursor: default; }
.receipt-table .receipt-row-failed td { background: #fff7e6; }
.receipt-warn { color: #7a5200; font-size: 13px; }
.receipt-fail-reason { font-size: 11px; white-space: normal; max-width: 220px; line-height: 1.4; opacity: 0.85; }
/* 撮る・選ぶ・ドラッグで送る（PC画面。スマホでこの画面を開いた時もカメラが起動する） */
.receipt-upload { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.receipt-upload-opts { flex-wrap: wrap; gap: 10px; }
.receipt-upload-opts #receipt-up-memo { flex: 1; min-width: 220px; }
.receipt-drop { border: 2px dashed var(--splat-line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.receipt-drop.over { border-color: var(--splat-lime); }
.receipt-drop p { margin: 0; font-size: 13px; }
.receipt-up-btn { display: inline-block; padding: 8px 14px; border: 2px solid var(--splat-line); border-radius: 999px; font-weight: 700; cursor: pointer; }
.receipt-up-btn:hover { border-color: var(--splat-lime); }
.receipt-up-message { font-size: 13px; white-space: pre-line; }
.receipt-up-message:empty { display: none; }

/* --- スタッフ管理のログイン欄（staff_admin.js） --- */
.sa-acct { min-width: 210px; }
.sa-acct-id { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 13px; }
.sa-acct-on { color: #1c6b3f; }
.sa-acct-off { color: #b3261e; }
.sa-acct .link-btn { display: inline-block; margin-right: 8px; }

/* 退職済みは普段の名簿から外して折りたたみに入れる。開いた時も現役と見分けが付くよう淡くする */
#staff-retired-toggle-wrap { margin: 12px 0 0; }
#staff-retired-block { margin-top: 12px; border-top: 1px solid #dfe3e8; padding-top: 12px; }
.sa-retired-title { font-size: 15px; margin: 0 0 4px; color: #63707d; }
#staff-retired-block .data-table tbody td { color: #63707d; }

/* ============================================================
   工程表（schedule.js）。現場Plusの工程表を模倣した日単位のガント。
   左4列を sticky で固定し、バーは開始日のセルから右へはみ出させる。
   ============================================================ */
body.sc-fullscreen { overflow: hidden; }
body.sc-fullscreen .sidemenu,
body.sc-fullscreen .topbar { display: none; }
body.sc-fullscreen main { padding: 0; max-width: none; margin: 0; }
body.sc-fullscreen #view-project-detail > button,
body.sc-fullscreen #view-project-detail > h2,
body.sc-fullscreen #view-project-detail > p,
body.sc-fullscreen #new-project-customer-picker,
body.sc-fullscreen .tabs { display: none; }
body.sc-fullscreen #tab-schedule {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  box-sizing: border-box;
}
#tab-schedule.hidden { display: none; }

.sc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; }
.sc-toolbar #sc-title { font-size: 15px; }
.sc-menu-wrap { position: relative; }
.sc-menu {
  position: absolute; top: 100%; left: 0; z-index: 650;
  background: #fff; border: 1px solid #c9d1d9; box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  display: flex; flex-direction: column; min-width: 180px;
}
.sc-menu.hidden { display: none; }
.sc-menu button { text-align: left; border: 0; background: none; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.sc-menu button:hover { background: #f0f3f5; }

.sc-scroll { flex: 1; min-height: 0; overflow: auto; border: 1px solid #c9d1d9; position: relative; }
.sc-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; }
.sc-table th, .sc-table td {
  border-right: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2;
  padding: 0; height: 26px; box-sizing: border-box; white-space: nowrap; position: relative;
}
.sc-table thead th { position: sticky; top: 0; z-index: 3; background: #f4f6f8; font-weight: normal; text-align: center; height: 22px; }
.sc-table thead tr.sc-h-day th { top: 22px; }
.sc-table thead tr.sc-h-dow th { top: 44px; font-size: 11px; }
.sc-table thead th.sc-month { text-align: left; padding-left: 4px; border-left: 1px solid #9aa4ae; }
.sc-table thead th.sc-left { z-index: 5; text-align: center; }

.sc-table .sc-left { position: sticky; background: #fff; z-index: 2; }
.sc-table .sc-l1 { left: 0; }
.sc-table .sc-l2 { left: 230px; }
.sc-table .sc-l3 { left: 322px; }
.sc-table .sc-l4 { left: 374px; border-right: 2px solid #9aa4ae; }
.sc-table td.sc-left { text-align: left; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }
.sc-table td.sc-period, .sc-table td.sc-days { font-size: 11px; color: #444; }
.sc-table td.sc-days { text-align: right; }
.sc-table td.sc-staff { font-size: 11px; color: #555; }

.sc-table thead th.sc-off { color: #c62828; }
.sc-table thead th.sc-sat { color: #1565c0; }
.sc-table tbody td.sc-off, .sc-table thead th.sc-off { background: #fdeeee; }
.sc-table tbody td.sc-ms, .sc-table thead th.sc-ms { background: #f9d7d7; }
.sc-table tbody td.sc-today, .sc-table thead th.sc-today { background: #cdefcd; }
.sc-table td.sc-month-start, .sc-table th.sc-month-start { border-left: 1px solid #9aa4ae; }

tr.sc-group td { background: #e9ecef; }
tr.sc-group td.sc-left { background: #e9ecef; font-weight: bold; }
tr.sc-group td.sc-off, tr.sc-group td.sc-ms, tr.sc-group td.sc-today { background: #dfe3e7; }
tr.sc-site td.sc-left { background: #f8f9fa; color: #555; }
.sc-child .sc-name-text { padding-left: 14px; }
/* 行の高さを26pxに保つため、セル内のボタンは行内の高さに収める */
.sc-table td.sc-left { line-height: 25px; }
/* ✎ と ▼ は <span> にしてアプリ共通のボタン装飾を受けないようにしている */
.sc-toggle, .sc-edit { display: inline-block; line-height: 25px; vertical-align: top; cursor: pointer; user-select: none; }
.sc-toggle { padding: 0 4px 0 0; font-size: 10px; }
.sc-edit { opacity: .3; float: right; padding: 0 2px; font-size: 13px; }
tr.sc-row:hover .sc-edit { opacity: 1; }
tr.sc-selected td.sc-left { background: #e8e4ff; }
tr.sc-selected td:not(.sc-left) { box-shadow: inset 0 0 0 100px rgba(120, 100, 255, .08); }

.sc-bar {
  position: absolute; left: 1px; top: 5px; height: 16px; z-index: 1; box-sizing: border-box;
  background: #c8ccd0; border: 1px solid #8d969e; border-radius: 2px; cursor: pointer;
}
.sc-bar:hover { filter: brightness(.92); }
tr.sc-done .sc-bar { border: 2px solid #2e7d32; }
.sc-check {
  position: absolute; right: -7px; top: -9px; width: 14px; height: 14px; border-radius: 50%;
  background: #2e7d32; color: #fff; font-size: 10px; line-height: 14px; text-align: center;
}
.sc-label { position: absolute; top: 5px; line-height: 16px; padding-left: 4px; pointer-events: none; z-index: 1; color: #333; }
.sc-label small { color: #777; }
.sc-ms-mark {
  position: absolute; left: 0; top: 2px; width: var(--sc-w); text-align: center; z-index: 1;
  color: #d32f2f; font-size: 18px; line-height: 20px; cursor: pointer;
}
.sc-gbar { position: absolute; left: 1px; top: 10px; height: 6px; background: #8d969e; z-index: 1; }
.sc-site-label {
  position: absolute; left: 0; top: 4px; z-index: 1; white-space: nowrap;
  background: #d32f2f; color: #fff; font-size: 11px; padding: 1px 4px; border-radius: 3px;
}

/* 色（バーとポップアップの見本で共用） */
.sc-c-red { background: #ef5350 !important; border-color: #b71c1c !important; }
.sc-c-orange { background: #ffa726 !important; border-color: #e65100 !important; }
.sc-c-yellow { background: #ffee58 !important; border-color: #f9a825 !important; }
.sc-c-green { background: #66bb6a !important; border-color: #2e7d32 !important; }
.sc-c-blue { background: #42a5f5 !important; border-color: #1565c0 !important; }
.sc-c-purple { background: #ab47bc !important; border-color: #6a1b9a !important; }
.sc-c-brown { background: #a1887f !important; border-color: #4e342e !important; }

/* 編集ポップアップ（現場Plusの黄色い吹き出しに寄せる） */
.sc-popup {
  position: fixed; z-index: 700; width: 400px; box-sizing: border-box;
  background: #fffbe6; border: 1px solid #d4b400; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22); padding: 10px 12px; font-size: 13px;
}
.sc-popup.hidden { display: none; }
.sc-popup label { display: block; margin: 6px 0 2px; }
.sc-popup input[type=text], .sc-popup select, .sc-popup input[type=date], .sc-popup input[type=number] { width: 100%; box-sizing: border-box; }
.sc-pop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sc-pop-row { display: flex; gap: 8px; }
.sc-pop-row label { flex: 1; min-width: 0; }
.sc-pop-row .sc-f-days-wrap { flex: 0 0 76px; }
.sc-pop-colors { margin: 6px 0; }
.sc-swatches { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 6px; }
.sc-swatch { width: 20px; height: 20px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; background: #c8ccd0; padding: 0; }
.sc-swatch.sc-swatch-on { border-color: #333 !important; box-shadow: 0 0 0 1px #fff inset; }
.sc-staff-list { display: flex; flex-wrap: wrap; gap: 2px 10px; max-height: 84px; overflow: auto; border: 1px solid #e0d9a8; background: #fff; padding: 4px 6px; }
.sc-staff-check { display: inline-flex; align-items: center; gap: 3px; margin: 0; font-size: 12px; }
.sc-check-label { display: flex; align-items: center; gap: 4px; }
.sc-pop-actions { margin-top: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sc-pop-ops { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; }
.sc-danger { color: #b3261e; }

/* モーダル（一括追加・雛形） */
#sc-modal { position: fixed; inset: 0; z-index: 800; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; }
#sc-modal.hidden { display: none; }
.sc-modal-inner { background: #fff; padding: 16px 20px; border-radius: 8px; width: 480px; max-width: 95vw; box-sizing: border-box; font-size: 13px; }
.sc-modal-inner h3 { margin: 0 0 8px; }
.sc-modal-inner label { display: block; margin: 8px 0 2px; }
.sc-modal-inner select, .sc-modal-inner input[type=date], .sc-modal-inner textarea { width: 100%; box-sizing: border-box; }
.sc-modal-actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; }

/* 工程管理メニュー（チェック2つ） */
.sc-menu-checks { padding: 8px 12px; gap: 6px; min-width: 260px; }
.sc-menu-checks label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.sc-menu-checks .muted-note { margin: 2px 0 0; font-size: 11px; white-space: normal; }

/* 工程担当者の割り当て（①工程→②担当者→③適用） */
.sc-modal-inner.sc-modal-wide { width: 860px; max-height: 92vh; overflow: auto; }
.sc-asg-cols { display: flex; gap: 14px; }
.sc-asg-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-asg-step { font-weight: bold; margin: 8px 0 2px; }
.sc-asg-col input[type=search] { width: 100%; box-sizing: border-box; }
.sc-asg-list { height: 240px; overflow: auto; border: 1px solid #c9d1d9; padding: 4px 6px; background: #fff; }
.sc-modal-inner .sc-asg-list label { margin: 0; }
.sc-asg-group { display: flex; align-items: center; gap: 4px; font-weight: bold; background: #eef1f4; padding: 2px 4px; margin-top: 4px !important; }
.sc-asg-task, .sc-asg-none { display: flex; align-items: center; gap: 4px; padding: 1px 4px 1px 14px; font-size: 12px; }
.sc-asg-none { padding-left: 4px; font-weight: bold; }
.sc-asg-sub { font-size: 11px; color: #57606a; margin: 6px 0 2px; border-bottom: 1px solid #e1e4e8; }
.sc-asg-preview { border: 1px solid #c9d1d9; padding: 6px; max-height: 200px; overflow: auto; background: #fafbfc; }
.sc-asg-scale { text-align: right; font-size: 11px; }
.sc-asg-line { display: flex; align-items: center; gap: 6px; font-size: 12px; height: 18px; }
.sc-asg-label { width: 220px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-asg-track { position: relative; flex: 1; height: 10px; background: #fff; border: 1px solid #eaeef2; }
.sc-asg-bar { position: absolute; top: 0; bottom: 0; background: #8c959f; border-radius: 2px; }
.sc-asg-mine .sc-asg-bar { background: #6f42c1; }
.sc-asg-mine .sc-asg-label { font-weight: bold; }
.sc-asg-ms { background: #d1242f !important; }
.sc-asg-dates { width: 90px; flex: none; font-size: 11px; }
.sc-asg-sep { border-top: 1px dashed #c9d1d9; margin: 4px 0; }

/* ============================================================
   縦横断工程表（schedule_cross.js）。表そのものは sc-table/sc-bar 等を
   案件詳細の工程表タブ（schedule.js）と共有し、ここでは画面固有の
   ツールバー・絞り込みパネル・行の見た目だけを足す。
   ============================================================ */
#view-schedule-cross:not(.hidden) { display: flex; flex-direction: column; height: calc(100vh - 140px); }
.scx-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; position: relative; }
.scx-view-toggle { display: inline-flex; border: 1px solid #c9d1d9; border-radius: 4px; overflow: hidden; }
.scx-view-btn { border: 0; background: #fff; padding: 5px 14px; cursor: pointer; font-size: 13px; }
.scx-view-btn + .scx-view-btn { border-left: 1px solid #c9d1d9; }
.scx-view-btn.active { background: #2f6f4f; color: #fff; }

.scx-filter-panel {
  position: absolute; top: 100%; right: 0; z-index: 650; margin-top: 4px;
  background: #fff; border: 1px solid #c9d1d9; box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  padding: 14px 16px; display: flex; gap: 24px; font-size: 13px; width: 620px; max-width: 95vw;
}
.scx-filter-panel.hidden { display: none; }
.scx-filter-col { flex: 1; min-width: 0; }
.scx-filter-col h4 { margin: 0 0 8px; font-size: 13px; }
.scx-filter-col label { display: block; margin: 8px 0 2px; }
.scx-filter-col input[type=text], .scx-filter-col select { width: 100%; box-sizing: border-box; }
.scx-checks { display: flex; flex-wrap: wrap; gap: 4px 10px; font-weight: normal; }
.scx-checks label { display: inline-flex; align-items: center; gap: 3px; margin: 0; font-size: 12px; }
.scx-filter-actions { position: absolute; bottom: 10px; right: 16px; display: flex; gap: 10px; }

.scx-scroll { flex: 1; min-height: 0; }
.scx-table .sc-left { left: 0; }
.scx-name { padding: 4px 8px !important; white-space: normal !important; vertical-align: top; }
.scx-name-text { font-weight: bold; display: block; }
.scx-sub { display: block; font-size: 11px; color: #666; }
.scx-open { display: block; font-size: 11px; margin-top: 2px; }
tr.scx-company-row td.sc-left { font-weight: bold; background: #e0e6ea; }
tr.scx-indent .scx-name-text { padding-left: 14px; font-weight: normal; }
tr.scx-row td:not(.sc-left) { position: relative; }

/* 公式LINEの紐付け待ち（task_drafts.js renderLineUnlinkedPanel） */
.line-unlinked-last { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-unlinked .task-draft-main button { white-space: nowrap; }
.line-unlinked-messages { max-height: 240px; overflow-y: auto; white-space: pre-wrap; }
/* 公式LINEのアフター記録の下書き（after_service.js buildLineAfterServicePanel） */
.line-as-drafts .as-draft-summary { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; resize: vertical; }
#after-service-line-drafts .line-as-drafts { margin-bottom: 16px; }
/* 第2段（2026-10-23）: 案件化の候補・続報・「完了にしてよいかも」・作った工事案件へのリンク */
.line-as-drafts .as-draft-project { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.line-as-drafts .as-draft-project label { white-space: nowrap; }
.as-candidate-badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; background: #fff4d6; color: #7a5300; border: 1px solid #f0d58a; }
.as-resolved-note { display: inline-block; font-size: 12px; margin-top: 4px; padding: 2px 8px; border-radius: 4px; background: #fffbe0; color: #6b5a00; border: 1px solid #ecd96b; }
.as-related-project { display: inline-block; font-size: 12px; margin-top: 4px; padding: 1px 8px; border-radius: 10px; background: #e6f0fa; border: 1px solid #b8d0ea; text-decoration: none; }
.as-row-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.as-row-badges:empty { display: none; }
.as-notes { margin-top: 4px; font-size: 12px; }
.as-notes summary { cursor: pointer; color: #44546f; }
.as-notes ul { margin: 4px 0 0; padding-left: 18px; }
.as-note-date { color: #666; }
.as-row-actions button { display: block; white-space: nowrap; }
.as-summary-text { white-space: pre-wrap; }

/* ============================================================
   入金管理（payments.js）: 案件の「入金」タブ・サイドバーの「入金管理」・請求書の印刷
   ============================================================ */
#payments-container td.num, #payments-container input.num,
#payments-view-container td.num, .pay-doc td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pay-figures { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.pay-figures div { display: flex; flex-direction: column; }
.pay-figures span { font-size: 12px; color: #666; }
.pay-figures b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pay-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.pay-head h3 { margin: 0; }
.pay-items input { font-size: 13px; }
.pay-warn { color: #b3261e; font-weight: 600; }
.pay-ok { color: #2e7d32; }
.pay-done { color: #2e7d32; font-weight: 700; }
tr.pay-cancelled td { color: #999; text-decoration: line-through; }
tr.pay-overdue td { background: #fdecea; }
.pay-empty { padding: 8px 0; }
.pay-monthly th, .pay-monthly td { white-space: nowrap; font-size: 12px; }

/* 請求書の帳票本体（画面表示・印刷共通）。レイアウトは工務店クラウドの請求書の見本をもらったら合わせ直す */
#pay-print-area { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; color: #1c1c1e; }
.pay-doc { position: relative; max-width: 720px; margin: 0 auto; }
.pay-doc h2 { text-align: center; letter-spacing: 0.4em; font-size: 22px; border-bottom: 3px double #333; padding-bottom: 6px; margin: 6px 0 18px; }
.pay-doc p { margin: 2px 0; }
.pay-doc-top { display: flex; justify-content: space-between; gap: 16px; }
.pay-doc-addressee { font-size: 18px; border-bottom: 1px solid #333; padding: 0 24px 2px 0; margin-bottom: 10px !important; }
.pay-doc-from { font-size: 12px; }
.pay-doc-company { font-size: 15px; font-weight: 700; margin-top: 6px !important; }
.pay-doc table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.pay-doc th, .pay-doc td { border: 1px solid #555; padding: 5px 8px; font-size: 13px; }
.pay-doc th { background: #f2f2f2; font-weight: 600; text-align: left; }
.pay-doc-amount th { width: 40%; font-size: 15px; }
.pay-doc-amount td { font-size: 20px; font-weight: 800; text-align: right; }
.pay-doc-info th { width: 22%; }
.pay-doc-lines thead th { text-align: center; }
.pay-doc-lines td:last-child, .pay-doc-lines tfoot td { width: 30%; text-align: right; }
.pay-doc-lines tfoot th { text-align: right; }
.pay-doc-bank, .pay-doc-notes { margin-top: 14px; font-size: 13px; border: 1px solid #555; padding: 8px 10px; }
.pay-doc-small { font-size: 11px; }
.pay-doc-void { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-size: 72px; color: rgba(179, 38, 30, 0.35); transform: rotate(-20deg); letter-spacing: 0.4em; }

/* 印刷時は請求書本体だけを表示する（発注書の #po-print-area と同じやり方） */
@media print {
  body * { visibility: hidden; }
  #pay-print-area, #pay-print-area * { visibility: visible; }
  #pay-print-area { position: absolute; top: 0; left: 0; width: 100%; border: none; padding: 0; box-shadow: none; }
}

/* ===== 倉庫在庫（棚卸し、inventory.js） ===== */
#inventory-view-container td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-table th, .inv-table td { font-size: 12px; }
.inv-table td { vertical-align: middle; }
.view .inv-table .inv-input { padding: 3px 6px; font-size: 12px; }
.view .inv-table .inv-qty { width: 6em; text-align: right; }
.view .inv-table .inv-price { width: 7.5em; text-align: right; }
.view .inv-table .inv-memo { width: 10em; }
.view .inv-table tr.inv-unpriced td { background: rgba(245, 84, 11, 0.18); }
.inv-actions { white-space: nowrap; }
.inv-open { color: var(--splat-lime); font-weight: 700; }
.inv-summary td, .inv-summary th { font-size: 12px; }
.inv-item-form { flex-wrap: wrap; margin-bottom: 10px; }
/* ===== 入金管理: 銀行明細（段階2、payments.js の _payViewBank） ===== */
.pay-bk-drop { border: 2px dashed var(--splat-line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.pay-bk-drop.over { border-color: var(--splat-lime); }
.pay-bk-drop p { margin: 0; font-size: 13px; }
.pay-bk-row { border-top: 1px solid var(--splat-line); padding: 12px 0; display: flex; flex-direction: column; gap: 8px; }
/* 明細の行はp/label/tdではないdivなので、.viewの白文字が効かず本文の暗い色のままになる */
.view .pay-bk-row { color: rgba(255, 255, 255, 0.85); }
.view .pay-bk-head b { color: #fff; }
.pay-bk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 14px; }
.pay-bk-amount { font-variant-numeric: tabular-nums; font-size: 16px; }
.pay-bk-cands { display: flex; flex-direction: column; gap: 4px; font-size: 13px; padding-left: 8px; }
.pay-bk-cands label { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pay-bk-badge { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pay-bk-badge.exact { background: var(--splat-lime); color: var(--splat-ink); }
.pay-bk-badge.fee { background: var(--splat-cyan); color: var(--splat-ink); }
.pay-bk-badge.hint { background: var(--splat-panel-soft); color: #fff; }
.pay-bk-actions { flex-wrap: wrap; }
.pay-bk-q { width: 16em; }
.pay-bk-search { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.pay-bk-project { font-size: 13px; padding-left: 8px; }

/* タスク画面（未分類／担当者別／案件別）: 左＝自分・右＝他のスタッフ、上から 未着手→対応中→完了 */
.task-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 20px;
}
.task-grid-head {
  font-weight: 700;
  font-size: 15px;
  color: #dfe1ea;
  padding: 0 4px;
}
.task-grid .task-column { flex: none; width: auto; min-width: 0; }
.task-grid .task-column-body { min-height: 24px; }
.task-group-label {
  font-size: 12px;
  font-weight: 700;
  color: #44546f;
  padding: 6px 4px 0;
}
.task-project-block { margin-bottom: 8px; }
.task-project-block-title { margin: 14px 0 8px; font-size: 16px; }
.task-drafts-own { margin-bottom: 16px; }
@media (max-width: 700px) {
  .task-grid { grid-template-columns: minmax(0, 1fr); }
}

/* タスク画面の「案件別」: 1案件＝1列を横に並べる */
.task-project-board { padding-bottom: 12px; }
.task-project-board .task-project-column { flex: 0 0 300px; }
.task-project-column-title { font-weight: 700; overflow-wrap: anywhere; }
.task-section-label {
  font-size: 12px;
  font-weight: 700;
  color: #44546f;
  padding: 8px 4px 2px;
  border-top: 1px solid #d6d9e0;
}
.task-section-label:first-child { border-top: none; padding-top: 0; }

/* 大項目「アフター」（after_service.js、2026-10-24）: お客様ごとの行を開くと、その家の記録が並ぶ */
.asx-count { margin-left: 12px; color: var(--muted, #666); }
.asx-group-row { cursor: pointer; }
.asx-group-row:hover { background: rgba(0, 0, 0, 0.03); }
.asx-toggle { width: 1.5em; color: var(--muted, #666); }
.asx-projects { font-size: 0.9em; }
.asx-marks { white-space: nowrap; }
.asx-detail-row > td { padding-top: 0; }
.asx-inner { margin: 4px 0 12px; font-size: 0.95em; }

/* 単価マスタ（price_master.js）: 左に工種のタブ、右に検索と品目の表、その下に単価の記録 */
.pm-layout { display: flex; gap: 12px; align-items: flex-start; }
.pm-tabs {
  width: 190px; flex: none; border: 1px solid #c0c0c0; background: #fafafa;
  max-height: calc(100vh - 160px); overflow-y: auto;
}
.pm-tab { padding: 6px 8px; font-size: 12px; cursor: pointer; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; gap: 6px; }
.pm-tab:hover { background: #eaf3fb; }
.pm-tab.pm-tab-active { background: var(--accent); color: #fff; font-weight: 700; }
.pm-count { color: var(--muted); font-size: 11px; }
.pm-tab-active .pm-count { color: #dbe7f1; }
.pm-main { flex: 1; min-width: 0; }
.pm-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.pm-toolbar select { max-width: 180px; }
.pm-check { font-size: 12px; white-space: nowrap; }
.pm-body { display: flex; flex-direction: column; gap: 10px; }
.pm-results { max-height: 46vh; overflow: auto; border: 1px solid #ddd; }
.pm-table th, .pm-table td { font-size: 12px; white-space: nowrap; }
.pm-table td.num, .pm-trend td.num, .pm-records td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pm-table td.pm-spec, .pm-records td.pm-spec { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pm-table tr.pm-row-active td { background: #e3eef7; }
.pm-sub { display: block; color: var(--muted); font-size: 10px; }
.pm-flag { font-size: 10px; padding: 0 4px; border-radius: 3px; margin-left: 4px; vertical-align: middle; }
.pm-flag-lump { background: #eee; color: #555; }
.pm-flag-retired { background: #fde2e0; color: #9b2c22; }
/* 単価マスタの画面（.view）は暗い地なので詳細は地の色のまま、見積の小窓（body直下）は白地 */
.pm-detail { border: 1px solid rgba(128, 128, 128, 0.5); padding: 8px 10px; max-height: 40vh; overflow: auto; }
#pm-picker .pm-detail { background: #fff; border-color: #ddd; }
.view .pm-check, .view .pm-toolbar, .view .pm-detail-head { color: rgba(255, 255, 255, 0.82); }
.view .pm-attr-chip { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.9); }
.view .pm-records tr.pm-role-sale td:nth-child(2) { color: #9be2b4; }
.view .pm-records tr.pm-role-purchase td:nth-child(2), .view .pm-records tr.pm-role-cost_plan td:nth-child(2), .view .pm-records tr.pm-role-agreed td:nth-child(2) { color: #f3c58a; }
.pm-detail:empty { display: none; }
.pm-detail-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.pm-attrs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.pm-attr-chip { font-size: 11px; background: #eef3f8; border: 1px solid #cfdce8; border-radius: 10px; padding: 1px 8px; }
.pm-trend { width: auto; margin-bottom: 8px; }
.pm-trend th, .pm-trend td, .pm-records th, .pm-records td { font-size: 12px; white-space: nowrap; }
.pm-records tr.pm-role-sale td:nth-child(2) { color: #1d6b3a; font-weight: 700; }
.pm-records tr.pm-role-purchase td:nth-child(2), .pm-records tr.pm-role-cost_plan td:nth-child(2), .pm-records tr.pm-role-agreed td:nth-child(2) { color: #8a4b08; }
.pm-footnote { margin-top: 8px; }

/* 見積の明細行から開く小窓 */
#pm-picker {
  position: fixed; inset: 0; z-index: 2100; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
}
#pm-picker .pm-picker-inner {
  background: #fff; width: min(1200px, 96vw); max-height: 92vh; overflow: auto;
  border: 1px solid #999; box-shadow: 0 4px 24px rgba(0,0,0,0.3); padding: 12px 14px;
}
#pm-picker .pm-picker-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
#pm-picker .pm-results { max-height: 44vh; }
#pm-picker .pm-detail { max-height: 30vh; }
/* 見積の明細行の「単価マスタから選ぶ」ボタン */
.qi-pm-btn { border: none; background: none; cursor: pointer; padding: 0 2px; font-size: 13px; line-height: 1; }
.qi-pm-btn:hover { transform: scale(1.15); }
.pm-pager { margin: 0; }
#pm-picker .pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
/* 単価マスタは列が多いので、画面の間だけ main の幅の上限を外す（額縁の写真タイルは余白が無くなるので隠す） */
body.pm-wide main { max-width: none; }
body.pm-wide .bg-frame { display: none !important; }
/* 単価マスタの表は列の幅を固定（colgroup）。工種を変えても列がずれない。切れた文字は title で全文 */
.pm-table { table-layout: fixed; width: 100%; min-width: 1240px; }
.pm-table td.pm-cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 画面での直し（2026-11-02）: 名前の直し・使わない／元に戻す・品目の登録 */
.pm-flag-unused { background: #e5e5e5; color: #666; }
.pm-flag-oppy { background: #dff0e3; color: #1d6b3a; }
.pm-flag-edited { background: #fff1c7; color: #7a5b00; }
.pm-actions { margin-left: auto; display: flex; gap: 14px; }
.pm-edit-form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin-bottom: 8px; }
.pm-edit-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.pm-edit-form .pm-e-name { width: 300px; }
.pm-edit-form .pm-e-spec { width: 380px; }
.view .pm-edit-form label { color: rgba(255, 255, 255, 0.72); }
.pm-add-form { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1100px; margin-bottom: 10px; }
.pm-add-buttons { display: flex; gap: 12px; align-items: center; }
.pm-detail:has(.pm-add-form) { max-height: none; }
.pm-edits { margin-top: 8px; font-size: 12px; }
.pm-edits summary { cursor: pointer; }
.view .pm-edits summary { color: rgba(255, 255, 255, 0.72); }
/* 工種の変更・属性の直しをまとめて（2026-11-02）: 一覧の左端のチェック欄と、選んだときに出る帯 */
.pm-table th.pm-chk, .pm-table td.pm-chk { text-align: center; padding-left: 4px; padding-right: 4px; }
.pm-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; margin-bottom: 8px;
  border: 2px solid #f5c400; border-radius: 10px; font-size: 13px; }
.pm-bulk[hidden] { display: none; }
.view .pm-bulk { color: rgba(255, 255, 255, 0.92); }
.pm-bulk select { max-width: 220px; }
.pm-bulk-sep { width: 1px; align-self: stretch; background: rgba(127, 127, 127, 0.5); margin: 0 6px; }
.pm-bulk-msg { color: #2e9d4f; font-weight: 700; }
.view .pm-bulk-msg { color: #8fe0a5; }

/* --- スタッフ管理のLINE個人アカウントの紐付け（staff_admin.js renderStaffLineContacts、2026-10-24） --- */
.sa-line-contacts { margin-top: 28px; }
.sa-line-contacts .sl-staff { margin-right: 6px; }
.sa-line-contacts .sl-assigned { margin-top: 12px; max-width: 640px; }
.sa-line-contacts td > div { margin-top: 4px; }
/* タスク画面「LINEグループ：案件の紐付け待ち」の候補ボタン（苗字の一致だけで出す提案） */
.line-group-suggest { font-weight: 600; }

/* ===== 開発ページ（dev_ideas.js、経営者だけ） ===== */
.dev-new-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.dev-new-form[hidden] { display: none; }
.dev-detail > .dev-open-meeting { align-self: flex-start; }
.insp-table .nowrap { white-space: nowrap; }
.insp-table .insp-wide { min-width: 10em; }
#insp-list, #insp-missing { overflow-x: auto; }
.insp-check { display: inline-flex; align-items: center; gap: 4px; }
#view-inspections .toolbar label, #view-inspections .toolbar > span:not(.spacer),
.insp-missing summary { color: rgba(255, 255, 255, 0.85); }
.insp-missing { margin-top: 20px; }
.insp-missing summary { cursor: pointer; font-weight: 700; margin-bottom: 8px; }
.dev-table .nowrap { white-space: nowrap; }
.dev-table .dev-title { font-weight: 700; }
.dev-table .dev-no { font-variant-numeric: tabular-nums; opacity: 0.75; }
.view .dev-table tr.dev-status-dismissed td,
.view .dev-table tr.dev-status-done td { color: rgba(255, 255, 255, 0.5); }
.dev-kind { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--splat-purple); color: #fff; font-size: 12px; font-weight: 700; }
.dev-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--splat-panel-soft); color: #fff; font-size: 12px; }
.dev-status { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--splat-panel-soft); color: #fff; }
.dev-status-chip-proposed { background: var(--splat-lime); color: var(--splat-ink); }
.dev-status-chip-adopted { background: var(--splat-cyan); color: var(--splat-ink); }
/* 開いた行の中身。表の縞・ホバーの色を消して、読み物として落ち着かせる */
.view .dev-table tr.dev-detail-row td,
.view .dev-table tr.dev-detail-row:hover td { background: var(--splat-panel-dark); border-radius: 0 0 18px 18px; cursor: default; }
.view .dev-table tr.dev-row-open td { background: #3a2a4e; }
.view .dev-table tr.dev-row-open td:first-child { border-radius: 18px 0 0 0; }
.view .dev-table tr.dev-row-open td:last-child { border-radius: 0 18px 0 0; }
.dev-detail { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; }
.dev-detail label { display: flex; flex-direction: column; gap: 4px; color: rgba(255, 255, 255, 0.72); font-size: 13px; }
.dev-quote { color: rgba(255, 255, 255, 0.85); font-size: 13px; border-left: 4px solid var(--splat-cyan); padding: 2px 10px; }
.dev-proposal { border: 2px solid var(--splat-lime); border-radius: 14px; padding: 10px 14px; }
.dev-proposal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 800; color: var(--splat-lime); margin-bottom: 6px; }
.dev-proposal-body { white-space: pre-wrap; color: #fff; font-size: 13px; line-height: 1.7; }
.dev-actions { flex-wrap: wrap; gap: 8px; }

/* ===== 取引先の統合（partner_merge.js、開発ネタ#29） ===== */
.pm-merged-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
.view .data-table tr.pm-merged-row td { color: rgba(255, 255, 255, 0.45); }
.pm-tag { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--splat-panel-soft); color: #fff; font-size: 11px; font-weight: 700; }
.pm-dup-panel { margin-bottom: 12px; }
.pm-dup-panel[hidden] { display: none; }
.pm-head { display: flex; align-items: center; justify-content: space-between; }
.pm-pair { display: grid; grid-template-columns: 1fr 180px 1fr; gap: 12px; align-items: stretch; padding: 10px 0; border-top: 1px solid var(--splat-line); }
.pm-side { display: flex; flex-direction: column; gap: 3px; background: #2c2c35; border-radius: 14px; padding: 10px 12px; }
.pm-name { font-weight: 800; color: #fff; }
.pm-name a { color: #fff; text-decoration: none; }
.pm-sub { font-size: 12px; color: rgba(255, 255, 255, 0.7); min-height: 1em; }
.pm-usage { font-size: 12px; color: var(--splat-lime); font-weight: 700; }
.pm-keep { align-self: flex-start; margin-top: 4px; }
.pm-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.pm-reason { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--splat-purple); color: #fff; font-size: 12px; }
.pm-banner { background: #4a2c14; border-radius: 14px; padding: 10px 14px; color: #fff; margin: 8px 0 12px; line-height: 1.7; }
#partner-merge-banner { margin: 4px 0 10px; }
@media (max-width: 800px) { .pm-pair { grid-template-columns: 1fr; } }
/* 工事台帳の業者欄: マスタに無い名前 */
.cl-partner-unknown { background: #fff4c2 !important; }
td:has(> .cl-partner-hint) { position: relative; }
.cl-partner-hint { position: absolute; z-index: 20; left: 0; top: 100%; min-width: 220px; background: #fffbe6; color: #1c1c1e;
  border: 1px solid #e0c060; border-radius: 10px; padding: 6px 10px; font-size: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.view .cl-partner-hint .link-btn { color: #2b4bd8; padding: 0; }

/* ===== 工種ごとの業者（partner_work_types.js）・業者欄の絞り込み／仮（cost_ledger.js）2026-11-02 ===== */
.pwt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0; }
.pwt-tools label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.pwt-tablewrap { max-height: 70vh; overflow: auto; }
.pwt-table td { vertical-align: top; }
.pwt-wt { font-weight: 800; white-space: nowrap; }
.pwt-alias { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, 0.6); }
.pwt-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pwt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px;
  background: var(--splat-panel-soft); color: #fff; font-size: 12px; line-height: 1.6; border: 0; }
.pwt-chip small { color: var(--splat-lime); font-weight: 700; }
.pwt-chip .pwt-remove { background: none; border: 0; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 0 4px; font-size: 13px; box-shadow: none; }
.pwt-chip .pwt-remove:hover { color: var(--splat-pink); }
button.pwt-chip.pwt-add { padding-right: 10px; background: transparent; border: 1px dashed rgba(255, 255, 255, 0.35); cursor: pointer; box-shadow: none; }
button.pwt-chip.pwt-add:hover { border-color: var(--splat-lime); }
.pwt-addrow { display: flex; gap: 6px; margin-top: 6px; }
.pwt-add-input { width: 180px; font-size: 12px; }
.cl-table-tools { display: flex; justify-content: flex-end; margin-bottom: 6px; font-size: 13px; }
.cl-table-tools label { display: inline-flex; align-items: center; gap: 4px; }
/* 転記画面: アイが迷って1位を「仮」で入れた業者（行は要確認の色。業者名は斜体の点線下線で「仮」と分かるように） */
#cl-transfer-modal .cl-tr-grid td input.cl-tr-partner.is-guess {
  color: #b45309; font-style: italic; text-decoration: underline dashed #e8a33d; text-underline-offset: 3px;
}
#cl-transfer-modal .cl-tr-already { color: #b45309; font-weight: 700; font-size: 12px; }
#cl-transfer-modal .cl-tr-already[hidden] { display: none; }