/* ===== Valuebox SaaS mock CSS — 現行valuebox（Materio系）トークン版 ===== */
/* style.css と同じクラス名で、配色・角丸・影・フォント・バッジを現行の実値に差し替え */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root{
  --vb-primary:#0f7f83; --vb-primary-dark:#0b6a6d;
  --vb-grad:linear-gradient(135deg,#0f7f83,#23abaf);
  --vb-secondary:#5f6368; --vb-success:#2e7d32; --vb-info:#0b6aa3;
  --vb-warning:#8a5200; --vb-danger:#c62b41;
  --vb-body:#f3f3f3; --vb-card:#fff; --vb-heading:#242424; --vb-text:#5f6368;
  --vb-border:#e0e0e0; --vb-radius:.375rem; --vb-btn-radius:.3125rem;
  --vb-shadow:0 .375rem 1rem 0 rgba(58,53,65,.12);

  /* ── 濃色（薄い色を敷いた上に置く文字）──
     薄い背景に薄い文字だと読めないので、濃いほうを使う。いずれも下の背景に対して
     コントラスト比4.5:1以上（AA）。タグで使っている値と同じものをトークンにした。 */
  --vb-on-primary:#0b6a6d; --vb-on-success:#256b29; --vb-on-info:#0b5d8f;
  --vb-on-warning:#7a4a00; --vb-on-danger:#b0202f;  --vb-on-orange:#9a4300;

  /* ── 角丸（部品ごとに決める）── */
  --vb-r-card:18px; --vb-r-tile:16px; --vb-r-chip:16px;
  --vb-r-btn:5px;   --vb-r-input:12px; --vb-r-pill:9999px;

  /* ── 余白（4px刻み）── */
  --vb-space-1:4px;  --vb-space-2:8px;  --vb-space-3:12px; --vb-space-4:16px;
  --vb-space-5:20px; --vb-space-6:24px; --vb-space-8:32px; --vb-space-12:48px;

  /* ── 影・フォーカス ── */
  --vb-shadow-card:0 4px 6px -1px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --vb-shadow-btn:0 2px 4px rgba(46,38,61,.16);
  --vb-focus:0 0 0 3px rgba(15,127,131,.45);
}

/* キーボードで操作している人にだけ、はっきりした輪を出す（マウス操作では出さない）。 */
:focus-visible { outline: none; box-shadow: var(--vb-focus); }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 横スクロール抑止：off-canvasドロワー（≤1400px）が右外へ退避して出る横スクロールバーを防ぐ。
   横長コンテンツ（表・カレンダー・カンバン）は内側の overflow-x:auto ラッパーで個別にスクロールする。 */
html { overflow-x: hidden; }

body {
  font-family: 'Noto Sans JP','Inter', sans-serif;
  background: #f5f4fb;
  min-height: 100vh;
  color: var(--vb-text);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* 一番下のレイヤー：薄いテックグリッド（全ページ共通） */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(15,127,131,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,127,131,.08) 1px,transparent 1px);
  background-size:44px 44px;
}
a { color: inherit; text-decoration: none; }

/* ===== client navbar (slim, top only) ===== */
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 64px;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(7.5px);
  border-bottom: 1px solid var(--vb-border);
  position: sticky; top: 0; z-index: 100;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 700; color: var(--vb-heading);
  letter-spacing: .3px;
  text-decoration: none; cursor: pointer;
}
.nav-logo:hover { opacity: .82; }
.nav-logo-mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--vb-grad);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size:14px; font-weight: 700;
}
.nav-tenant {
  font-size:13.5px; color: var(--vb-text);
  padding: 4px 10px; background: #e6f4f5; border-radius: 6px;
  margin-left: 8px;
}
.nav-tenant.staff { background: #e6f4f5; color: var(--vb-primary); font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-link {
  font-size: 15px; color: var(--vb-heading); font-weight: 500;
  padding: 8px 12px; border-radius: var(--vb-btn-radius);
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;   /* 「引き合い」などが2行に折れて崩れて見えるのを防ぐ */
}
.nav-link i { font-size: 15px; opacity: .85; }
.nav-link.active i { opacity: 1; }
.nav-link:hover { background: #e6f4f5; color: var(--vb-primary); }
.nav-link.active { background: linear-gradient(270deg,#0f7f83 0%,#23abaf 100%); color: #fff; font-weight: 600; }
/* 右上のユーザー。押すとメニューが開くだけで、ここでは何も起きない。 */
.nav-user-menu { position: relative; display: inline-flex; }
.nav-user {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--vb-heading); font-weight: 500;
  background: none; border: none; font-family: inherit;
  padding: 4px 6px; border-radius: 10px; cursor: pointer;
  white-space: nowrap;   /* 名前を途中で折り返さない */
}
/* 長い名前でメニューの場所を奪わない（あふれる分は…にする） */
.nav-user-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.nav-user:hover { background: #e6f4f5; }
.nav-user .nav-caret { font-size: 12px; opacity: .55; transition: transform .15s; }
.nav-user-menu.open .nav-user .nav-caret { transform: rotate(180deg); }
.nav-user-sub {
  position: absolute; top: 100%; right: 0; min-width: 220px; margin-top: 6px;
  background: #fff; border: 1px solid var(--vb-border); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(64,52,120,.18); padding: 6px;
  display: none; flex-direction: column; z-index: 120;
}
.nav-user-menu.open .nav-user-sub { display: flex; }
.nav-user-head { padding: 8px 10px 10px; border-bottom: 1px solid #f1f0f6; margin-bottom: 4px; }
.nav-user-nm   { font-size: 14px; font-weight: 700; color: var(--vb-heading); }
.nav-user-role { font-size: 13px; color: var(--vb-text); }
.nav-user-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border-radius: 9px; border: none; background: none;
  font-family: inherit; font-size: 14px; text-align: left; cursor: pointer;
  color: var(--vb-heading);
}
.nav-user-item:hover { background: #e6f4f5; }
.nav-user-item.danger { color: var(--vb-danger); }
.nav-user-item.danger:hover { background: #fff0f1; }
.nav-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #e6f4f5; color: var(--vb-primary);
  display: flex; align-items: center; justify-content: center;
  font-size:13px; font-weight: 700;
}
img.nav-avatar { object-fit: cover; border: 2px solid #b7dfe1; }
/* お知らせベル（全ページ共通） */
.nav-bell { position: relative; display: inline-flex; align-items: center; color:var(--vb-text); cursor: pointer; padding: 6px; }
.nav-bell i { font-size: 17px; }
.nav-bell:hover { color: var(--vb-primary); }
.nav-dot { position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: #ff4c51; border: 1.5px solid #fff; }
/* グロナビ：メイン＋サブ（ドロップダウン。PC=ホバー展開／スマホ=アコーディオン） */
.nav-group { position: relative; display: inline-flex; }
.nav-group-btn { cursor: pointer; }
.nav-caret { font-size:13px !important; opacity: .55; margin-left: 1px; transition: transform .15s; }
.nav-sub { position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff; border: 1px solid var(--vb-border); border-radius: 12px; box-shadow: 0 14px 34px rgba(64,52,120,.18); padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 110; }
.nav-sub::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }  /* ホバー橋渡し */
.nav-sub-link { white-space: nowrap; }
.nav-group-icon .nav-sub { left: auto; right: 0; }
.nav-group-icon .nav-lbl, .nav-group-icon .nav-caret { display: none; }  /* 設定=歯車のみ */
@media (min-width:1401px){
  .nav-group:hover > .nav-sub, .nav-group:focus-within > .nav-sub { display: flex; }
  .nav-group:hover > .nav-group-btn .nav-caret, .nav-group:focus-within > .nav-group-btn .nav-caret { transform: rotate(180deg); }
}
/* グロナビ：スマホ対応（ハンバーガー＋右スライドドロワー・全ページ共通） */
.nav-menu { display: inline-flex; align-items: center; gap: 10px; }
.nav-drawer-head { display: none; }
.nav-drawer-foot { display: none; }
.nav-burger { display: none; background: none; border: none; cursor: pointer; color: #544f5a; font-size: 20px; line-height: 1; padding: 7px 9px; border-radius: 9px; }
.nav-burger:hover { background: #e6f4f5; color: #0f7f83; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(24,18,48,.42); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.nav-backdrop.show { opacity: 1; visibility: visible; }
@media (max-width:1400px){
  /* z-indexはヘッダー(.navbar:100)より高くして、開いた時にヘッダーがドロワーの上に乗って
     見えないようにする。ドロワー自身が .nav-drawer-head で見出しを持つため、padding-top も
     ヘッダー高さぶん(旧70px)ではなく他の余白と揃えた小さい値にする（issue #435）。 */
  .nav-menu { position: fixed; top: 0; right: 0; height: 100dvh; width: min(82vw,300px); flex-direction: column; align-items: stretch; gap: 4px; background: #fff; box-shadow: -16px 0 44px rgba(64,52,120,.28); padding: 14px 14px 22px; transform: translateX(106%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 101; overflow-y: auto; }
  /* PC幅→スマホ幅へ切り替わった瞬間、上のtransitionがtransform:none→translateX(106%)の変化を
     アニメーションしてしまい、一瞬メニューが展開状態で見えてから右へ閉じるように見える（issue #424）。
     nav.jsが切り替わり時だけこのクラスを付けてtransitionを止める。 */
  .nav-menu.nav-no-anim { transition: none; }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu .nav-link { font-size: 15px; padding: 13px 14px; border-radius: 11px; }
  .nav-menu .nav-link i { width: 22px; text-align: center; font-size: 16px; opacity: 1; }
  .nav-drawer-head { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; margin-bottom: 8px; border-bottom: 1px solid #f1f0f6; }
  .nav-dh-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid #b7dfe1; flex-shrink: 0; }
  .nav-dh-txt { display: flex; flex-direction: column; min-width: 0; }
  .nav-dh-nm { font-size: 14px; font-weight: 800; color: #544f5a; }
  .nav-dh-role { font-size:13.5px; color:var(--vb-text); }
  .nav-dh-close { margin-left: auto; background: none; border: none; cursor: pointer; color:var(--vb-text); font-size: 19px; padding: 4px 8px; border-radius: 8px; flex-shrink: 0; }
  .nav-dh-close:hover { background: #e6f4f5; color: #0f7f83; }
  .nav-drawer-foot { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 12px; border-top: 1px solid #f1f0f6; }
  .nav-df-badge { margin-left: auto; background: #ff4c51; color: #fff; font-size:13px; font-weight: 800; min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 10px; }
  .nav-drawer-foot form { display: contents; }
  .nav-logout { color: #ff4c51; width: 100%; background: none; border: none; font-family: inherit; text-align: left; cursor: pointer; }
  .nav-logout i { color: #ff4c51; opacity: 1; }
  .nav-logout:hover { background: #fff0f1; }
  .nav-burger { display: inline-flex; align-items: center; }
  .nav-user { gap: 0; padding: 4px; }
  .nav-user .nav-user-name, .nav-user .nav-caret { display: none; }
  .nav-user-sub { min-width: 200px; }
  .navbar { padding: 0 16px; }
  /* ドロワー内：メイン＋サブをアコーディオン化 */
  .nav-group { flex-direction: column; align-items: stretch; }
  .nav-group-btn { display: flex; width: 100%; justify-content: flex-start; }
  .nav-group-btn .nav-caret { margin-left: auto; }
  .nav-sub { position: static; display: none; min-width: 0; background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 2px 0 6px 16px; }
  .nav-sub::before { display: none; }
  .nav-group.open > .nav-sub { display: flex; }
  .nav-group.open > .nav-group-btn .nav-caret { transform: rotate(180deg); }
  .nav-group-icon .nav-lbl { display: inline; }
  .nav-group-icon .nav-caret { display: inline-block; }
}
@media (max-width:430px){ .nav-tenant { display: none; } }

/* ===== staff layout (sidebar + main) ===== */
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; background: #fff; color: var(--vb-heading);
  padding: 24px 0; flex-shrink: 0; position: sticky; top: 0;
  height: 100vh; overflow-y: auto; border-right: 1px solid var(--vb-border);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 24px 24px; border-bottom: 1px solid var(--vb-border);
  margin-bottom: 16px;
}
.sidebar-brand-text { font-size: 16px; font-weight: 700; color: var(--vb-heading); }
.sidebar-section {
  font-size:13px; font-weight: 700; color: var(--vb-secondary);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 12px 24px 6px;
}
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 24px; font-size: 14px; color: var(--vb-heading);
  transition: all 0.15s; border-radius: 6px; margin: 0 8px;
}
.sidebar-link:hover { background: #e6f4f5; color: var(--vb-primary); }
.sidebar-link.active {
  background: linear-gradient(270deg,#0f7f83 0%,#23abaf 100%); color: #fff;
}
.sidebar-link .badge {
  margin-left: auto; background: var(--vb-danger); color: #fff;
  font-size:13px; padding: 2px 6px; border-radius: 10px; font-weight: 700;
}
.sidebar-link .icon { width: 16px; text-align: center; opacity: 0.7; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 64px; background: rgba(255,255,255,0.9); backdrop-filter: blur(7.5px);
  border-bottom: 1px solid var(--vb-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; position: sticky; top: 0; z-index: 50;
}
.topbar-title { font-size: 15px; font-weight: 700; color: var(--vb-heading); }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.search-input {
  width: 260px; padding: 8px 12px; font-size: 14px;
  border: 1px solid var(--vb-border); border-radius: var(--vb-btn-radius);
  background: #fff;
}
.search-input:focus { outline: none; border-color: var(--vb-primary); }

/* ===== page ===== */
.page { max-width: 1500px; margin: 0 auto; padding: 32px; width: 100%; position: relative; z-index: 1; }
.page-narrow { max-width: 760px; }
.page-header { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-title { font-size: 24px; font-weight: 700; color: var(--vb-heading); }
.page-subtitle { font-size: 14px; color: var(--vb-text); margin-top: 4px; }

/* ===== cards ===== */
.card {
  background: var(--vb-card); border-radius: var(--vb-r-card);
  border: 1px solid #b7dfe1;
  box-shadow: 0 8px 26px rgba(102,80,164,.10), 0 0 34px rgba(15,127,131,.14), 0 0 0 1px rgba(15,127,131,.07);
  padding: 22px 24px; margin-bottom: 22px;
}
.card.dense { padding: 16px; }
.card-title {
  font-size: 18px; font-weight: 700; color: var(--vb-heading);
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--vb-border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.card-title-text { display: flex; align-items: center; gap: 8px; }

/* ===== stats grid ===== */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--vb-card); border-radius: 16px;
  border: 1px solid #b7dfe1;
  box-shadow: 0 8px 26px rgba(102,80,164,.10), 0 0 34px rgba(15,127,131,.14), 0 0 0 1px rgba(15,127,131,.07);
  padding: 20px;
}
.stat-label { font-size:14px; color: var(--vb-text); font-weight: 500; margin-bottom: 8px; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--vb-heading); line-height: 1.1; }
.stat-sub { font-size:13px; color: var(--vb-text); margin-top: 6px; }
.stat-sub.up { color: var(--vb-success); }
.stat-sub.down { color: var(--vb-danger); }

/* ===== forms ===== */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--vb-heading); margin-bottom: 6px;
}
.form-label .required { color: var(--vb-danger); font-size:13.5px; margin-left: 4px; }
/* 入力の不足を伝える一行（必須の選び忘れなど）。押しても何も起きない、を避けるために出す */
.form-err { color: var(--vb-danger); font-size:13px; margin-top: 6px; }
/* 朝の要約などから ?task= で飛んできた行を一時的に強調（案件のタスクボード） */
.vl-row-highlight { animation: vlRowHighlight 2.4s ease-out; }
@keyframes vlRowHighlight { 0% { background: rgba(15,127,131,.28); } 100% { background: transparent; } }
.form-input, .form-select, .form-textarea {
  width: 100%; min-height: 42px; padding: 10px 14px;
  border: 1px solid #d1d5db; border-radius: var(--vb-r-input);
  font-size: 15px; font-family: inherit;
  transition: border-color 0.15s;
  background: #fff;
}
/* 日付は文字数が短いので幅100%のままだと、1カラムに崩れた狭いカードでカード右端いっぱいまで間延びして見える */
.form-input[type="date"] { max-width: 220px; }
.form-select {
  padding-right: 32px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8d93' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--vb-primary); border-width: 2px; padding: 9px 13px;
  box-shadow: var(--vb-focus);
}
.form-textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-hint { font-size:13.5px; color: var(--vb-text); margin-top: 4px; }

/* ===== buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 8px 22px; border-radius: var(--vb-r-btn);
  font-size: 15px; font-weight: 500; border: none;
  white-space: nowrap;   /* 高さをそろえた分、狭い場所でラベルが2行に割れないようにする */
  cursor: pointer; transition: all 0.15s;
  font-family: inherit;
}
/* ── ボタンは強さの5段階。1画面に「塗り」は1つが基本 ──
   塗り（btn-primary）      … その画面でいちばんやってほしいこと
   縁（btn-outline）        … 編集・複製など2番手
   グレー枠（btn-neutral）  … キャンセル・閉じる
   テキスト（btn-ghost）    … 枠のいらない補助操作
   AI（btn-ai）             … AIが動くものだけ。グラデーションはここだけに使う */
.btn-primary { background: var(--vb-primary); color: #fff; box-shadow: var(--vb-shadow-btn); }
.btn-primary:hover { filter: brightness(.95); }
.btn-primary:active { filter: brightness(.90); }

/* キャンセル・閉じる。押しても何も起きないことが見た目で分かるように、色を持たせない。 */
.btn-neutral { background: #fff; color: var(--vb-heading); border: 1px solid #d1d5db; }
.btn-neutral:hover { background: #f3f3f3; }
/* モーダルの「キャンセル」は、どの画面でもグレー枠に見えるようにしておく（個別指定を不要にする） */
.btn.js-modal-cancel { background: #fff; color: var(--vb-heading); border: 1px solid #d1d5db; }
.btn.js-modal-cancel:hover { background: #f3f3f3; }

/* AIが動くボタン。グラデーションはここだけ＝「これはAIがやる」の目印にする。 */
.btn-ai { background: var(--vb-grad); color: #fff; box-shadow: 0 4px 12px rgba(15,127,131,.28); }
.btn-ai:hover { box-shadow: 0 6px 18px rgba(15,127,131,.42); }
.btn-ai:disabled { filter: grayscale(.6) brightness(1.05); cursor: default; }
.btn-blue { background: var(--vb-info); color: #fff; }
.btn-blue:hover { filter: brightness(0.95); }
.btn-blue:active, .btn-green:active, .btn-red:active, .btn-danger:active { filter: brightness(0.90); }
.btn-green { background: var(--vb-success); color: #fff; }
.btn-green:hover { filter: brightness(0.94); }
.btn-red { background: var(--vb-danger); color: #fff; }
.btn-red:hover { filter: brightness(0.94); }
.btn-outline {
  background: #fff; color: var(--vb-primary);
  border: 1px solid var(--vb-primary);
}
.btn-outline:hover { background: #e6f4f5; }
.btn-ghost { background: transparent; color: var(--vb-text); }
.btn-ghost:hover { background: #e6f4f5; color: var(--vb-primary); }
/* 表の中など、密なところで使う小さいボタン。押せる高さは確保する。 */
.btn-sm { min-height: 36px; padding: 6px 14px; font-size:14px; }
.btn-lg { min-height: 48px; padding: 11px 24px; font-size: 15px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row.right { justify-content: flex-end; }
.btn-row-nw { flex-wrap: nowrap; }

/* ===== tags / status badges (= Sneat .bg-label-*) ===== */
.tag {
  display: inline-flex; align-items: center; min-height: 24px;
  font-size:13px; font-weight: 600;
  padding: 0 10px; border-radius: var(--vb-r-chip); vertical-align: middle;
  white-space: nowrap;   /* 「準備中」などの短い札は、狭い画面でも途中で割らない */
}
.tag-blue   { background: #e3f0fa; color: #0b5d8f; }  /* info */
.tag-cyan   { background: #e6f4f5; color: #0b6a6d; }  /* primary */
.tag-green  { background: #e3f3e5; color: #256b29; }  /* success */
.tag-yellow { background: #fff1d6; color: #7a4a00; }  /* warning */
.tag-orange { background: #ffe6d1; color: #9a4300; }
.tag-red    { background: #fde7ea; color: #b0202f; }  /* danger */
.tag-purple { background: #e6f4f5; color: #0b6a6d; }  /* primary */
.tag-gray   { background: #ececec; color: #4a4a4a; }  /* secondary */

/* ===== tables ===== */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: left; padding: 10px 14px; font-weight: 600;
  color: var(--vb-heading); font-size: 0.75rem; border-bottom: 1px solid var(--vb-border);
  background: transparent; text-transform: uppercase; letter-spacing: 1px;
}
.data-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--vb-border); color: #4b4b4b;
  vertical-align: middle;
}
.data-table tr:hover td { background: rgba(58,53,65,0.04); cursor: pointer; }
/* 表のセルに .row / .btn-row などの横並びユーティリティが付くと、そのセルだけ
   display:flex になって table-cell でなくなる。すると行の高さに合わせて伸びず、
   中身も上下中央にならないため「編集ボタンの列だけ上にずれる」ように見える。
   セルは table-cell のままにして、中身だけ横に並べる。 */
td.row, td.row-between, td.btn-row {
  display: table-cell; vertical-align: middle; white-space: nowrap;
}
td.row > *, td.row-between > *, td.btn-row > * {
  display: inline-flex; align-items: center; vertical-align: middle; float: none;
}
td.row > * + *, td.row-between > * + * { margin-left: 12px; }
td.btn-row > * + * { margin-left: 10px; }
td.row.gap-sm > * + *, td.row-between.gap-sm > * + *, td.btn-row.gap-sm > * + * { margin-left: 6px; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .amount { text-align: right; font-weight: 600; }
/* プロジェクト詳細のサブプロジェクト一覧テーブルは本文を16pxで読みやすく（このページ限定） */
#subTable, #subTable td, #subTable .text-sm, #subTable .text-xs { font-size: 16px; }
/* 行の展開トグル（▸/▾）を大きく・分かりやすく */
#subTable .sp-caret { font-size: 20px; line-height: 1; color: var(--vb-primary); vertical-align: middle; margin-right: 2px; }
/* 種別アイコンの色（サブPJ=メインカラー／完了=緑・進行中=橙）。このページ限定（.c-* は本来 .stat-value 併用時のみ効くため） */
#subTable .c-purple { color: var(--vb-primary); }
#subTable .c-green  { color: var(--vb-success); }
#subTable .c-orange { color: #e07b39; }
/* 子サブプロジェクト（2階層目以降）は少し薄く表示して親を目立たせる */
#subTable .sp-nest { opacity: .75; }
/* タスク管理：予定送信バーの日付入力は幅を抑える（form-select/inputはw:100%のため） */
#schedForm .form-input { width: 170px; }

/* ===== chat thread ===== */
.chat-thread {
  background: #f4f5fa; border-radius: var(--vb-radius); padding: 16px;
  max-height: 520px; overflow-y: auto;
}
.chat-msg { display: flex; gap: 10px; margin-bottom: 14px; }
.chat-msg.me { flex-direction: row-reverse; }
.chat-msg.system { justify-content: center; }
.chat-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size:13.5px; font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-avatar.client { background: #dcf3ff; color: #16b1ff; }
.chat-avatar.staff  { background: #e6f7d9; color: #56ca00; }
.chat-avatar.ai     { background: #e6f4f5; color: #0f7f83; }
.chat-bubble {
  background: #fff; padding: 10px 14px; border-radius: var(--vb-radius);
  max-width: 75%; font-size: 14px; line-height: 1.6;
  border: 1px solid var(--vb-border);
}
.chat-msg.me .chat-bubble { background: #e6f4f5; border-color: #b7dfe1; }
.chat-msg.ai .chat-bubble { background: #e6f4f5; border-color: #b7dfe1; }
.chat-meta {
  font-size:13px; color: var(--vb-text); margin-top: 4px;
  display: flex; gap: 8px; align-items: center;
}
.chat-msg.me .chat-meta { justify-content: flex-end; }
.chat-input { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.chat-input textarea {
  flex: 1; padding: 10px 12px; border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius); font-family: inherit; font-size: 14px;
  resize: none; min-height: 70px;
}
.chat-input textarea:focus { outline: none; border-color: var(--vb-primary); }

/* AI検討（agent_runs）の1ブロック：読み表示を既定に、編集はトグル */
.run-item { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }
.run-ava { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; background: #e6f4f5; flex: 0 0 36px; overflow: hidden; }
.run-ava img, .mtg-ava img { width: 100%; height: 100%; object-fit: cover; }
.cfg-ic img { width: 100%; height: 100%; object-fit: cover; }
.agent-ic-prev { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #e6f4f5; display: flex; align-items: center; justify-content: center; flex: 0 0 48px; }
.agent-ic-prev img { width: 100%; height: 100%; object-fit: cover; }
.agent-ic-emoji { font-size: 24px; }
.run-item.is-syn .run-ava { background: #e6f7d9; }
.run-main { flex: 1 1 auto; min-width: 0; }
.run-role { font-size:13.5px; color: #0b6a6d; }
.run-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.run-head-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.run-body { margin-top: 8px; background: #e6f4f5; border: 1px solid #b7dfe1; border-radius: 9px; padding: 11px 13px; color: #3f3d47; font-size:14px; line-height: 1.85; }
.run-item.is-syn .run-body { background: #f4faee; border-color: #ddeecb; }
/* 吹き出しの尻尾（agent-run内の run-body だけに付与。sales アドバイスの run-body には付けない） */
.run-item .run-body { position: relative; border-top-left-radius: 3px; }
.run-item .run-body::before { content: ''; position: absolute; left: -7px; top: 12px; width: 0; height: 0; border: 7px solid transparent; border-right-color: #b7dfe1; border-left: 0; }
.run-item .run-body::after { content: ''; position: absolute; left: -6px; top: 12px; width: 0; height: 0; border: 7px solid transparent; border-right-color: #e6f4f5; border-left: 0; }
.run-item.is-syn .run-body::before { border-right-color: #ddeecb; }
.run-item.is-syn .run-body::after { border-right-color: #f4faee; }
.run-body .rt-line { margin: 0 0 6px; }
.run-body .rt-line:last-child { margin-bottom: 0; }
.run-body .rt-list { margin: 4px 0 8px; padding-left: 1.25em; }
.run-body .rt-list li { margin: 2px 0; }
.run-body strong { color: #2f2b3a; }

/* 戦略会議：アバター＋吹き出し（会議っぽい表示） */
.mtg { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.mtg-row { display: flex; gap: 10px; align-items: flex-start; }
.mtg-sm .mtg-ava { width: 48px; height: 48px; font-size: 24px; flex: 0 0 48px; }
.mtg-ava { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 42px; background: #e6f4f5; flex: 0 0 80px; overflow: hidden; }
.mtg-main { flex: 1 1 auto; min-width: 0; }
.mtg-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size:13px; color: #6b6b6b; margin: 2px 0 4px; }
.mtg-role { font-size:13.5px; color: #0b6a6d; }
.mtg-bubble { position: relative; background: #e6f4f5; border: 1px solid #b7dfe1; border-radius: 12px; border-top-left-radius: 3px; padding: 10px 14px; color: #3f3d47; font-size:14px; line-height: 1.85; overflow-wrap: anywhere; word-break: break-word; }
.mtg-bubble::before { content: ''; position: absolute; left: -7px; top: 12px; width: 0; height: 0; border: 7px solid transparent; border-right-color: #b7dfe1; border-left: 0; }
.mtg-bubble::after { content: ''; position: absolute; left: -6px; top: 12px; width: 0; height: 0; border: 7px solid transparent; border-right-color: #e6f4f5; border-left: 0; }
.mtg-row.is-plan .mtg-ava { background: #e6f7d9; }
.mtg-row.is-plan .mtg-bubble { background: #f4faee; border-color: #cfe8bd; }
.mtg-row.is-plan .mtg-bubble::before { border-right-color: #cfe8bd; }
.mtg-row.is-plan .mtg-bubble::after { border-right-color: #f4faee; }
.mtg-bubble .rt-line { margin: 0 0 6px; }
.mtg-bubble .rt-line:last-child { margin-bottom: 0; }
.mtg-bubble .rt-list { margin: 4px 0 8px; padding-left: 1.25em; }
.mtg-bubble .rt-list li { margin: 2px 0; }
.mtg-bubble strong { color: #2f2b3a; }
/* スマホ幅：長文が入ると、固定幅アバターの横に狭い吹き出しが並ぶ形になり読みにくい。
   アバターを上に、吹き出しを全幅で下に置き、矢印も左向きから上向きに変える（#426）。 */
@media (max-width:640px) {
  .mtg-row { flex-direction: column; }
  .mtg-bubble { margin-top: 12px; border-radius: 12px; }
  .mtg-bubble::before { content: ''; position: absolute; left: 24px; top: -7px; width: 0; height: 0;
    border-width: 0 7px 7px 7px; border-style: solid; border-color: transparent transparent #e5d6ff transparent; }
  .mtg-bubble::after { content: ''; position: absolute; left: 25px; top: -6px; width: 0; height: 0;
    border-width: 0 7px 7px 7px; border-style: solid; border-color: transparent transparent #f7f2ff transparent; }
  .mtg-row.is-plan .mtg-bubble::before { border-color: transparent transparent #cfe8bd transparent; }
  .mtg-row.is-plan .mtg-bubble::after { border-color: transparent transparent #f4faee transparent; }
}
.run-reply { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.run-reply .form-input { flex: 1; min-width: 220px; }
.run-foot { margin-top: 8px; }

/* ===== diff viewer (AI review) ===== */
.diff-viewer {
  background: #2f2b3a; color: #e7e3f4; border-radius: var(--vb-radius);
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size:13px; line-height: 1.65; padding: 16px; overflow-x: auto;
}
.diff-line { white-space: pre; padding: 0 6px; }
.diff-add { background: rgba(86,202,0,0.18); color: #a6e878; }
.diff-del { background: rgba(255,76,81,0.18); color: #ff9ea1; }
.diff-ctx { color: #0b6a6d; }

/* ===== timeline ===== */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px;
  width: 2px; background: var(--vb-border);
}
.timeline-item { position: relative; padding-bottom: 16px; }
.timeline-item::before {
  content: ''; position: absolute; left: -19px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--vb-primary);
}
.timeline-item.done::before { background: var(--vb-success); border-color: var(--vb-success); }
.timeline-item.pending::before { background: #fff; border-color: #cbd5e1; }
.timeline-time { font-size:13.5px; color: var(--vb-text); margin-bottom: 2px; }
.timeline-text { font-size: 14px; color: #4b4b4b; overflow-wrap: anywhere; word-break: break-word; }

/* ===== login screen ===== */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px;
  background: linear-gradient(135deg, #e6f4f5 0%, #f4f5fa 60%, #e6f4f5 100%);
}
.login-card {
  width: 100%; max-width: 400px;
  background: #fff; border-radius: var(--vb-radius);
  padding: 36px 32px;
  box-shadow: var(--vb-shadow);
  border: 0;
  /* 背景のグリッド（body::before・z-index:0）がカードの上に罫線として透けないよう前面に出す（.page と同じ） */
  position: relative; z-index: 1;
}
.login-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }
.login-brand-mark {
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--vb-grad);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(15,127,131,0.3);
}
.login-brand-title { font-size: 18px; font-weight: 700; color: var(--vb-heading); }
.login-brand-sub { font-size:13px; color: var(--vb-text); margin-top: 2px; }
.login-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0; font-size:13.5px; color: var(--vb-text);
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--vb-border);
}
/* ログイン前の画面の文字リンク（「パスワードを忘れた場合」など）。灰色の説明文と見分けがつくよう主色にし、ホバーで下線 */
.login-link { font-size:13px; font-weight: 600; color: var(--vb-primary); text-decoration: none; }
.login-link:hover, .login-link:focus-visible { text-decoration: underline; }

/* ===== misc utilities ===== */
.muted { color: var(--vb-text); }
.text-sm { font-size:13px; }
.text-xs { font-size:13.5px; }
.text-danger { color: var(--vb-danger); }
.bold { font-weight: 700; }
.row { display: flex; gap: 12px; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gap-sm { gap: 6px; }
.gap-md { gap: 14px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.flex-1 { flex: 1; }
.divider { height: 1px; background: var(--vb-border); margin: 16px 0; }

/* ===== app 共通ユーティリティ（実装フェーズ Phase 2〜） ===== */
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size:13px; }
/* 通知は「左の縦線＋濃色の文字」で見分ける（色が分かりにくい人にも種類が伝わるように）。 */
.alert { font-size:14px; font-weight: 700; padding: 10px 16px; border-radius: var(--vb-r-input);
         border-left: 4px solid transparent; margin-bottom: 10px; }
.alert-success { background: #e6f7d9; color: var(--vb-on-success); border-left-color: var(--vb-success); }
.alert-error   { background: #ffe4e5; color: var(--vb-on-danger);  border-left-color: var(--vb-danger); }
.alert-info    { background: #e9f2ff; color: var(--vb-on-info);    border-left-color: var(--vb-info); }
.alert-toast   { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; box-shadow: 0 4px 14px rgba(0,0,0,.12); margin: 0; }
.alert-stack   { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 8px; }
.note { font-size:13px; color:var(--vb-text); background: #f6f7fb; border-radius: 9px; padding: 10px 13px; line-height: 1.7; }

/* ── バナー：左の縦線で種類を見分ける ──
   色だけに頼らず、線の位置と濃い文字色で「注意」「エラー」を伝える。 */
.banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid var(--vb-border);
  border-left: 4px solid var(--vb-primary);
  border-radius: var(--vb-r-tile); padding: 12px 16px;
  font-size: 14px; line-height: 1.7; color: var(--vb-heading);
}
.banner + .banner { margin-top: var(--vb-space-2); }
.banner .banner-ic { flex: 0 0 auto; line-height: 1.7; }
.banner .banner-body { min-width: 0; }
.banner .banner-title { font-weight: 700; }
.banner-warn   { background: #fff1d6; border-color: #e8d3a6; border-left-color: var(--vb-warning); color: var(--vb-on-warning); }
.banner-danger { background: #fde7ea; border-color: #f3c9c4; border-left-color: var(--vb-danger); color: var(--vb-on-danger); }
.banner-info   { background: #e3f0fa; border-color: #bfe4f7; border-left-color: var(--vb-info); color: var(--vb-on-info); }
.banner-ok     { background: #e3f3e5; border-color: #cbe9b0; border-left-color: var(--vb-success); color: var(--vb-on-success); }
.stars { color: #ffb400; letter-spacing: 1px; }
.txt-cell-sub { color:var(--vb-text); font-weight: 400; font-size:13.5px; }
.btn-block { width: 100%; }
.text-center { text-align: center; }
.ml-sm { margin-left: 6px; }
.tag-purple { background: #e6f4f5; color: #0b6a6d; }
.tag-green { background: #e3f3e5; color: #256b29; }
.tag-red { background: #fde7ea; color: #b0202f; }
.tag-gray { background: #ececec; color: #4a4a4a; }
.wrap-pre { white-space: pre-wrap; line-height: 1.9; color: #4b4b4b; font-size:14px; overflow-wrap: anywhere; word-break: break-word; }

/* ── 共通グロナビのアバター（イニシャル・外部画像に依存しない）＋フッター ── */
.nav-ava { width: 26px; height: 26px; border-radius: 50%; background: var(--vb-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size:13px; font-weight: 800; flex-shrink: 0; margin-right: 8px; }
.nav-dh-ava { width: 42px; height: 42px; border-radius: 50%; background: var(--vb-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; flex-shrink: 0; }
@media (max-width: 1400px) { .nav-user { display: none; } }
.site-footer { text-align: center; padding: 24px 16px; font-size:13.5px; color:var(--vb-text); border-top: 1px solid var(--vb-border); margin-top: 40px; }
.site-footer a { color: var(--vb-primary); text-decoration: none; }
.card-narrow { max-width: 640px; }
.check-list { font-size:14px; line-height: 2; color: #544f5a; padding-left: 18px; margin: 0; }
.error-code { font-size: 40px; font-weight: 800; color: #0b6a6d; }
.error-code.err { color: #d32f34; font-size: 30px; }

/* ===== responsive ===== */
@media (max-width: 900px) {
  /* minmax(0,1fr) にしないと、中の文字の最小幅で列が押し広げられ、枠からはみ出す */
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .page { padding: 15px; }
}

/* ============================================================
   VA-01 AIエージェント・コックピット（staff/ai-cockpit.php）
   実装ビューはインライン style を使わないため、動的な棒は
   5%刻みの vac-w-* / vac-h-* ユーティリティで表現する。
   ============================================================ */
.vac-lead { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--vb-text); margin-top:4px; flex-wrap:wrap; line-height:1.6; }
.vac-lead strong { color:var(--vb-primary-dark); }

/* 期間トグル（サーバ往復のリンク） */
.vac-toggle { display:inline-flex; border:1px solid var(--vb-border); border-radius:8px; overflow:hidden; }
.vac-toggle a { padding:6px 14px; font-size:13px; font-weight:700; background:#fff; color:var(--vb-text); text-decoration:none; border-right:1px solid var(--vb-border); }
.vac-toggle a:last-child { border-right:none; }
.vac-toggle a.active { background:var(--vb-primary); color:#fff; }

/* サマリー5枚 */
.vac-sum-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.vac-sm { border:1px solid #eeedf5; border-radius:12px; padding:12px 14px; }
.vac-sm-l { font-size:13.5px; color:var(--vb-text); font-weight:600; }
.vac-sm-v { font-size:22px; font-weight:800; color:var(--vb-heading); line-height:1.1; margin-top:4px; }
.vac-sm-v small { font-size:13px; color:var(--vb-text); font-weight:700; }
.vac-sm.vac-hl .vac-sm-v { color:var(--vb-primary-dark); }

/* 予算バー */
.vac-budget { background:#fff; border:1px solid #eeedf5; border-radius:12px; padding:13px 16px; margin-top:14px; }
.vac-budget-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.vac-budget-l { font-size:13.5px; color:var(--vb-text); font-weight:700; }
.vac-budget-v { font-size:18px; font-weight:800; color:var(--vb-heading); }
.vac-budget-v small { font-size:13px; color:var(--vb-text); font-weight:600; }
.vac-budget-foot { display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--vb-text); margin-top:6px; flex-wrap:wrap; }
.vac-budget-foot a { color:var(--vb-primary-dark); font-weight:700; text-decoration:none; }
.vac-danger { color:var(--vb-danger); }

/* 共通トラック（稼働率・予算） */
.vac-track { position:relative; height:9px; background:#e6f4f5; border-radius:6px; overflow:hidden; margin-top:7px; }
.vac-track i { display:block; height:100%; background:linear-gradient(90deg,#0f7f83,#23abaf); border-radius:6px; }
.vac-track i.over { background:linear-gradient(90deg,#ff8f52,#ff4c51); }

/* コールアウト */
.vac-callout { background:linear-gradient(120deg,#f5f1ff,#eef6ff); border:1px solid #b7dfe1; border-radius:12px; padding:14px 16px; font-size:14px; color:var(--vb-heading); line-height:1.8; margin-top:14px; }
.vac-callout b { color:var(--vb-primary-dark); }
.vac-big { font-size:18px; font-weight:800; }

/* エージェントカード */
.vac-agents { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; }
.vac-agent { border:1px solid #eeedf5; border-radius:14px; padding:15px; background:#fff; }
.vac-ag-head { display:flex; align-items:center; gap:11px; }
.vac-ag-ic { width:44px; height:44px; border-radius:12px; background:#e6f4f5; display:inline-flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; overflow:hidden; }
.vac-ag-ic img { width:100%; height:100%; object-fit:cover; }
.vac-ag-nm { font-size:15px; font-weight:800; color:var(--vb-heading); }
.vac-ag-area { font-size:13.5px; color:var(--vb-text); margin-top:1px; }
.vac-ag-grade { margin-left:auto; font-size:14px; font-weight:800; padding:3px 10px; border-radius:9px; flex-shrink:0; background:#f4f5fa; color:var(--vb-text); }
.vac-grade-Ap { background:#e6f7d9; color:#3d9e00; }
.vac-grade-A  { background:#eaf8dd; color:#56ca00; }
.vac-grade-Am { background:#eef8e0; color:#7bc043; }
.vac-grade-Bp { background:#e2f4ff; color:#16b1ff; }
.vac-grade-B  { background:#e0eefb; color:#0d8bd9; }
.vac-ag-status-row { display:flex; align-items:center; gap:10px; margin-top:9px; flex-wrap:wrap; }
.vac-ag-status { font-size:13px; font-weight:700; padding:2px 8px; border-radius:10px; display:inline-flex; align-items:center; gap:4px; }
.vac-ag-status.run { background:#e6f7d9; color:#3d9e00; }
.vac-ag-status.idle { background:#f1f2f4; color:var(--vb-text); }
.vac-ag-status .d { width:6px; height:6px; border-radius:50%; background:currentColor; }
.vac-ag-tier { font-size:13px; color:var(--vb-text); }
.vac-util { margin:13px 0 3px; }
.vac-util-l { display:flex; justify-content:space-between; font-size:13.5px; color:#6f6b76; font-weight:600; }
.vac-ag-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:13px 0; text-align:center; }
.vac-ag-stats .st { background:#e6f4f5; border-radius:9px; padding:8px 4px; }
.vac-ag-stats .n { font-size:17px; font-weight:800; color:var(--vb-heading); }
.vac-ag-stats .n.g { color:#3d9e00; }
.vac-ag-stats .n.r { color:#d3572f; }
.vac-ag-stats .k { font-size:13px; color:var(--vb-text); margin-top:1px; }
.vac-trend { display:flex; align-items:flex-end; gap:3px; height:34px; margin:6px 0; }
.vac-trend i { flex:1; background:linear-gradient(180deg,#23abaf,#0f7f83); border-radius:2px 2px 0 0; min-height:3px; }
.vac-trend-l { font-size:13px; color:var(--vb-text); }
.vac-roi { display:flex; align-items:center; gap:8px; font-size:13.5px; color:#6f6b76; margin:11px 0; padding:9px 11px; background:#f7f5ff; border-radius:9px; flex-wrap:wrap; }
.vac-roi b { color:var(--vb-heading); }
.vac-roi .x { margin-left:auto; font-weight:800; color:#3d9e00; }
.vac-ag-tasks { border-top:1px solid #f4f5fa; padding-top:9px; }
.vac-ag-tasks .tl { font-size:13px; color:var(--vb-text); font-weight:700; margin-bottom:5px; }
.vac-ag-tasks .ti { font-size:13.5px; color:var(--vb-heading); padding:2px 0; display:flex; align-items:center; gap:6px; }
.vac-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:#c9c7cd; }
.vac-res-success { background:#56ca00; }
.vac-res-rework  { background:#ffb400; }
.vac-res-failed  { background:#ff4c51; }

/* 5%刻みの動的バー（width=稼働率/予算, height=トレンド） */
.vac-w-0 { width:0%; } .vac-h-0 { height:0%; }
.vac-w-5 { width:5%; } .vac-h-5 { height:5%; }
.vac-w-10 { width:10%; } .vac-h-10 { height:10%; }
.vac-w-15 { width:15%; } .vac-h-15 { height:15%; }
.vac-w-20 { width:20%; } .vac-h-20 { height:20%; }
.vac-w-25 { width:25%; } .vac-h-25 { height:25%; }
.vac-w-30 { width:30%; } .vac-h-30 { height:30%; }
.vac-w-35 { width:35%; } .vac-h-35 { height:35%; }
.vac-w-40 { width:40%; } .vac-h-40 { height:40%; }
.vac-w-45 { width:45%; } .vac-h-45 { height:45%; }
.vac-w-50 { width:50%; } .vac-h-50 { height:50%; }
.vac-w-55 { width:55%; } .vac-h-55 { height:55%; }
.vac-w-60 { width:60%; } .vac-h-60 { height:60%; }
.vac-w-65 { width:65%; } .vac-h-65 { height:65%; }
.vac-w-70 { width:70%; } .vac-h-70 { height:70%; }
.vac-w-75 { width:75%; } .vac-h-75 { height:75%; }
.vac-w-80 { width:80%; } .vac-h-80 { height:80%; }
.vac-w-85 { width:85%; } .vac-h-85 { height:85%; }
.vac-w-90 { width:90%; } .vac-h-90 { height:90%; }
.vac-w-95 { width:95%; } .vac-h-95 { height:95%; }
.vac-w-100 { width:100%; } .vac-h-100 { height:100%; }

@media (max-width:1000px){ .vac-agents { grid-template-columns:repeat(2,1fr); } .vac-sum-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .vac-agents { grid-template-columns:1fr; } }

/* ============================================================
   一覧の充実（VS-01級）：KPIタイル / フィルタ / 検索 / ソート
   実装ビュー共通の再利用コンポーネント（vl-*）。requests/projects/invoices。
   ============================================================ */
.vl-kpi6 { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:14px; }
.vl-kpi { border:1px solid #eeedf5; border-radius:10px; padding:10px 12px; background:#fff; text-decoration:none; display:block; transition:border-color .12s, box-shadow .12s; }
.vl-kpi:hover { border-color:var(--vb-primary); }
.vl-kpi.active { border-color:var(--vb-primary); box-shadow:inset 0 0 0 1px var(--vb-primary); background:#f5fafa; }
.vl-kpi .l { font-size:13.5px; color:var(--vb-text); font-weight:600; }
.vl-kpi .n { font-size:22px; font-weight:800; color:var(--vb-heading); line-height:1.1; margin-top:2px; }
.vl-kpi.warn .n { color:var(--vb-danger); }
.vl-kpi.mid .n { color:#e07b39; }
.vl-kpi-info { background:#e6f4f5; cursor:default; }
.vl-kpi-info:hover { border-color:#eeedf5; }
.vl-kpi-info .n { font-size:16px; color:var(--vb-primary-dark); }
/* KPIカラー変種（電話タブ等・非リンクの数値強調） */
.vl-kpi-danger, .vl-kpi-warn, .vl-kpi-ok { cursor:default; }
.vl-kpi-danger:hover, .vl-kpi-warn:hover, .vl-kpi-ok:hover { border-color:#eeedf5; }
.vl-kpi-danger { background:#fef4f5; } .vl-kpi-danger .n { font-size:16px; color:var(--vb-danger); }
.vl-kpi-warn   { background:#fff8f0; } .vl-kpi-warn .n   { font-size:16px; color:#e07b39; }
.vl-kpi-ok     { background:#f2fbf5; } .vl-kpi-ok .n     { font-size:16px; color:#2f9e57; }
/* 極小ボタン（テーブル行内の操作） */
.btn-xs { min-height:30px; padding:3px 10px; font-size:13.5px; border-radius:var(--vb-r-btn); line-height:1.4; }

/* フィルタ・ツールバー */
.vl-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
/* 依頼内容は取引先ごとの自由記述がそのまま候補になり、長い候補があると幅指定の無い
   素のselectは選択中/最長optionの文字幅までふくらむ。html{overflow-x:hidden}で
   横スクロールもできないため、業種セレクトと同じ理由でスマホ幅の画面外に切れる（issue #504）。
   他のツールバー（.cl-bar select・.fb-tbar select）と同様に幅の上限を入れておく。 */
.vl-toolbar select, .vl-srch input { height:34px; border:1px solid var(--vb-border); border-radius:var(--vb-btn-radius); background:#fff; color:var(--vb-heading); font-size:14px; font-family:inherit; padding:0 12px; }
.vl-toolbar select { max-width:100%; }
.vl-toolbar select:focus, .vl-srch input:focus { outline:none; border-color:var(--vb-primary); }
.vl-check { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--vb-text); cursor:pointer; user-select:none; }
.vl-check input { accent-color:var(--vb-primary); cursor:pointer; }
.vl-srch { position:relative; }
.vl-srch i { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--vb-text); font-size:13px; }
.vl-srch input { padding-left:31px; width:230px; max-width:100%; }

/* テーブル：横スクロール / ソート見出し / 行ホバー */
.vl-tbl-wrap { overflow-x:auto; }
.vl-sortable a { color:inherit; text-decoration:none; white-space:nowrap; }
.vl-sortable a:hover { color:var(--vb-primary); }
.vl-row { cursor:pointer; }
.vl-row:hover { background:#f5fafa; }
.vl-row.row-done { opacity:.5; } .vl-row.row-done:hover { opacity:.72; }
/* width:auto だとブラウザによって選択中の文字幅で箱が伸縮し、表がずれて見える（#429）ため固定幅にする。
   フォントによる文字幅の違いで「未着手」「進行中」が欠けないよう少し余裕を持たせている。 */
.tm-status { height:30px; width:92px; font-size:14px; padding:2px 26px 2px 10px; }
.task-done-tools { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:8px 0 10px; }
.donesel { height:30px; width:auto; font-size:14px; padding:2px 26px 2px 10px; }
.pj-status { height:30px; width:auto; font-size:14px; padding:2px 26px 2px 10px; }
.row.items-center { align-items:center; }
.btn-row.items-center { align-items:center; }
.dsc-rounds { display:inline-flex; align-items:center; gap:5px; }
.tpl-filter .tplf { cursor:pointer; border:0; font-size:13px; }
.tpl-row.tpl-has { cursor:pointer; } .tpl-row.tpl-has:hover { background:#f5fafa; }
.tpl-caret { font-size:13px; color:#9b98a3; transition:transform .12s; margin-right:2px; }
.tpl-row.open .tpl-caret { transform:rotate(90deg); }
.tpl-detail > td { background:#e6f4f5; border-top:0; padding:10px 14px; }
.tpl-detail:hover td { cursor:default; }
.tpl-d { font-size:14px; margin-bottom:6px; } .tpl-d:last-child { margin-bottom:0; }
.tpl-d b { display:inline-block; min-width:72px; color:#0b6a6d; font-size:13px; }
.tpl-pick-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.tpl-pick-lbl { margin:0; }
.tpl-pick-all { display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-size:13px; color:var(--vb-text); }
.tpl-pick { max-height:280px; overflow-y:auto; border:1px solid #ece9f3; border-radius:8px; padding:4px; }
.tpl-ck-row { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; cursor:pointer; font-size:14px; }
.tpl-ck-row:hover { background:#f5fafa; }
.tpl-ck-t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tpl-ck-m { font-size:13.5px; color:#9b98a3; white-space:nowrap; }
.tpl-ck-min { font-size:13.5px; color:#0b6a6d; font-weight:600; white-space:nowrap; }
.data-table tr.row-done { opacity:.5; } .data-table tr.row-done td.bold { text-decoration:line-through; color:#8a8790; }
.vl-row.row-done td.bold { text-decoration:line-through; color:#8a8790; }
.vl-row-tools { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.vl-done-toggle { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }

/* 流入元バッジ */
.vl-chan { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.vl-chan-form { background:#e4f4ff; color:#0f83c4; }
.vl-chan-phone { background:#e6f7d9; color:#3d9e00; }
.vl-chan-mail { background:#eef0f3; color:#6f6b76; }
.vl-chan-sales { background:#e6f4f5; color:#0b6a6d; }

/* 優先度ドット */
.vl-pri-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.vl-pri-urgent { background:#ff4c51; box-shadow:0 0 0 3px rgba(255,76,81,.22); }
.vl-pri-high { background:#ff4c51; }
.vl-pri-mid { background:#ffb400; }
.vl-pri-low { background:#cbd5e1; }

/* カテゴリタグ / 案件化リンク */
.vl-cattag { font-size:13px; font-weight:700; padding:1px 7px; border-radius:8px; background:#f4f5fa; color:#6f6b76; margin-left:6px; }
.vl-linkpj { font-size:13px; font-weight:700; color:var(--vb-primary-dark); text-decoration:none; margin-left:6px; }
.vl-linkpj:hover { text-decoration:underline; }
.bold > a.vl-linkpj { margin-left:0; } /* 見出し先頭のリンクは左マージンを付けず、下の取引先名と左端を揃える */

@media (max-width:820px) { .vl-kpi6 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px) { .vl-kpi6 { grid-template-columns:repeat(2,1fr); } }

/* ===== VP-01 プロジェクト一覧（リスト／カンバン／ガント切替） ===== */
/* KPIカードの数値色 */
.stat-value.c-gray { color:var(--vb-text); } .stat-value.c-blue { color:#16b1ff; }
.stat-value.c-purple { color:var(--vb-primary); } .stat-value.c-green { color:var(--vb-success); }
.stat-value.c-red { color:var(--vb-danger); } .stat-value.c-orange { color:#e07b39; }

/* 表示切替トグル */
.vp-toggle { display:inline-flex; border:1px solid var(--vb-border); border-radius:8px; overflow:hidden; margin-bottom:18px; }
.vp-toggle button { padding:7px 16px; font-size:14px; font-weight:600; background:#fff; border:none; color:var(--vb-text); cursor:pointer; border-right:1px solid var(--vb-border); font-family:inherit; }
.vp-toggle button:last-child { border-right:none; }
.vp-toggle button.active { background:var(--vb-primary); color:#fff; }

/* 進捗ミニバー */
.progress-mini { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--vb-text); font-weight:600; }
.progress-bar-mini { width:60px; height:6px; background:#e7e7e8; border-radius:3px; overflow:hidden; }
.progress-fill-mini { height:100%; border-radius:3px; background:var(--vb-primary); }
.progress-fill-mini.pf-red { background:var(--vb-danger); }
.progress-fill-mini.pf-green { background:var(--vb-success); }
.progress-fill-mini.pf-yellow { background:#ffb400; }
.progress-fill-mini.pf-gray { background:#b4b2b7; }
/* 幅ユーティリティ（5%刻み・インラインstyle回避） */
.barw-0{width:0}.barw-5{width:5%}.barw-10{width:10%}.barw-15{width:15%}.barw-20{width:20%}
.barw-25{width:25%}.barw-30{width:30%}.barw-35{width:35%}.barw-40{width:40%}.barw-45{width:45%}
.barw-50{width:50%}.barw-55{width:55%}.barw-60{width:60%}.barw-65{width:65%}.barw-70{width:70%}
.barw-75{width:75%}.barw-80{width:80%}.barw-85{width:85%}.barw-90{width:90%}.barw-95{width:95%}.barw-100{width:100%}

/* リストビュー：本体＋サイドバー 2カラム */
.vp-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:start; }
@media (max-width:1000px){ .vp-grid { grid-template-columns:1fr; } }
/* プロジェクト一覧＝全幅。旧サイドバー（要対応/マイルストーン/クイックアクション）はテーブル下に3列で配置 */
.vp-side-row { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; margin-top:20px; }
.vp-side-row[hidden] { display:none; }
@media (max-width:1000px){ .vp-side-row { grid-template-columns:1fr; } }
.vp-cell-sub { font-size:13.5px; color:var(--vb-text); }
.vp-lead { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.vp-ava { width:24px; height:24px; border-radius:50%; background:#e6f4f5; color:var(--vb-primary); font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.vp-ava.ai { background:#e6f4f5; color:var(--vb-primary); }
.vp-ava.human { background:#f4f5fa; color:var(--vb-heading); }
/* 登録された担当（そのプロジェクト自体の持ち主）。配下タスクの担当者と見分けがつくよう濃くする */
.vp-ava.owner { background:var(--vb-primary); color:#fff; box-shadow:0 0 0 2px #e6f4f5; }

/* サイドバー：要対応アラート */
.vp-alert { padding:10px 12px; border-radius:8px; margin-bottom:8px; }
.vp-alert:last-child { margin-bottom:0; }
.vp-alert.danger { background:#ffeef0; border-left:3px solid var(--vb-danger); }
.vp-alert.warn { background:#fff4d9; border-left:3px solid #ffb400; }
.vp-alert .nm { font-weight:700; font-size:14px; margin-bottom:2px; }
.vp-alert.danger .nm { color:#c0272b; }
.vp-alert.warn .nm { color:#7a5200; }
.vp-alert .rs { font-size:13.5px; }
.vp-alert.danger .rs { color:#c0272b; }
.vp-alert.warn .rs { color:#7a5200; }
.vp-alert a { color:var(--vb-primary-dark); font-weight:600; font-size:13.5px; text-decoration:none; }
.vp-qa { display:flex; flex-direction:column; gap:8px; }
.vp-qa .btn { justify-content:flex-start; }

/* カンバン（状態別ボード） */
.pk-board { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:start; }
@media (max-width:900px){ .pk-board { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pk-board { grid-template-columns:1fr; } }
.pk-col { background:#f4f5fa; border-radius:12px; padding:12px; }
.pk-col-head { font-size:13px; font-weight:700; color:var(--vb-heading); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; }
.pk-col-head .cnt { background:#fff; border:1px solid var(--vb-border); border-radius:10px; font-size:13px; padding:1px 8px; color:var(--vb-text); }
.pk-card { display:block; background:#fff; border:1px solid var(--vb-border); border-radius:8px; padding:11px 12px; margin-bottom:8px; box-shadow:0 1px 2px rgba(58,53,65,.05); text-decoration:none; }
.pk-card:hover { border-color:var(--vb-primary); }
.pk-card:last-child { margin-bottom:0; }
.pk-card .co { font-size:13px; color:var(--vb-text); }
.pk-card .nm { font-size:14px; font-weight:600; color:var(--vb-heading); margin:2px 0 7px; }
.pk-bar { height:5px; background:#e7e7e8; border-radius:3px; overflow:hidden; margin-bottom:7px; }
.pk-bar i { display:block; height:100%; border-radius:3px; background:var(--vb-primary); }
.pk-meta { display:flex; justify-content:space-between; align-items:center; font-size:13.5px; gap:8px; color:var(--vb-text); }
.pk-amt { font-weight:600; }
.pk-empty { font-size:13.5px; color:var(--vb-text); padding:4px 2px; }

/* 一括操作バー（複数選択→担当割当/ステータス変更） */
.vl-chk-cell { width:34px; text-align:center; }
.vl-chk-cell input { width:15px; height:15px; cursor:pointer; accent-color:var(--vb-primary); }
.vl-bulkbar { display:none; align-items:center; gap:10px; background:#2f2b3a; color:#fff; border-radius:10px; padding:10px 16px; margin-bottom:12px; flex-wrap:wrap; }
.vl-bulkbar.show { display:flex; }
.vl-bulkbar b { color:#23abaf; font-size:14px; }
.vl-bulk-sel { height:30px; border:1px solid #514c60; border-radius:6px; background:#3a3547; color:#fff; font-size:13px; font-family:inherit; padding:0 8px; }
.vl-bulk-sel:focus { outline:none; border-color:var(--vb-primary); }
.vl-bulk-btn { background:#fff; color:var(--vb-heading); border:none; font-size:13px; }
.vl-bulk-btn:hover { background:#e6f4f5; color:var(--vb-primary-dark); }
.vl-bulk-div { width:1px; height:20px; background:#514c60; }
.vl-bulk-clear { color:#23abaf; font-size:13px; text-decoration:none; margin-left:auto; }
.vl-bulk-clear:hover { text-decoration:underline; }

/* ============================================================
   取引先詳細（VK-02・staff/client-show.php）
   ============================================================ */
.ck-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.ck-head .stars { font-size:16px; }
.ck-kv { display:grid; grid-template-columns:auto 1fr; gap:2px 18px; font-size:14px; margin:0; }
.ck-kv dt { color:var(--vb-text); padding:6px 0; }
.ck-kv dd { color:#4b4b4b; padding:6px 0; margin:0; border-bottom:1px dashed #f0f0f4; word-break:break-all; }
.ck-chips { display:flex; gap:10px; flex-wrap:wrap; }
.ck-chip { display:inline-flex; align-items:center; gap:8px; font-size:13px; background:#e6f4f5; border:1px solid #eeedf5; border-radius:20px; padding:6px 13px; }
.ck-chip .k { color:var(--vb-text); }
.ck-chip .v { font-weight:700; color:var(--vb-heading); }
.ck-flags { display:flex; gap:4px; flex-wrap:wrap; }
.mini { font-size:13px; font-weight:700; padding:1px 7px; border-radius:8px; }
.vl-kpi .n small { font-size:13px; color:var(--vb-text); font-weight:600; }

/* インライン編集（VK-02：✏️編集→その場でフォーム展開→保存/キャンセル） */
.inline-edit { display:none; }
.card.editing .inline-view { display:none; }
.card.editing .inline-edit { display:block; }
.vl-pencil { float:right; background:#fff; border:1px solid var(--vb-border); border-radius:6px; color:var(--vb-text); font-size:13px; font-weight:600; padding:3px 11px; cursor:pointer; font-family:inherit; }
.vl-pencil:hover { border-color:var(--vb-primary); color:var(--vb-primary); }
.ck-edit-row { display:grid; grid-template-columns:1fr 2fr; gap:8px; margin-bottom:8px; }
.ck-edit-row .form-input { margin:0; }
.inline-edit .btn-row { margin-top:14px; }

/* トグル開閉フォーム（担当者 追加/編集・依頼/案件の作成導線） */
.toggle-box { display:none; }
.toggle-box.is-open { display:block; }
/* 取引先ごとのやりとり（メール・接点・依頼を1本の時系列で読む） */
.ct-item { border-top:1px solid #f0f0f4; padding:11px 0; }
.ct-item:first-of-type { border-top:none; }
.ct-body { font-size:13.5px; line-height:1.8; color:#544f5a; background:#f9f9fc; border-radius:7px; padding:8px 11px; white-space:pre-wrap; word-break:break-word; }
.ct-body mark { background:#fff2a8; color:inherit; border-radius:2px; padding:0 1px; }
.ct-clip { cursor:pointer; }
.ct-clip::marker { color:#0f7f83; }

.ck-form { border-top:1px solid #f0f0f4; margin-top:12px; padding-top:14px; }
.ck-row { display:flex; flex-wrap:wrap; gap:6px 4px; }
/* 過去タスクのコピー用バッジ（カレンダーの予定追加） */
.task-chip { display:inline-flex; align-items:center; gap:5px; font-size:13px; padding:3px 10px; border-radius:999px; border:1px solid #b7dfe1; background:#e6f4f5; color:#0b6a6d; cursor:pointer; line-height:1.6; }
.task-chip:hover { background:#e6f4f5; border-color:#b7dfe1; }
.task-chip-est { font-size:13.5px; color:#0b6a6d; }
.ck-chk { display:inline-flex; align-items:center; gap:5px; font-size:14px; color:var(--vb-heading); margin-right:16px; cursor:pointer; }
.ck-chk input { width:15px; height:15px; accent-color:var(--vb-primary); }

/* 顧客ポータル：対応が必要なこと（アクション起点） */
.pc-banner { background:#fff4d9; border:1px solid #ffe4a1; border-radius:10px; padding:11px 15px; font-size:14px; color:#8a6d00; margin-bottom:16px; }
.pc-banner strong { color:#a06d00; }
.pc-banner a { color:var(--vb-primary-dark); font-weight:700; text-decoration:none; margin-left:8px; }
.pc-actions { display:flex; flex-direction:column; gap:10px; }
.pc-action { display:flex; align-items:center; gap:12px; border:1px solid #eeedf5; border-radius:10px; padding:11px 14px; flex-wrap:wrap; }
.pc-action-main { flex:1; min-width:180px; }

/* お問い合わせスレッド（VS-06） */
.im-msg { border:1px solid #eeedf5; border-radius:10px; padding:10px 13px; margin-bottom:10px; }
.im-msg.im-outbound { background:#f5fafa; border-color:#b7dfe1; }
.im-msg.im-note { background:#f7f7f9; }
.im-head { display:flex; align-items:center; gap:8px; margin-bottom:5px; flex-wrap:wrap; }

/* 売上ダッシュボード（VS-09） */
.sv-bars { display:flex; align-items:flex-end; gap:12px; height:150px; }
.sv-bar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.sv-bar-track { width:70%; max-width:48px; height:100px; display:flex; align-items:flex-end; background:#f4f5fa; border-radius:6px 6px 0 0; overflow:hidden; }
.sv-bar-track i { display:block; width:100%; background:linear-gradient(180deg,#23abaf,#0f7f83); border-radius:6px 6px 0 0; min-height:2px; }
.sv-bar-v { font-size:13.5px; font-weight:700; color:var(--vb-heading); margin-top:5px; }
.sv-bar-l { font-size:13.5px; color:var(--vb-text); }
.sv-pipe { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
@media(max-width:720px){ .sv-pipe{ grid-template-columns:repeat(3,1fr);} }
.sv-pipe-col { border:1px solid #eeedf5; border-radius:10px; padding:10px; text-align:center; }
.sv-pipe-n { font-size:18px; font-weight:800; color:var(--vb-heading); margin-top:6px; }
.sv-pipe-n small { font-size:13.5px; color:var(--vb-text); font-weight:600; }
.sv-pipe-y { font-size:13.5px; color:var(--vb-primary-dark); font-weight:700; }
.sv-rank { display:flex; align-items:center; gap:12px; margin-bottom:9px; }
.sv-rank-nm { width:180px; font-size:14px; font-weight:600; color:var(--vb-heading); flex-shrink:0; }
.sv-rank-track { flex:1; height:10px; background:#e6f4f5; border-radius:6px; overflow:hidden; }
.sv-rank-track i { display:block; height:100%; background:linear-gradient(90deg,#0f7f83,#23abaf); }
.sv-rank-v { width:110px; text-align:right; font-size:14px; font-weight:700; color:var(--vb-heading); flex-shrink:0; }
@media(max-width:600px){ .sv-rank-nm{ width:110px;} .sv-rank-v{ width:80px;} }


/* プレイブック（VA-10） */
.pb-steps { display:flex; flex-direction:column; gap:8px; }
.pb-step { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--vb-heading); }
.pb-step-n { width:22px; height:22px; border-radius:50%; background:#e6f4f5; color:var(--vb-primary-dark); font-size:13px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ===== 設定（VS-10：左サブナビ＋セクション） ===== */
.set-wrap { display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:start; }
@media (max-width:900px){ .set-wrap { grid-template-columns:1fr; } .set-nav { position:static; } }
.set-nav { position:sticky; top:20px; padding:10px; }
.set-nav a { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px; font-size:14px; color:var(--vb-heading); font-weight:500; text-decoration:none; }
.set-nav a:hover { background:#f5fafa; }
.set-nav a.active { background:#e6f4f5; color:var(--vb-primary-dark); font-weight:700; }
.set-nav-div { font-size:13px; font-weight:700; color:var(--vb-text); padding:12px 12px 4px; letter-spacing:.04em; }
.set-nav a.disabled { color:#c9c7cd; pointer-events:none; }
.set-sec { scroll-margin-top:76px; }
.sec-h { font-size:16px; font-weight:700; color:var(--vb-heading); display:flex; align-items:center; gap:8px; }
.sec-d { font-size:13px; color:var(--vb-text); margin:3px 0 16px; }
.prov { border:1px solid var(--vb-border); border-radius:10px; padding:14px; margin-bottom:12px; }
.prov:last-child { margin-bottom:0; }
.prov-sub { background:#f5fafa; }
.prov-h { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:14px; margin-bottom:10px; color:var(--vb-heading); }
.prov-h.sm { font-size:14px; }
.key-set { font-size:13px; font-weight:700; color:#3d9e00; background:#e6f7d9; padding:2px 8px; border-radius:10px; }
.key-non { font-size:13px; font-weight:700; color:#a06d00; background:#fff4d9; padding:2px 8px; border-radius:10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid2.g3 { grid-template-columns:repeat(3,1fr); }
.grid2 .form-group { margin-bottom:0; }
@media (max-width:640px){ .grid2, .grid2.g3 { grid-template-columns:1fr; } }
.chk-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.chk-grid.one { grid-template-columns:1fr; }
.chk-grid.week { grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }  /* 繰り返しの曜日（月〜日を1行） */
.chk-grid[hidden], .form-row[hidden] { display:none !important; }  /* display:grid が hidden 属性に勝ってしまうため */
.chk-grid label { display:flex; align-items:center; gap:7px; font-size:14px; color:var(--vb-heading); }
.chk-grid input { width:15px; height:15px; accent-color:var(--vb-primary); }
.field-sm { max-width:140px; }
.field-md { max-width:280px; }
/* トグルスイッチ */
.tgl { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.tgl input { display:none; }
.tgl .sl { position:absolute; inset:0; background:#d5d3da; border-radius:24px; transition:.2s; cursor:pointer; }
.tgl .sl:before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.tgl input:checked + .sl { background:var(--vb-primary); }
.tgl input:checked + .sl:before { transform:translateX(20px); }

/* ===== VP-02 プロジェクト詳細 ===== */
/* 情報カード kv */
.kv-inline { display:grid; grid-template-columns:repeat(3,1fr); gap:4px 24px; }
.kv-inline > div { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed #f4f5fa; font-size:14px; }
.kv-inline dt { color:var(--vb-text); }
.kv-inline dd { color:var(--vb-heading); font-weight:600; text-align:right; }
@media(max-width:700px){ .kv-inline { grid-template-columns:1fr; } }
.save-hint { font-size:13.5px; color:var(--vb-success); margin-top:8px; }
/* サブプロジェクト・タスクツリー */
.tree-table { width:100%; border-collapse:collapse; font-size:14px; }
.tree-table th { text-align:left; padding:10px 14px; font-weight:600; color:var(--vb-text); font-size:13.5px; border-bottom:1px solid var(--vb-border); background:#f4f5fa; letter-spacing:.04em; }
.tree-table td { padding:10px 14px; border-bottom:1px solid #f4f5fa; color:var(--vb-heading); vertical-align:middle; }
.tree-row:hover td { background:#f5fafa; }
/* 階層インデント（第1セル） */
.tree-row.lvl-0 td:first-child { padding-left:14px; }
.tree-row.lvl-1 td:first-child { padding-left:34px; }
.tree-row.lvl-2 td:first-child { padding-left:54px; }
.tree-row.lvl-3 td:first-child { padding-left:74px; }
.tree-row.lvl-4 td:first-child { padding-left:94px; }
/* 親行（サブPJ）＝薄い塗り・太字 */
.tree-row.tr-branch:not(.tr-phase) td:first-child { font-weight:700; }
.tree-row.tr-branch:not(.tr-phase) td { background:#f7f4ff; }
.tree-row.tr-phase td:first-child { font-weight:600; color:var(--vb-heading); }
.tree-row.tr-phase td { background:#fbfaff; }
.tree-cnt { font-size:13px; font-weight:700; color:var(--vb-primary); background:#e6f4f5; border-radius:8px; padding:0 7px; margin-left:6px; }
/* 開閉キャレット */
.tree-caret { display:inline-block; width:14px; text-align:center; color:var(--vb-text); font-size:13px; transition:transform .15s; }
.tree-caret.collapsed { transform:rotate(-90deg); }
.tree-caret-sp { display:inline-block; width:14px; }
/* FontAwesome アイコン */
.tree-fa { display:inline-block; width:17px; text-align:center; margin-right:7px; color:var(--vb-text); font-size:14px; }
.tree-fa.proj { color:var(--vb-primary); }
.tree-fa.phase { color:#12b0a5; }
.tree-fa.ok { color:var(--vb-success); }
.tree-fa.ai { color:var(--vb-primary); }
.tree-fa.do { color:var(--vb-info); }
.tree-fa.todo { color:#c9c7cd; }
.tree-table .tt-act { white-space:nowrap; }
.tree-forms { border-top:1px solid var(--vb-border); }
/* 予算・採算 */
.budget-card { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.budget-item { padding:12px; background:#f4f5fa; border-radius:8px; }
.budget-item.span2 { grid-column:1/3; background:#f0fdf4; border:1px solid #86efac; }
.budget-item.span2.loss { background:#fff0f1; border-color:#ffc9cc; }
.budget-label { font-size:13.5px; color:var(--vb-text); margin-bottom:4px; }
.budget-value { font-size:18px; font-weight:700; color:var(--vb-heading); }
.budget-value.profit { color:var(--vb-success); }
.budget-value.deficit { color:var(--vb-danger); }
/* メンバー */
.member-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #f4f5fa; }
.member-row:last-child { border-bottom:none; }
.member-info { flex:1; min-width:0; }
.member-name { font-size:14px; font-weight:600; color:var(--vb-heading); }
.member-role { font-size:13.5px; color:var(--vb-text); }
.member-hours { font-size:13.5px; color:var(--vb-text); white-space:nowrap; }
.member-ava { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; background:#e6f4f5; color:var(--vb-primary); }
.member-ava.ai { background:#e6f4f5; color:var(--vb-primary); }
.vp-detail-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:start; }
@media(max-width:1000px){ .vp-detail-grid { grid-template-columns:1fr; } }
.crumb { font-size:14px; margin-bottom:8px; }
.crumb a { color:var(--vb-text); } .crumb a:hover { color:var(--vb-primary); }
.crumb .sep { color:#d5d3da; margin:0 4px; }
/* VP-02：パディング0カード（ツリー表を端まで） */
.card.pad0 { padding:0; overflow:hidden; }
.pad-title { padding:16px 20px; }

/* ===== 共通：確認モーダル＋危険ボタン＋ゴミ箱 ===== */
.btn-danger { background:var(--vb-danger); color:#fff; border:1px solid var(--vb-danger); }
.btn-danger:hover { filter:brightness(.94); color:#fff; }
.modal-overlay { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(24,18,48,.46); }
.modal-overlay[hidden] { display:none; }
.modal-box { background:#fff; border-radius:16px; width:420px; max-width:100%; padding:24px; box-shadow:0 24px 60px rgba(0,0,0,.3); text-align:center; animation:modalIn .16s ease-out; }
@keyframes modalIn { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
.modal-icon { font-size:34px; margin-bottom:8px; }
.modal-icon-img { width:64px; height:64px; border-radius:50%; object-fit:cover; display:inline-block; vertical-align:middle; }
.modal-title { font-size:18px; font-weight:700; color:var(--vb-heading); margin-bottom:6px; }
.modal-text { font-size:14px; color:var(--vb-text); margin-bottom:20px; line-height:1.7; }
.modal-actions { display:flex; gap:10px; justify-content:center; }
.icon-del { background:none; border:none; cursor:pointer; color:var(--vb-text); padding:5px 8px; border-radius:7px; font-size:14px; line-height:1; }
.icon-del:hover { background:#ffe4e5; color:var(--vb-danger); }
/* 枠なしアイコンボタン（削除以外の操作用・icon-del と横並び） */
.icon-act { background:none; border:none; cursor:pointer; color:var(--vb-text); padding:5px 8px; border-radius:7px; font-size:14px; line-height:1; text-decoration:none; display:inline-flex; align-items:center; }
.icon-act:hover { background:#e6f4f5; color:var(--vb-primary); }

/* ===== 共通トースト（成功/失敗/情報のポップアップ） ===== */
.toast-wrap { position:fixed; top:76px; right:20px; z-index:300; display:flex; flex-direction:column; gap:10px; width:340px; max-width:calc(100vw - 32px); pointer-events:none; }
.toast { pointer-events:auto; display:flex; align-items:flex-start; gap:11px; background:#fff; border-radius:12px; border-left:4px solid var(--vb-border); box-shadow:0 14px 34px rgba(64,52,120,.20); padding:12px 14px; animation:toastIn .26s cubic-bezier(.2,.8,.2,1); }
.toast.hide { animation:toastOut .3s forwards ease-in; }
.toast.success { border-left-color:var(--vb-success); }
.toast.error { border-left-color:var(--vb-danger); }
.toast.info { border-left-color:var(--vb-info); }
.toast-ico { font-size:16px; line-height:1.45; flex-shrink:0; }
.toast.success .toast-ico { color:var(--vb-success); }
.toast.error .toast-ico { color:var(--vb-danger); }
.toast.info .toast-ico { color:var(--vb-info); }
.toast-msg { flex:1; font-size:14px; font-weight:600; color:var(--vb-heading); line-height:1.55; word-break:break-word; }
.toast-close { background:none; border:none; cursor:pointer; color:#c9c7cd; font-size:14px; padding:2px 4px; line-height:1; flex-shrink:0; border-radius:6px; }
.toast-close:hover { background:#e6f4f5; color:var(--vb-heading); }
@keyframes toastIn { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }
@keyframes toastOut { to { opacity:0; transform:translateX(24px); } }
@media (max-width:600px){ .toast-wrap { top:72px; right:12px; left:12px; width:auto; } }

/* ===== 共通：編集モーダル（既存フォームをモーダルに載せる） ===== */
.modal-overlay.modal-edit { z-index:190; }               /* 確認モーダル(200)より下＝削除確認を上に重ねる */
.modal-box-lg { width:560px; max-width:100%; text-align:left; padding:0; max-height:88vh; display:flex; flex-direction:column; }
/* 表を出す道具（予定登録アシスタントなど）は、560pxだと列が潰れるので広く開く */
.modal-box-lg.modal-box-wide { width:920px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 20px; border-bottom:1px solid var(--vb-border); flex-shrink:0; }
.modal-heading { font-size:16px; font-weight:700; color:var(--vb-heading); }
.modal-x { background:none; border:none; cursor:pointer; color:var(--vb-text); font-size:18px; line-height:1; padding:4px 8px; border-radius:8px; }
.modal-x:hover { background:#e6f4f5; color:var(--vb-heading); }
.modal-body { padding:20px; overflow:auto; }
.edit-src { }   /* 通常は素・[hidden]で非表示。モーダルに移動時は表示 */

/* モーダルのフッター：長いフォームでもスクロールせずに「保存」「完了にする」を押せるよう下に貼り付ける。
   モーダルの中だけ。JSが動かないときは素のボタン列として、フォーム末尾にそのまま出る。 */
#editModalBody .modal-foot {
  position:sticky; bottom:-20px; z-index:2;
  margin:14px -20px -20px; padding:12px 20px;
  background:#fff; border-top:1px solid var(--vb-border);
}

/* ===== 共通ページネーション（switchworks admin/activity 相当） ===== */
.pagination { display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap; margin:18px 0 4px; }
.pagination .btn { min-width:38px; justify-content:center; padding:6px 12px; }
.pagination .btn.disabled { opacity:.4; pointer-events:none; }
.pagination .pg-gap { border:none; background:none; box-shadow:none; cursor:default; padding:6px 4px; min-width:0; }
.pg-info { text-align:center; font-size:13px; color:var(--vb-text); margin-top:14px; }

/* ===== VS-11 ダッシュボード：カレンダー（週ナビ＋日タイムライン） ===== */
.cal-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.cal-nav { display:flex; align-items:center; gap:8px; }
.cal-arw { width:30px; height:30px; border:1px solid var(--vb-border); background:#fff; border-radius:8px; cursor:pointer; color:var(--vb-heading); font-size:16px; line-height:1; text-align:center; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.cal-arw:hover { border-color:var(--vb-primary); color:var(--vb-primary); }
.cal-date { font-size:16px; font-weight:700; color:var(--vb-heading); min-width:190px; text-align:center; }
.cal-week { display:flex; gap:3px; }
.cal-week .wcol { display:flex; flex-direction:column; align-items:center; min-width:38px; padding:3px 6px 4px; border-radius:9px; cursor:pointer; text-decoration:none; transition:background .12s; }
.cal-week .wcol .d { font-size:13px; color:var(--vb-text); line-height:1.5; }
.cal-week .wcol .n { font-size:13px; color:var(--vb-heading); font-weight:600; line-height:1.3; }
.cal-week .wcol:hover:not(.today) { background:#f5fafa; }
.cal-week .wcol.today { background:var(--vb-primary); box-shadow:0 3px 10px rgba(15,127,131,.35); }
.cal-week .wcol.today .d { color:#b7dfe1; } .cal-week .wcol.today .n { color:#fff; font-weight:700; }
/* 日タイムライン */
.day-wrap { display:flex; align-items:stretch; }
.lane-labels { width:76px; flex-shrink:0; }
.lane-labels .ll-sp { height:20px; }
.lane-labels .ll { height:calc(var(--cal-rows,1) * 60px); display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--vb-heading); border-bottom:1px solid #f4f5fa; }
.ll-av { width:24px; height:24px; border-radius:50%; flex-shrink:0; background:#e6f4f5; color:var(--vb-primary); display:inline-flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:700; }
.ll-av.ll-ai { background:#e6f4f5; }
.ll-txt { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.ll-dept { font-size:11.5px; font-weight:500; color:#aeacb3; }
.day-scroll { flex:1; overflow-x:auto; overflow-y:hidden; border:1px solid #eef0f3; border-radius:0 10px 10px 0; }
.day-track { position:relative; width:max-content; min-width:100%; }
.day-spacer { height:0; }
.day-track.can-add { cursor:copy; }
.day-ruler { position:relative; height:20px; }
.day-lunch { position:absolute; top:20px; bottom:0; z-index:0; pointer-events:none; background:repeating-linear-gradient(45deg,#f2f3f5,#f2f3f5 6px,#e9ebef 6px,#e9ebef 12px); }
.day-lunch span { position:absolute; top:4px; left:6px; font-size:11.5px; color:var(--vb-text); font-weight:700; }
.rk { position:absolute; top:3px; font-size:13px; color:var(--vb-text); }
.lane-row { position:relative; height:calc(var(--cal-rows,1) * 60px); border-bottom:1px solid #f1f1f3; background-image:repeating-linear-gradient(90deg,#e9ebef 0 1px,transparent 1px 144px),repeating-linear-gradient(90deg,#f5f6f8 0 1px,transparent 1px 36px); }
.day-now { position:absolute; top:20px; bottom:0; width:2px; background:var(--vb-danger); z-index:3; pointer-events:none; }
.day-now span { position:absolute; top:-14px; left:-13px; font-size:11.5px; color:var(--vb-danger); font-weight:700; white-space:nowrap; }
.ev { position:absolute; top:calc(2px + var(--cal-row,0) * 60px); height:56px; border-radius:8px; padding:7px 10px; font-size:13px; font-weight:600; border:1px solid; overflow:hidden; box-sizing:border-box; z-index:2; line-height:1.25; text-decoration:none; box-shadow:0 1px 4px rgba(64,52,120,.12); }
.ev .eh { display:block; font-size:13px; opacity:.85; }
.ev .et { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.ev.g{background:#e9f9ec;border-color:#b7ecc2;color:#2f8f45;} .ev.o{background:#fff2e8;border-color:#ffd3ad;color:#c26a1f;}
.ev.b{background:#e8f3ff;border-color:#bcdcff;color:#1268b8;} .ev.gy{background:#f4f5fa;border-color:#e3e3e7;color:var(--vb-text);}
.ev.done{opacity:.55;} .ev.done .eh:after{content:" ✓";}
.cal-empty { padding:26px; text-align:center; color:var(--vb-text); font-size:14px; }
/* 5分スロット位置（1スロット=12px・15分=36px・1時間=144px） */
.cal-x0{left:0px;}.cal-x1{left:12px;}.cal-x2{left:24px;}.cal-x3{left:36px;}.cal-x4{left:48px;}.cal-x5{left:60px;}.cal-x6{left:72px;}.cal-x7{left:84px;}.cal-x8{left:96px;}.cal-x9{left:108px;}.cal-x10{left:120px;}.cal-x11{left:132px;}.cal-x12{left:144px;}.cal-x13{left:156px;}.cal-x14{left:168px;}.cal-x15{left:180px;}.cal-x16{left:192px;}.cal-x17{left:204px;}.cal-x18{left:216px;}.cal-x19{left:228px;}.cal-x20{left:240px;}.cal-x21{left:252px;}.cal-x22{left:264px;}.cal-x23{left:276px;}.cal-x24{left:288px;}.cal-x25{left:300px;}.cal-x26{left:312px;}.cal-x27{left:324px;}.cal-x28{left:336px;}.cal-x29{left:348px;}.cal-x30{left:360px;}.cal-x31{left:372px;}.cal-x32{left:384px;}.cal-x33{left:396px;}.cal-x34{left:408px;}.cal-x35{left:420px;}.cal-x36{left:432px;}.cal-x37{left:444px;}.cal-x38{left:456px;}.cal-x39{left:468px;}.cal-x40{left:480px;}.cal-x41{left:492px;}.cal-x42{left:504px;}.cal-x43{left:516px;}.cal-x44{left:528px;}.cal-x45{left:540px;}.cal-x46{left:552px;}.cal-x47{left:564px;}.cal-x48{left:576px;}.cal-x49{left:588px;}.cal-x50{left:600px;}.cal-x51{left:612px;}.cal-x52{left:624px;}.cal-x53{left:636px;}.cal-x54{left:648px;}.cal-x55{left:660px;}.cal-x56{left:672px;}.cal-x57{left:684px;}.cal-x58{left:696px;}.cal-x59{left:708px;}.cal-x60{left:720px;}.cal-x61{left:732px;}.cal-x62{left:744px;}.cal-x63{left:756px;}.cal-x64{left:768px;}.cal-x65{left:780px;}.cal-x66{left:792px;}.cal-x67{left:804px;}.cal-x68{left:816px;}.cal-x69{left:828px;}.cal-x70{left:840px;}.cal-x71{left:852px;}.cal-x72{left:864px;}.cal-x73{left:876px;}.cal-x74{left:888px;}.cal-x75{left:900px;}.cal-x76{left:912px;}.cal-x77{left:924px;}.cal-x78{left:936px;}.cal-x79{left:948px;}.cal-x80{left:960px;}.cal-x81{left:972px;}.cal-x82{left:984px;}.cal-x83{left:996px;}.cal-x84{left:1008px;}.cal-x85{left:1020px;}.cal-x86{left:1032px;}.cal-x87{left:1044px;}.cal-x88{left:1056px;}.cal-x89{left:1068px;}.cal-x90{left:1080px;}.cal-x91{left:1092px;}.cal-x92{left:1104px;}.cal-x93{left:1116px;}.cal-x94{left:1128px;}.cal-x95{left:1140px;}.cal-x96{left:1152px;}.cal-x97{left:1164px;}.cal-x98{left:1176px;}.cal-x99{left:1188px;}.cal-x100{left:1200px;}.cal-x101{left:1212px;}.cal-x102{left:1224px;}.cal-x103{left:1236px;}.cal-x104{left:1248px;}.cal-x105{left:1260px;}.cal-x106{left:1272px;}.cal-x107{left:1284px;}.cal-x108{left:1296px;}
.cal-w1{width:12px;}.cal-w2{width:24px;}.cal-w3{width:36px;}.cal-w4{width:48px;}.cal-w5{width:60px;}.cal-w6{width:72px;}.cal-w7{width:84px;}.cal-w8{width:96px;}.cal-w9{width:108px;}.cal-w10{width:120px;}.cal-w11{width:132px;}.cal-w12{width:144px;}.cal-w13{width:156px;}.cal-w14{width:168px;}.cal-w15{width:180px;}.cal-w16{width:192px;}.cal-w17{width:204px;}.cal-w18{width:216px;}.cal-w19{width:228px;}.cal-w20{width:240px;}.cal-w21{width:252px;}.cal-w22{width:264px;}.cal-w23{width:276px;}.cal-w24{width:288px;}.cal-w25{width:300px;}.cal-w26{width:312px;}.cal-w27{width:324px;}.cal-w28{width:336px;}.cal-w29{width:348px;}.cal-w30{width:360px;}.cal-w31{width:372px;}.cal-w32{width:384px;}.cal-w33{width:396px;}.cal-w34{width:408px;}.cal-w35{width:420px;}.cal-w36{width:432px;}.cal-w37{width:444px;}.cal-w38{width:456px;}.cal-w39{width:468px;}.cal-w40{width:480px;}.cal-w41{width:492px;}.cal-w42{width:504px;}.cal-w43{width:516px;}.cal-w44{width:528px;}.cal-w45{width:540px;}.cal-w46{width:552px;}.cal-w47{width:564px;}.cal-w48{width:576px;}.cal-w49{width:588px;}.cal-w50{width:600px;}.cal-w51{width:612px;}.cal-w52{width:624px;}.cal-w53{width:636px;}.cal-w54{width:648px;}.cal-w55{width:660px;}.cal-w56{width:672px;}.cal-w57{width:684px;}.cal-w58{width:696px;}.cal-w59{width:708px;}.cal-w60{width:720px;}.cal-w61{width:732px;}.cal-w62{width:744px;}.cal-w63{width:756px;}.cal-w64{width:768px;}.cal-w65{width:780px;}.cal-w66{width:792px;}.cal-w67{width:804px;}.cal-w68{width:816px;}.cal-w69{width:828px;}.cal-w70{width:840px;}.cal-w71{width:852px;}.cal-w72{width:864px;}.cal-w73{width:876px;}.cal-w74{width:888px;}.cal-w75{width:900px;}.cal-w76{width:912px;}.cal-w77{width:924px;}.cal-w78{width:936px;}.cal-w79{width:948px;}.cal-w80{width:960px;}.cal-w81{width:972px;}.cal-w82{width:984px;}.cal-w83{width:996px;}.cal-w84{width:1008px;}.cal-w85{width:1020px;}.cal-w86{width:1032px;}.cal-w87{width:1044px;}.cal-w88{width:1056px;}.cal-w89{width:1068px;}.cal-w90{width:1080px;}.cal-w91{width:1092px;}.cal-w92{width:1104px;}.cal-w93{width:1116px;}.cal-w94{width:1128px;}.cal-w95{width:1140px;}.cal-w96{width:1152px;}.cal-w97{width:1164px;}.cal-w98{width:1176px;}.cal-w99{width:1188px;}.cal-w100{width:1200px;}.cal-w101{width:1212px;}.cal-w102{width:1224px;}.cal-w103{width:1236px;}.cal-w104{width:1248px;}.cal-w105{width:1260px;}.cal-w106{width:1272px;}.cal-w107{width:1284px;}.cal-w108{width:1296px;}
/* 拡張スロット（可変営業時間用 109-168） */
.cal-x109{left:1308px;}.cal-x110{left:1320px;}.cal-x111{left:1332px;}.cal-x112{left:1344px;}.cal-x113{left:1356px;}.cal-x114{left:1368px;}.cal-x115{left:1380px;}.cal-x116{left:1392px;}.cal-x117{left:1404px;}.cal-x118{left:1416px;}.cal-x119{left:1428px;}.cal-x120{left:1440px;}.cal-x121{left:1452px;}.cal-x122{left:1464px;}.cal-x123{left:1476px;}.cal-x124{left:1488px;}.cal-x125{left:1500px;}.cal-x126{left:1512px;}.cal-x127{left:1524px;}.cal-x128{left:1536px;}.cal-x129{left:1548px;}.cal-x130{left:1560px;}.cal-x131{left:1572px;}.cal-x132{left:1584px;}.cal-x133{left:1596px;}.cal-x134{left:1608px;}.cal-x135{left:1620px;}.cal-x136{left:1632px;}.cal-x137{left:1644px;}.cal-x138{left:1656px;}.cal-x139{left:1668px;}.cal-x140{left:1680px;}.cal-x141{left:1692px;}.cal-x142{left:1704px;}.cal-x143{left:1716px;}.cal-x144{left:1728px;}.cal-x145{left:1740px;}.cal-x146{left:1752px;}.cal-x147{left:1764px;}.cal-x148{left:1776px;}.cal-x149{left:1788px;}.cal-x150{left:1800px;}.cal-x151{left:1812px;}.cal-x152{left:1824px;}.cal-x153{left:1836px;}.cal-x154{left:1848px;}.cal-x155{left:1860px;}.cal-x156{left:1872px;}.cal-x157{left:1884px;}.cal-x158{left:1896px;}.cal-x159{left:1908px;}.cal-x160{left:1920px;}.cal-x161{left:1932px;}.cal-x162{left:1944px;}.cal-x163{left:1956px;}.cal-x164{left:1968px;}.cal-x165{left:1980px;}.cal-x166{left:1992px;}.cal-x167{left:2004px;}.cal-x168{left:2016px;}
.cal-w109{width:1308px;}.cal-w110{width:1320px;}.cal-w111{width:1332px;}.cal-w112{width:1344px;}.cal-w113{width:1356px;}.cal-w114{width:1368px;}.cal-w115{width:1380px;}.cal-w116{width:1392px;}.cal-w117{width:1404px;}.cal-w118{width:1416px;}.cal-w119{width:1428px;}.cal-w120{width:1440px;}.cal-w121{width:1452px;}.cal-w122{width:1464px;}.cal-w123{width:1476px;}.cal-w124{width:1488px;}.cal-w125{width:1500px;}.cal-w126{width:1512px;}.cal-w127{width:1524px;}.cal-w128{width:1536px;}.cal-w129{width:1548px;}.cal-w130{width:1560px;}.cal-w131{width:1572px;}.cal-w132{width:1584px;}.cal-w133{width:1596px;}.cal-w134{width:1608px;}.cal-w135{width:1620px;}.cal-w136{width:1632px;}.cal-w137{width:1644px;}.cal-w138{width:1656px;}.cal-w139{width:1668px;}.cal-w140{width:1680px;}.cal-w141{width:1692px;}.cal-w142{width:1704px;}.cal-w143{width:1716px;}.cal-w144{width:1728px;}.cal-w145{width:1740px;}.cal-w146{width:1752px;}.cal-w147{width:1764px;}.cal-w148{width:1776px;}.cal-w149{width:1788px;}.cal-w150{width:1800px;}.cal-w151{width:1812px;}.cal-w152{width:1824px;}.cal-w153{width:1836px;}.cal-w154{width:1848px;}.cal-w155{width:1860px;}.cal-w156{width:1872px;}.cal-w157{width:1884px;}.cal-w158{width:1896px;}.cal-w159{width:1908px;}.cal-w160{width:1920px;}.cal-w161{width:1932px;}.cal-w162{width:1944px;}.cal-w163{width:1956px;}.cal-w164{width:1968px;}.cal-w165{width:1980px;}.cal-w166{width:1992px;}.cal-w167{width:2004px;}.cal-w168{width:2016px;}


/* VS-11 カレンダー：ヘッダー右側（個人/チーム・メンバー・カレンダー）＋レーン絞り込み */
.cal-head-right { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.view-tg { display:inline-flex; border:1px solid var(--vb-border); border-radius:8px; overflow:hidden; }
.view-tg a { padding:6px 14px; font-size:13px; font-weight:700; background:#fff; color:var(--vb-text); border-right:1px solid var(--vb-border); text-decoration:none; }
.view-tg a:last-child { border-right:none; }
.view-tg a.active { background:var(--vb-primary); color:#fff; }
.cal-mem-wrap { position:relative; }
.cal-mem-cv { font-size:13.5px !important; opacity:.65; }
.cal-mem-pop { display:none; position:absolute; top:calc(100% + 8px); right:0; width:240px; background:#fff; border:1px solid var(--vb-border); border-radius:12px; box-shadow:0 16px 40px rgba(58,53,65,.22); z-index:60; overflow:hidden; }
.cal-mem-pop.show { display:block; }
.cal-mem-h { padding:12px 14px; font-size:13px; font-weight:700; color:var(--vb-heading); border-bottom:1px solid #f1f1f3; }
.cal-mem-body { max-height:280px; overflow-y:auto; padding:6px; }
.cal-mem-item { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px; font-size:14px; color:var(--vb-heading); cursor:pointer; }
.cal-mem-item:hover { background:#f5fafa; }
.cal-mem-item input { width:15px; height:15px; accent-color:var(--vb-primary); }
.lane-hidden { display:none !important; }

/* VS-11 カレンダー：メンバーポップアップの操作（全員/全解除・閉じる/保存・自分固定） */
.cal-mem-tools { display:flex; gap:16px; padding:0 14px 10px; border-bottom:1px solid #f1f1f3; }
.cal-mem-link { color:var(--vb-primary); background:none; border:none; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700; padding:0; }
.cal-mem-link:hover { text-decoration:underline; }
.cal-mem-item.is-me { color:var(--vb-primary-dark); font-weight:700; }
.cal-mem-item input:disabled { accent-color:#b7dfe1; cursor:default; }
.cal-mem-f { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:10px 14px; border-top:1px solid #f1f1f3; background:#fbfbfc; }
.cal-mem-dept { font-size:13px; font-weight:800; letter-spacing:.03em; color:var(--vb-text); padding:8px 8px 3px; }
/* VS-11 カレンダー：イベントのドラッグ移動 */
.ev-drag { cursor:grab; }
.ev.drag { opacity:.85; box-shadow:0 4px 14px rgba(0,0,0,.18); z-index:6; cursor:grabbing; }
/* 端をつかんで長さ変更（リサイズ）用ハンドル */
.ev-rz { position:absolute; top:0; bottom:0; width:8px; z-index:3; cursor:ew-resize; }
.ev-rz-l { left:0; } .ev-rz-r { right:0; }
.ev-drag:hover .ev-rz { background:rgba(64,52,120,.10); }
/* 自然言語の予定登録（むすび）：解釈プレビュー */
.nlp-strip { margin-top:10px; }
.nlp-strip .day-track { min-height:82px; }
.ev.ghost { border-style:dashed; opacity:.92; box-shadow:none; }
.nlp-tbl { table-layout:fixed; width:100%; }
.nlp-tbl td { vertical-align:middle; }
.nlp-tbl th:nth-child(1), .nlp-tbl td:nth-child(1) { width:200px; }   /* 時間（開始–終了） */
.nlp-tbl th:nth-child(3), .nlp-tbl td:nth-child(3) { width:32%; }     /* プロジェクト */
.nlp-tbl th:nth-child(4), .nlp-tbl td:nth-child(4) { width:40px; }    /* 削除 */
.nlp-tbl .form-input, .nlp-tbl .form-select { width:100%; min-width:0; }
.nlp-tbl tr.nlp-warn > td { background:#fff8e1; }
.nlp-proj-cell { min-width:0; }
/* 幅が足りないときは、1行を縦に積んで全部の欄を使えるようにする */
@media (max-width: 900px) {
  .nlp-tbl, .nlp-tbl tbody, .nlp-tbl tr, .nlp-tbl td { display:block; width:auto; }
  .nlp-tbl thead { display:none; }
  .nlp-tbl tr { position:relative; padding:10px 0; border-bottom:1px solid #f0eef6; }
  .nlp-tbl td { padding:3px 0; border:none; }
  .nlp-tbl td:nth-child(1), .nlp-tbl td:nth-child(3) { width:auto; }
  .nlp-tbl td:nth-child(4) { position:absolute; top:8px; right:0; width:auto; }
  .nlp-tbl td:nth-child(2)::before { content:'内容'; display:block; font-size:12.5px; color:var(--vb-text); margin-bottom:3px; }
  .nlp-tbl td:nth-child(3)::before { content:'プロジェクト'; display:block; font-size:12.5px; color:var(--vb-text); margin-bottom:3px; }
}
.nlp-pick { position:relative; }
.nlp-pick.warn > .form-input { background:#fff8e1; }
.nlp-menu { position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:2px; max-height:240px; overflow-y:auto; background:#fff; border:1px solid #e3e3e7; border-radius:8px; box-shadow:0 8px 22px rgba(64,52,120,.16); }
.nlp-opt { padding:7px 10px; font-size:14px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nlp-opt:hover, .nlp-opt.on { background:#f2eefe; }
.nlp-opt.nlp-none { color:var(--vb-text); border-bottom:1px solid #f1f1f3; }
.nlp-sep { border-top:1px dashed #e7e5ec; margin:18px 0 4px; }
/* プロジェクトの依頼内容カテゴリ（ポチポチ付与） */
.pj-tags { display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; }
.pj-cats { display:inline-flex; gap:4px; flex-wrap:wrap; }
.pj-tagbtn { border:1px dashed #cdc9d6; background:#fff; color:#6b6774; border-radius:6px; font-size:13.5px; line-height:1; padding:3px 7px; cursor:pointer; }
.pj-tagbtn:hover { border-color:#0f7f83; color:#0f7f83; }
.pj-pop { position:fixed; z-index:60; width:280px; max-width:92vw; background:#fff; border:1px solid #e3e3e7; border-radius:10px; box-shadow:0 12px 30px rgba(64,52,120,.20); padding:10px; }
.pj-pop-h { font-size:13.5px; font-weight:800; color:var(--vb-text); margin-bottom:8px; }
.pj-pop-chips { display:flex; flex-wrap:wrap; gap:6px; max-height:220px; overflow-y:auto; }
.pj-chip { border:1px solid #e3e3e7; background:#f7f7fb; color:#544f5a; border-radius:14px; font-size:13px; padding:4px 10px; cursor:pointer; }
.pj-chip:hover { border-color:#b7dfe1; }
.pj-chip.on { background:#eafaf1; border-color:#b7ecc2; color:#2f8f45; }
.pj-chip.on:before { content:"\2713 "; }
.pj-chip.busy { opacity:.5; pointer-events:none; }
.pj-pop-new { margin-top:8px; }
.pj-pop-new .form-input { width:100%; font-size:13px; padding:6px 8px; }
/* 依頼内容（取引・サービス）タグ */
.svc-tags { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.svc-tagbtn { border:1px dashed #cdc9d6; background:#fff; color:#6b6774; border-radius:6px; font-size:13.5px; line-height:1.4; padding:3px 8px; cursor:pointer; white-space:nowrap; }
.svc-tagbtn:hover { border-color:#0f7f83; color:#0f7f83; }
.svc-pop { position:fixed; z-index:60; width:260px; max-width:92vw; background:#fff; border:1px solid #e3e3e7; border-radius:10px; box-shadow:0 12px 30px rgba(64,52,120,.20); padding:10px; }
.svc-pop-h { font-size:13.5px; font-weight:800; color:var(--vb-text); margin-bottom:8px; }
.svc-pop-list { display:flex; flex-wrap:wrap; gap:6px; max-height:220px; overflow-y:auto; }
.svc-pop-item { border:1px solid #e3e3e7; background:#f7f7fb; color:#544f5a; border-radius:14px; font-size:13px; padding:4px 10px; cursor:pointer; font-family:inherit; text-align:left; }
.svc-pop-item:hover { border-color:#b7dfe1; }
.svc-pop-item.on { background:#eafaf1; border-color:#b7ecc2; color:#2f8f45; }
.svc-pop-new { margin-top:8px; } .svc-pop-new .form-input { width:100%; font-size:13px; padding:6px 8px; }

/* VS-11 数値実績（売上／感謝／企業価値）＋期間トグル */
.nt-toggle { display:inline-flex; border:1px solid #e7e7e8; border-radius:8px; overflow:hidden; }
.nt-toggle button { padding:5px 13px; font-size:13px; font-weight:700; background:#fff; border:none; color:var(--vb-text); cursor:pointer; border-right:1px solid #e7e7e8; font-family:inherit; }
.nt-toggle button:last-child { border-right:none; }
.nt-toggle button.active { background:var(--vb-primary); color:#fff; }
.va-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.va-card { border:1px solid #eee; border-radius:12px; padding:14px 16px; }
.va-card.sales { background:#fff6f2; border-color:#ffdccb; }
.va-card.thanks { background:#fff5fa; border-color:#f6cfe3; }
.va-card.value { background:#f0f7ff; border-color:#cfe4fb; }
.va-card.soon { background:#f7f7fa; border-color:#ececf1; }
.va-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.va-h { font-size:14px; font-weight:800; color:#544f5a; display:flex; flex-direction:column; gap:2px; }
.va-tt { display:inline-flex; align-items:center; gap:6px; }
.va-ic { font-size:17px; line-height:1; }
.va-card.sales .va-ic { color:#f7864f; }
.va-card.thanks .va-ic { color:#e0518d; }
.va-card.value .va-ic { color:#4a95df; }
.va-card.soon .va-ic, .va-card.soon .va-tt, .va-card.soon .va-num { color:var(--vb-text); }
.va-cap { font-size:13px; font-weight:500; color:var(--vb-text); }
.va-num { font-size:23px; font-weight:800; color:#544f5a; text-align:right; white-space:nowrap; line-height:1.05; flex-shrink:0; }
.va-u { font-size:13px; font-weight:700; color:var(--vb-text); margin-left:5px; }
.va-subrow { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; }
.va-sub { font-size:13px; color:#6f6b76; font-weight:600; }
.va-link { font-size:13.5px; font-weight:700; color:var(--vb-primary); text-decoration:none; white-space:nowrap; }
.va-link:hover { text-decoration:underline; }
.va-links { display:inline-flex; align-items:baseline; gap:14px; white-space:nowrap; }
.va-bar { height:8px; background:#fff; border-radius:5px; overflow:hidden; border:1px solid rgba(0,0,0,.05); }
.va-bar i { display:block; height:100%; border-radius:5px; transition:width .5s cubic-bezier(.2,.85,.25,1); }
.va-card.sales  .va-bar i { background:linear-gradient(90deg,#ffbf8a,#f7864f); }
.va-card.thanks .va-bar i { background:linear-gradient(90deg,#fa97c6,#e0518d); }
.va-card.value  .va-bar i { background:linear-gradient(90deg,#84b9f6,#4a95df); }
.va-card.soon   .va-bar i { background:#dcdae1; }
.va-soon-tag { font-size:13px; font-weight:700; color:var(--vb-text); background:#eceaf1; border-radius:20px; padding:2px 9px; white-space:nowrap; }
@media(max-width:820px){ .va-grid { grid-template-columns:1fr; } .va-subrow { flex-wrap:wrap; } .va-links { margin-left:auto; } }
/* VS-11 カレンダー下 3バンド（今日のタスク／対応待ち／手が空いたら） */
.tl-todos { border-top:1px solid #f1f1f3; margin-top:16px; padding-top:14px; }
.todo-row { display:flex; flex-wrap:wrap; gap:7px; }
#todoRow { margin-bottom:20px; }
.todo { display:inline-flex; align-items:center; gap:7px; border:1px solid #e7e7e8; background:#fff; border-radius:9px; padding:7px 11px; font-size:13px; font-weight:600; color:#544f5a; cursor:pointer; transition:.15s; }
.todo:hover { background:#f5fafa; }
.todo input { width:16px; height:16px; accent-color:#0f7f83; cursor:pointer; flex-shrink:0; }
/* 完了の取り消し線はタスク名と時刻だけ（サブ行の案件名には付けない）。.tx は .todo-main の中にあり input の隣ではないので :has で拾う */
.todo:has(input:checked) .tx, .todo:has(input:checked) .todo-tm { text-decoration:line-through; color:var(--vb-text); }
/* チップの中身：タスク名の下に「取引先 ・ 案件 › サブPJ」を小さく添える。長くてもタスク名より横に太らないよう幅を切る */
.todo-row .todo { max-width:100%; }   /* 狭い画面でサブ行ごとカードからはみ出さないよう、チップは行の幅で止めて中で省略する */
.todo-main { display:flex; flex-direction:column; min-width:0; gap:1px; }
.todo-sub { max-width:300px; }
.todo.done, .todo:has(input:checked) { opacity:.6; }
.todo-tm { color:#0f7f83; font-weight:700; margin-right:2px; font-variant-numeric:tabular-nums; }
.todo.float { border-style:dashed; border-color:#d8d5dc; }
.todo .go { border:none; background:#0f7f83; color:#fff; font-size:13px; font-weight:700; padding:3px 9px; border-radius:7px; cursor:pointer; font-family:inherit; flex-shrink:0; }
.todo .go:hover { background:#0b6a6d; }
.todo .go:disabled { opacity:.5; cursor:default; }
.todo-sec { font-size:13px; font-weight:700; color:#7c7a80; margin:14px 0 8px; display:flex; align-items:center; gap:8px; }
.todo-cnt { background:#e6f4f5; color:#0b6a6d; font-size:13px; font-weight:700; padding:1px 8px; border-radius:10px; }
.pool-modes { margin-left:auto; display:inline-flex; border:1px solid #e5e1ec; border-radius:8px; overflow:hidden; flex-shrink:0; }
.pool-mode { border:0; background:#fff; color:#7c7a80; font-size:13.5px; font-weight:700; padding:3px 10px; cursor:pointer; white-space:nowrap; }
.pool-mode.active { background:#0b6a6d; color:#fff; }
.todo-actions { display:contents; }
/* 手が空いたら：1件＝1行の行リスト（画面幅で2〜3列）。チップ用の .todo を .todo-row.pool 配下だけ行に組み替える。
   担当者別ビューが作る行も .todo-row.pool なので同じ見た目になる */
.todo-row.pool { display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); gap:6px 12px; }
.todo-row.pool .todo { display:flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; border:1px solid #ececef; border-left:3px solid #d8d5dc; border-radius:9px; background:#fff; font-weight:600; cursor:pointer; min-width:0; }
.todo-row.pool .todo.pri-hi { border-left-color:#e0474c; }
.todo-row.pool .todo.pri-md { border-left-color:#e8b84a; }
.todo-row.pool .todo.pri-lo { border-left-color:#d8d5dc; }
.todo-row.pool .todo:hover { background:#f5fafa; border-color:#b7dfe1; }
.todo-row.pool .todo.pri-hi:hover { border-left-color:#e0474c; }
.todo-row.pool .todo.pri-md:hover { border-left-color:#e8b84a; }
.todo-row.pool .todo.is-sug { background:#f0f8f8; border-color:#b7dfe1; }
.todo-row.pool .todo.hot { border-color:#0f7f83; }
.pool-main { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; gap:1px; }
.pool-main .tx { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#3a3541; }
.pool-sub, .todo-sub { font-size:12px; font-weight:400; color:#8a8790; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pool-sug { font-size:11px; font-weight:700; color:#0b6a6d; background:#e6f4f5; padding:1px 7px; border-radius:6px; white-space:nowrap; }
.pool-who { width:22px; height:22px; border-radius:50%; background:#e6f4f5; color:#0b6a6d; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.pool-who.is-ai { background:#eef0f3; color:#5f6368; font-size:10px; }
.pool-who.is-none { background:#fff; border:1px dashed #cfcdd6; color:#b0aeb8; }
.pool-byuser .pool-who { display:none; }   /* 担当者別では見出しに担当が出るので二重に出さない */
.todo-row.pool .todo-actions { display:inline-flex; gap:6px; }
.todo-row.pool .todo .go { background:#fff; color:#0f7f83; border:1px solid #b7dfe1; font-size:12.5px; padding:3px 9px; min-height:28px; border-radius:7px; white-space:nowrap; }
.todo-row.pool .todo .go[data-edit] { color:#8a8790; border-color:#e3e1e8; width:28px; padding:0; }
.todo-row.pool .todo .go[data-edit]:hover { color:#0f7f83; border-color:#b7dfe1; background:#f5fafa; }
.todo-row.pool .todo .go:not([data-edit]):hover, .todo-row.pool .todo .go:not([data-edit]):focus-visible { background:#0f7f83; color:#fff; border-color:#0f7f83; }   /* ボタン自体に乗せたときだけ濃くする（行のホバーでは変えない） */
.todo-row.pool .todo .go:disabled { opacity:.5; }
.pool-more-btn { grid-column:1 / -1; justify-self:start; border:0; background:none; color:#0f7f83; font-size:13px; font-weight:700; cursor:pointer; padding:4px 2px; font-family:inherit; }
.pool-more-btn:hover { text-decoration:underline; }
#poolRow:not(.show-all) .pool-more { display:none; }
#poolRow.show-all .pool-more-btn { display:none; }
/* スマホでは「まとめて/担当者別」がタイトルと同じ行に収まりきらず1文字ずつ折り返すので、タイトル下の行にまとめて出す。
   手が空いたらの行は1列にして、ボタン群を下段右寄せにしタスク名・取引先名を読みやすくする */
@media (max-width:640px) {
  .todo-sec { flex-wrap:wrap; row-gap:6px; }
  .todo-sec .pool-modes { margin-left:0; }
  .todo-row.pool { grid-template-columns:1fr; }
  .todo-row.pool .todo { flex-wrap:wrap; row-gap:6px; }
  .todo-row.pool .pool-main { flex:1 1 100%; }              /* 1段目：タスク名＋サブ行 */
  .todo-row.pool .todo-actions { margin-left:auto; }         /* 2段目：バッジ・担当は左、ボタンは右 */
}
.pool-ugroup { margin-bottom:10px; }
.pool-uhead { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#0b6a6d; margin:8px 0 6px; }
.pool-uhead .muted { color:var(--vb-text); font-weight:600; }
.pool-uava { width:20px; height:20px; border-radius:50%; background:#e6f4f5; color:#0b6a6d; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.todo-add { border:1px dashed #b7dfe1; color:#0f7f83; background:#fff; border-radius:9px; padding:7px 11px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.todo-add:hover { background:#e6f4f5; }
.todo-add.alt { border-color:#d8d5dc; color:#7c7a80; }
/* 予定登録アシスタント：AIが動くのでグラデーション。白文字の上なのでアイコンも白にする */
.todo-add.ai { border:1px solid transparent; background:var(--vb-grad); color:#fff; box-shadow:0 2px 8px rgba(15,127,131,.24); }
.todo-add.ai:hover { background:var(--vb-grad); box-shadow:0 4px 12px rgba(15,127,131,.36); }
.mini.cl { background:#eaf1fb; color:#3f6ea8; font-size:11.5px; }
/* 対応待ち（inbox） */
.inbox-band { background:#fef6ee; border:1px solid #f6e6d6; border-radius:12px; padding:9px 12px 11px; margin-bottom:20px; }
.ib-band-h { font-size:13.5px; font-weight:800; color:#c07a3a; display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.ib-band-note { font-weight:500; color:#c3a68f; font-size:13px; }
.ins-row { display:flex; gap:10px; flex-wrap:wrap; }
.inbox { position:relative; display:inline-flex; align-items:center; gap:7px; border:1px solid #e7e7e8; background:#fff; border-radius:9px; padding:7px 11px; font-size:13px; font-weight:600; color:#544f5a; text-decoration:none; transition:.15s; }
.inbox:hover { border-color:#0f7f83; background:#f5fafa; }
.ib-c { font-size:13px; font-weight:800; color:#fff; background:#0f7f83; border-radius:10px; padding:0 7px; min-width:18px; text-align:center; }
.inbox.i-msg .ib-c, .inbox.i-late .ib-c { background:#ff4c51; }
.inbox.i-ai .ib-c { background:#0b6a6d; }
/* 対応待ちチップのホバー内容（中身プレビュー） */
.ib-tip { display:none; position:absolute; bottom:100%; margin-bottom:8px; left:0; width:264px; max-width:78vw; background:#fff; color:#544f5a; border:1px solid #ecebf3; border-radius:10px; padding:10px 12px; font-size:13.5px; font-weight:400; z-index:40; box-shadow:0 12px 30px rgba(64,52,120,.18); text-align:left; white-space:normal; }
/* チップとポップアップの隙間を透明ブリッジで埋め、移動中に閉じないようにする */
.ib-tip::after { content:""; position:absolute; top:100%; left:0; right:0; height:10px; }
.inbox:hover .ib-tip { display:block; }
.ib-tip b { display:block; font-weight:700; margin-bottom:6px; font-size:13.5px; color:#0f7f83; }
.ib-tip .tl { display:block; padding:4px 0; border-top:1px solid #f1f0f6; }
.ib-tip .tl:first-of-type { border-top:none; }
.ib-tip .tl em { display:block; font-style:normal; color:var(--vb-text); font-size:13px; margin-top:1px; }
.pri-p { font-size:11.5px; font-weight:800; padding:1px 6px; border-radius:6px; }
.pri-p.hi { background:#ffeef0; color:#d32f34; }
.pri-p.md { background:#fff4d9; color:#a06d00; }
.pri-p.lo { background:#eef0f3; color:var(--vb-text); }
/* VS-11 カレンダー：レーン高さ（段積み行数）とイベントの段位置 */
.cal-rows-1 { --cal-rows:1; }
.cal-rows-2 { --cal-rows:2; }
.cal-rows-3 { --cal-rows:3; }
.cal-rows-4 { --cal-rows:4; }
.cal-rows-5 { --cal-rows:5; }
.cal-rows-6 { --cal-rows:6; }
.cal-rows-7 { --cal-rows:7; }
.cal-rows-8 { --cal-rows:8; }
.cal-rows-9 { --cal-rows:9; }
.cal-rows-10 { --cal-rows:10; }
.cal-rows-11 { --cal-rows:11; }
.cal-rows-12 { --cal-rows:12; }
.cal-top-0 { --cal-row:0; }
.cal-top-1 { --cal-row:1; }
.cal-top-2 { --cal-row:2; }
.cal-top-3 { --cal-row:3; }
.cal-top-4 { --cal-row:4; }
.cal-top-5 { --cal-row:5; }
.cal-top-6 { --cal-row:6; }
.cal-top-7 { --cal-row:7; }
.cal-top-8 { --cal-row:8; }
.cal-top-9 { --cal-row:9; }
.cal-top-10 { --cal-row:10; }
.cal-top-11 { --cal-row:11; }
/* 部署管理：色ドット・インライン削除フォーム */
.dept-dot { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.dib { display:inline-block; }
/* VS-11 手が空いたら：完了後に先頭タスクを点滅サジェスト */
.todo.hot { border-color:#0f7f83; animation:hotpulse 1.1s ease-in-out 3; }
@keyframes hotpulse { 0%,100%{ box-shadow:0 0 0 3px rgba(15,127,131,.12); } 50%{ box-shadow:0 0 0 5px rgba(15,127,131,.32); } }
/* スタッフ アバター（プロフィール画像） */
.staff-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid #b7dfe1; background:#f4f2fb; flex-shrink:0; }
.staff-avatar.sm { width:56px; height:56px; }
.staff-avatar.xs { width:30px; height:30px; border-width:1.5px; }
.staff-head { display:flex; align-items:center; gap:14px; }
.avatar-edit { display:flex; align-items:center; gap:14px; }
.avatar-edit > div { display:flex; flex-direction:column; gap:5px; }

/* スタッフ詳細（switchworks user-view 相当） */
.page-crumb { font-size:14px; color:var(--vb-text); margin-bottom:12px; }
.page-crumb a { color:var(--vb-primary); text-decoration:none; }
.sv-grid { display:grid; grid-template-columns:minmax(240px,1fr) 1.4fr; gap:22px 28px; align-items:start; }
.sv-perms { grid-column:1 / -1; }
.sv-avatar-wrap { position:relative; width:120px; margin-bottom:16px; }
.sv-avatar-lg { width:120px; height:120px; border-radius:10px; }
.sv-status { position:absolute; right:-6px; bottom:-6px; }
.sv-fields > div { margin-bottom:12px; }
.sv-badge { font-size:13.5px; }
.sv-val { font-size:14px; color:#3a3a3a; margin-top:4px; word-break:break-all; }
.sv-roles { margin-top:18px; }
.sv-roles h5, .sv-radar-col h5, .sv-perms h5 { font-size:14px; font-weight:700; color:var(--vb-heading); margin:0 0 10px; }
.sv-role { font-size:14px; color:#3a3a3a; padding:3px 0; }
.sv-role i { color:var(--vb-primary); margin-right:8px; }
.sv-radar { display:flex; justify-content:center; }
.sv-radar-svg { max-width:100%; height:auto; }
.sv-grid-ring { fill:none; stroke:#eeedf5; stroke-width:1; }
.sv-axis { stroke:#e4e2ee; stroke-width:1; }
.sv-axis-label { font-size:13.5px; fill:var(--vb-text); }
.sv-data-area { fill:rgba(15,127,131,.18); stroke:var(--vb-primary); stroke-width:2; }
.sv-data-dot { fill:var(--vb-primary); }
.sv-legend { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:10px; font-size:13.5px; color:var(--vb-text); }
.sv-legend b { color:var(--vb-primary); }
.sv-perm-tbl th, .sv-perm-tbl td { vertical-align:middle; }
.c-green { color:#2f9e57; }
@media (max-width:760px){ .sv-grid { grid-template-columns:1fr; } }
img.ll-av { object-fit:cover; border:1px solid #b7dfe1; }
/* ===== VS-09 売上ダッシュボード ===== */
.c-info { color:#16b1ff; } .unit { font-size:14px; color:var(--vb-text); font-weight:400; }
.c-green-bg { background:#56ca00; } .c-info-bg { background:#16b1ff; } .c-purple-bg { background:#0f7f83; } .c-amber-bg { background:#ffb400; }
.text-right { text-align:right; }
.ml-auto { margin-left:auto; }
.linklike { background:none; border:none; color:#0f7f83; font-weight:700; cursor:pointer; font-family:inherit; padding:0; font-size:inherit; }
.vp-2col { display:grid; grid-template-columns:1.1fr 1fr; gap:16px; align-items:start; }
@media(max-width:900px){ .vp-2col { grid-template-columns:1fr; } }
.dot { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:middle; margin-right:5px; }
.dot-uketoku { background:#0f7f83; } .dot-unyo { background:#16b1ff; } .dot-spot { background:#ffb400; }
/* タブ */
.sales-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.sales-tab { font-size:14px; font-weight:600; color:var(--vb-text); padding:8px 16px; border-radius:8px; background:#fff; border:1px solid #e7e7e8; transition:all .15s; cursor:pointer; font-family:inherit; }
.sales-tab:hover { border-color:#0f7f83; color:#0f7f83; }
.sales-tab.active { background:#0f7f83; color:#fff; border-color:#0f7f83; }
.sales-section { display:none; } .sales-section.active { display:block; }
/* KPI5 */
.kpi5 { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px; }
@media(max-width:900px){ .kpi5 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* 目標プログレス */
.target-prog { margin-bottom:14px; }
.target-prog .row-between { margin-bottom:5px; font-size:13px; }
.prog-track { height:10px; background:#e7e7e8; border-radius:5px; overflow:hidden; }
.prog-fill { height:100%; border-radius:5px; }
/* 積み上げ棒グラフ */
.chart-area { padding-top:8px; }
.bars { display:flex; align-items:flex-end; gap:16px; height:190px; border-bottom:2px solid #e7e7e8; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.stack { width:60%; min-width:26px; display:flex; flex-direction:column-reverse; border-radius:4px 4px 0 0; overflow:hidden; }
.seg { width:100%; }
.seg.uketoku { background:#0f7f83; } .seg.unyo { background:#16b1ff; } .seg.spot { background:#ffb400; }
/* キャプション/月ラベルはバー領域の外（別行）。＝バー高さ・目標線を同じ 0 基準で測るため。 */
.bar-caps { display:flex; gap:16px; margin-top:6px; }
.bar-capcol { flex:1; display:flex; flex-direction:column; align-items:center; }
.bar-cap { font-size:13px; color:#544f5a; font-weight:700; text-align:center; }
.bar-lab { font-size:13.5px; color:var(--vb-text); margin-top:2px; }
.bar-lab.cur { color:#0f7f83; font-weight:700; }
.legend-row { display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-size:13px; color:#544f5a; }
/* フォーキャスト */
.fc-bar { display:flex; height:34px; border-radius:8px; overflow:hidden; background:#f4f5fa; }
.fc-seg { display:flex; align-items:center; justify-content:center; color:#fff; font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; }
.fc-seg.confirmed { background:#56ca00; } .fc-seg.deal { background:#0f7f83; }
.fc-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; margin-top:12px; align-items:center; }
.fc-legend .it { display:flex; align-items:center; gap:6px; color:#544f5a; }
.fc-legend .sw { width:12px; height:12px; border-radius:3px; }
.sw-confirmed { background:#56ca00; } .sw-deal { background:#0f7f83; }
/* カンバン */
.kanban { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
@media(max-width:900px){ .kanban { grid-template-columns:1fr 1fr; } }
.kb-col { background:#f4f5fa; border-radius:10px; padding:10px; }
.kb-head { font-size:13px; font-weight:700; color:#544f5a; margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; }
.kb-head .cnt { background:#fff; border:1px solid #e7e7e8; border-radius:10px; font-size:13px; padding:1px 7px; color:var(--vb-text); }
.kb-sum { font-size:13.5px; color:var(--vb-text); margin-bottom:8px; }
.deal-card { background:#fff; border:1px solid #e7e7e8; border-radius:8px; padding:9px 10px; margin-bottom:7px; box-shadow:0 1px 2px rgba(58,53,65,.05); }
.deal-card .co { font-size:13px; color:var(--vb-text); }
.deal-card .nm { font-size:13px; font-weight:600; color:#544f5a; margin:2px 0 5px; }
.deal-card .mt { display:flex; justify-content:space-between; align-items:center; font-size:13.5px; }
.deal-prog { height:4px; background:#e7e7e8; border-radius:2px; margin-top:6px; overflow:hidden; }
.deal-prog i { display:block; height:100%; border-radius:2px; }
/* 粗利バッジ・構成・ランキング */
.gp-badge { font-size:13.5px; font-weight:700; padding:2px 8px; border-radius:10px; }
.gp-hi { background:#e6f7d9; color:#56ca00; } .gp-mid { background:#fff4d9; color:#a06d00; } .gp-lo { background:#ffe4e5; color:#ff4c51; }
.neg { color:#ff4c51; } .pos { color:#56ca00; font-weight:700; }
.comp-row { margin-bottom:12px; }
.comp-row .lb { display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; }
.comp-track { height:8px; background:#e7e7e8; border-radius:4px; overflow:hidden; }
.comp-track i { display:block; height:100%; border-radius:4px; }
.rank-item { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #f4f5fa; }
.rank-item:last-child { border-bottom:none; }
.rank-badge { width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:700; background:#f4f5fa; color:var(--vb-text); flex-shrink:0; }
.rank-badge.g1 { background:#fff4d9; color:#a06d00; } .rank-badge.g2 { background:#eef0f2; color:#6f6b76; } .rank-badge.g3 { background:#ffe6d1; color:#e07b39; }
/* 目標設定グリッド */
.mgt-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:8px; }
@media(max-width:700px){ .mgt-grid { grid-template-columns:repeat(2,1fr); } }
.mgt-input { display:flex; flex-direction:column; gap:4px; }
.mgt-input .m { font-size:13px; font-weight:700; color:var(--vb-text); }
/* ===== VS-09 追加（フル対応：期間/目標ライン/統合パイプライン/コスト/価格） ===== */
/* 位置ユーティリティ（目標ライン等） */
.vac-b-0 { bottom:0%; } .vac-l-0 { left:0%; }
.vac-b-5 { bottom:5%; } .vac-l-5 { left:5%; }
.vac-b-10 { bottom:10%; } .vac-l-10 { left:10%; }
.vac-b-15 { bottom:15%; } .vac-l-15 { left:15%; }
.vac-b-20 { bottom:20%; } .vac-l-20 { left:20%; }
.vac-b-25 { bottom:25%; } .vac-l-25 { left:25%; }
.vac-b-30 { bottom:30%; } .vac-l-30 { left:30%; }
.vac-b-35 { bottom:35%; } .vac-l-35 { left:35%; }
.vac-b-40 { bottom:40%; } .vac-l-40 { left:40%; }
.vac-b-45 { bottom:45%; } .vac-l-45 { left:45%; }
.vac-b-50 { bottom:50%; } .vac-l-50 { left:50%; }
.vac-b-55 { bottom:55%; } .vac-l-55 { left:55%; }
.vac-b-60 { bottom:60%; } .vac-l-60 { left:60%; }
.vac-b-65 { bottom:65%; } .vac-l-65 { left:65%; }
.vac-b-70 { bottom:70%; } .vac-l-70 { left:70%; }
.vac-b-75 { bottom:75%; } .vac-l-75 { left:75%; }
.vac-b-80 { bottom:80%; } .vac-l-80 { left:80%; }
.vac-b-85 { bottom:85%; } .vac-l-85 { left:85%; }
.vac-b-90 { bottom:90%; } .vac-l-90 { left:90%; }
.vac-b-95 { bottom:95%; } .vac-l-95 { left:95%; }
.vac-b-100 { bottom:100%; } .vac-l-100 { left:100%; }
/* 1%刻み（棒グラフ・目標線の精度用。5%刻みと重複するが同値で無害） */
.vac-h-1 { height:1%; } .vac-h-2 { height:2%; } .vac-h-3 { height:3%; } .vac-h-4 { height:4%; } .vac-h-6 { height:6%; } .vac-h-7 { height:7%; } .vac-h-8 { height:8%; } .vac-h-9 { height:9%; } .vac-h-11 { height:11%; } .vac-h-12 { height:12%; } .vac-h-13 { height:13%; } .vac-h-14 { height:14%; } .vac-h-16 { height:16%; } .vac-h-17 { height:17%; } .vac-h-18 { height:18%; } .vac-h-19 { height:19%; } .vac-h-21 { height:21%; } .vac-h-22 { height:22%; } .vac-h-23 { height:23%; } .vac-h-24 { height:24%; } .vac-h-26 { height:26%; } .vac-h-27 { height:27%; } .vac-h-28 { height:28%; } .vac-h-29 { height:29%; } .vac-h-31 { height:31%; } .vac-h-32 { height:32%; } .vac-h-33 { height:33%; } .vac-h-34 { height:34%; } .vac-h-36 { height:36%; } .vac-h-37 { height:37%; } .vac-h-38 { height:38%; } .vac-h-39 { height:39%; } .vac-h-41 { height:41%; } .vac-h-42 { height:42%; } .vac-h-43 { height:43%; } .vac-h-44 { height:44%; } .vac-h-46 { height:46%; } .vac-h-47 { height:47%; } .vac-h-48 { height:48%; } .vac-h-49 { height:49%; } .vac-h-51 { height:51%; } .vac-h-52 { height:52%; } .vac-h-53 { height:53%; } .vac-h-54 { height:54%; } .vac-h-56 { height:56%; } .vac-h-57 { height:57%; } .vac-h-58 { height:58%; } .vac-h-59 { height:59%; } .vac-h-61 { height:61%; } .vac-h-62 { height:62%; } .vac-h-63 { height:63%; } .vac-h-64 { height:64%; } .vac-h-66 { height:66%; } .vac-h-67 { height:67%; } .vac-h-68 { height:68%; } .vac-h-69 { height:69%; } .vac-h-71 { height:71%; } .vac-h-72 { height:72%; } .vac-h-73 { height:73%; } .vac-h-74 { height:74%; } .vac-h-76 { height:76%; } .vac-h-77 { height:77%; } .vac-h-78 { height:78%; } .vac-h-79 { height:79%; } .vac-h-81 { height:81%; } .vac-h-82 { height:82%; } .vac-h-83 { height:83%; } .vac-h-84 { height:84%; } .vac-h-86 { height:86%; } .vac-h-87 { height:87%; } .vac-h-88 { height:88%; } .vac-h-89 { height:89%; } .vac-h-91 { height:91%; } .vac-h-92 { height:92%; } .vac-h-93 { height:93%; } .vac-h-94 { height:94%; } .vac-h-96 { height:96%; } .vac-h-97 { height:97%; } .vac-h-98 { height:98%; } .vac-h-99 { height:99%; }
.vac-b-1 { bottom:1%; } .vac-b-2 { bottom:2%; } .vac-b-3 { bottom:3%; } .vac-b-4 { bottom:4%; } .vac-b-6 { bottom:6%; } .vac-b-7 { bottom:7%; } .vac-b-8 { bottom:8%; } .vac-b-9 { bottom:9%; } .vac-b-11 { bottom:11%; } .vac-b-12 { bottom:12%; } .vac-b-13 { bottom:13%; } .vac-b-14 { bottom:14%; } .vac-b-16 { bottom:16%; } .vac-b-17 { bottom:17%; } .vac-b-18 { bottom:18%; } .vac-b-19 { bottom:19%; } .vac-b-21 { bottom:21%; } .vac-b-22 { bottom:22%; } .vac-b-23 { bottom:23%; } .vac-b-24 { bottom:24%; } .vac-b-26 { bottom:26%; } .vac-b-27 { bottom:27%; } .vac-b-28 { bottom:28%; } .vac-b-29 { bottom:29%; } .vac-b-31 { bottom:31%; } .vac-b-32 { bottom:32%; } .vac-b-33 { bottom:33%; } .vac-b-34 { bottom:34%; } .vac-b-36 { bottom:36%; } .vac-b-37 { bottom:37%; } .vac-b-38 { bottom:38%; } .vac-b-39 { bottom:39%; } .vac-b-41 { bottom:41%; } .vac-b-42 { bottom:42%; } .vac-b-43 { bottom:43%; } .vac-b-44 { bottom:44%; } .vac-b-46 { bottom:46%; } .vac-b-47 { bottom:47%; } .vac-b-48 { bottom:48%; } .vac-b-49 { bottom:49%; } .vac-b-51 { bottom:51%; } .vac-b-52 { bottom:52%; } .vac-b-53 { bottom:53%; } .vac-b-54 { bottom:54%; } .vac-b-56 { bottom:56%; } .vac-b-57 { bottom:57%; } .vac-b-58 { bottom:58%; } .vac-b-59 { bottom:59%; } .vac-b-61 { bottom:61%; } .vac-b-62 { bottom:62%; } .vac-b-63 { bottom:63%; } .vac-b-64 { bottom:64%; } .vac-b-66 { bottom:66%; } .vac-b-67 { bottom:67%; } .vac-b-68 { bottom:68%; } .vac-b-69 { bottom:69%; } .vac-b-71 { bottom:71%; } .vac-b-72 { bottom:72%; } .vac-b-73 { bottom:73%; } .vac-b-74 { bottom:74%; } .vac-b-76 { bottom:76%; } .vac-b-77 { bottom:77%; } .vac-b-78 { bottom:78%; } .vac-b-79 { bottom:79%; } .vac-b-81 { bottom:81%; } .vac-b-82 { bottom:82%; } .vac-b-83 { bottom:83%; } .vac-b-84 { bottom:84%; } .vac-b-86 { bottom:86%; } .vac-b-87 { bottom:87%; } .vac-b-88 { bottom:88%; } .vac-b-89 { bottom:89%; } .vac-b-91 { bottom:91%; } .vac-b-92 { bottom:92%; } .vac-b-93 { bottom:93%; } .vac-b-94 { bottom:94%; } .vac-b-96 { bottom:96%; } .vac-b-97 { bottom:97%; } .vac-b-98 { bottom:98%; } .vac-b-99 { bottom:99%; }
/* 期間フィルタ */
.period-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.period-tabs { display:inline-flex; border:1px solid #e7e7e8; border-radius:8px; overflow:hidden; }
.period-tabs a { padding:7px 14px; font-size:13px; font-weight:600; background:#fff; color:var(--vb-text); border-right:1px solid #e7e7e8; }
.period-tabs a:last-child { border-right:none; }
.period-tabs a.active { background:#0f7f83; color:#fff; }
/* サブトグル（売上一覧/目標） */
.vtoggle { display:inline-flex; border:1px solid #e7e7e8; border-radius:8px; overflow:hidden; margin-bottom:16px; }
.vtoggle button { padding:7px 16px; font-size:14px; font-weight:600; background:#fff; border:none; color:var(--vb-text); cursor:pointer; border-right:1px solid #e7e7e8; font-family:inherit; }
.vtoggle button:last-child { border-right:none; }
.vtoggle button.active { background:#0f7f83; color:#fff; }
.vtoggle-pane { display:none; } .vtoggle-pane.active { display:block; }
/* 棒グラフ：目標ライン・見込み上乗せ */
.bars { position:relative; }
.target-line { position:absolute; left:0; right:0; border-top:2px dashed #ff4c51; z-index:5; }
.target-line span { position:absolute; right:0; top:-14px; font-size:11.5px; color:#ff4c51; font-weight:700; }
.forecast { width:60%; min-width:26px; background:repeating-linear-gradient(45deg,#b7dfe1,#b7dfe1 4px,#e6f4f5 4px,#e6f4f5 8px); border:1px dashed #b7dfe1; border-bottom:none; border-radius:4px 4px 0 0; }
.bar-cap .fc { color:#0b6a6d; font-weight:600; display:block; }
.dot.dot-fc { background:#b7dfe1; } .dot.dot-tgt { background:#ff4c51; height:2px; border-radius:0; }
/* フォーキャスト：目標ライン・AI層・警告 */
.fc-wrap { position:relative; padding-top:18px; }
.fc-seg.ai { background:#23abaf; color:#0b6a6d; }
.fc-seg.hold { background:#ffb400; }   /* 保留案件（実施ステータス＝保留）の見込み層 */
.fc-target-line { position:absolute; top:14px; bottom:0; width:2px; background:#ff4c51; z-index:5; }
.fc-target-line span { position:absolute; top:-14px; left:0; transform:translateX(-100%); white-space:nowrap; font-size:11.5px; color:#ff4c51; font-weight:700; padding-right:4px; }
.sw-ai { background:#23abaf; }
.sw-hold { background:#ffb400; }
.fc-warn { background:#f5fafa; border:1px solid #b7dfe1; border-radius:8px; padding:10px 12px; margin-top:12px; font-size:13px; color:#544f5a; }
/* 統合パイプライン */
.uk-filter { display:inline-flex; border:1px solid #e7e7e8; border-radius:8px; overflow:hidden; margin-bottom:14px; }
.uk-filter button { padding:6px 16px; font-size:13px; font-weight:600; background:#fff; border:none; color:var(--vb-text); cursor:pointer; border-right:1px solid #e7e7e8; font-family:inherit; }
.uk-filter button:last-child { border-right:none; }
.uk-filter button.active { background:#0f7f83; color:#fff; }
/* タブをリンク（a）でも使えるように。画面をまたぐ切り替えに使う */
.uk-filter a { padding:6px 16px; font-size:13px; font-weight:600; background:#fff; color:var(--vb-text); text-decoration:none; border-right:1px solid #e7e7e8; display:inline-flex; align-items:center; gap:6px; }
.uk-filter a:last-child { border-right:none; }
.uk-filter a:hover { color:#0f7f83; }
.uk-filter a.active { background:#0f7f83; color:#fff; }
/* スタッフ一覧：アバターの右に氏名とメールを2段で（旧バリューボックスと同じ並べ方） */
.sf-person { display:flex; align-items:center; gap:11px; text-decoration:none; }
.sf-person-txt { display:flex; flex-direction:column; min-width:0; }
.sf-person-txt .bold { color:#544f5a; }
.sf-person:hover .bold { color:#0f7f83; }



.uk-board { display:flex; gap:10px; align-items:flex-start; overflow-x:auto; }
.uk-col { flex:1 1 0; min-width:130px; background:#f4f5fa; border-radius:10px; padding:9px; }
.uk-col.hide { display:none; }
/* スマホ幅ではカード数の差で列の高さがバラバラになり余白が目立つため、
   案件一覧の「カンバン」（.pk-board）と同じくグリッドに切り替えて縦積みにする */
@media (max-width:900px){ .uk-board { display:grid; grid-template-columns:repeat(2,1fr); overflow-x:visible; } .uk-col { min-width:0; } }
@media (max-width:560px){ .uk-board { grid-template-columns:1fr; } }
.uk-head { font-size:13.5px; font-weight:700; margin-bottom:3px; display:flex; justify-content:space-between; align-items:center; color:#544f5a; }
.uk-head .c { background:#fff; border:1px solid #e7e7e8; border-radius:10px; font-size:11.5px; padding:0 6px; color:var(--vb-text); }
.uk-sum { font-size:13px; color:var(--vb-text); margin-bottom:7px; }
.uk-card { background:#fff; border:1px solid #e7e7e8; border-radius:7px; padding:8px 9px; margin-bottom:6px; box-shadow:0 1px 2px rgba(58,53,65,.05); }
.uk-card.won { border-left:3px solid #56ca00; }
.uk-card .co { font-size:11.5px; color:var(--vb-text); }
.uk-card .nm { font-size:13.5px; font-weight:600; color:#544f5a; margin:1px 0 4px; }
.uk-card .mt { font-size:13px; color:var(--vb-text); display:flex; justify-content:space-between; align-items:center; gap:6px; }
.uk-card .mt.handoff { color:#0f7f83; font-weight:600; }
a.uk-card { display:block; text-decoration:none; }
a.uk-card:hover { border-color:#0f7f83; box-shadow:0 2px 6px rgba(15,127,131,.14); }
/* 制作側の列は件数の内訳＋抜粋で見せる（案件が多くても縦に伸びないように） */
.uk-chips { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:7px; }
.uk-chip { font-size:11.5px; font-weight:600; background:#fff; border:1px solid #e7e7e8; border-radius:9px; padding:1px 6px; color:var(--vb-text); white-space:nowrap; }
.uk-chip.late { border-color:#ff4c51; color:#ff4c51; }
.uk-chip.soon { border-color:#e07b39; color:#e07b39; }
.uk-note { font-size:11.5px; color:var(--vb-text); margin-bottom:4px; }
.uk-card .mt .due.late { color:#ff4c51; font-weight:700; }
.uk-card .mt .due.soon { color:#e07b39; font-weight:600; }
.uk-more { font-size:11.5px; color:var(--vb-text); text-align:center; padding:3px 0; }
.uk-all { display:block; text-align:center; font-size:13px; font-weight:600; color:#0f7f83; background:#fff; border:1px solid #e7e7e8; border-radius:7px; padding:5px 0; text-decoration:none; }
.uk-all:hover { border-color:#0f7f83; }
/* AI見積が過去の金額と大きく外れているときの注意書き */
.est-warn { font-size:13.5px; line-height:1.6; color:#c0392b; background:#ffeceb; border:1px solid #ffd4d1; border-radius:7px; padding:6px 9px; }

.uk-mini { display:flex; gap:5px; align-items:center; background:#fff; border:1px solid #e7e7e8; border-radius:6px; padding:4px 6px; margin-bottom:4px; text-decoration:none; }
.uk-mini .d { flex:0 0 auto; font-size:11.5px; color:var(--vb-text); white-space:nowrap; }
.uk-mini .d.late { color:#ff4c51; font-weight:700; }
.uk-mini .d.soon { color:#e07b39; font-weight:600; }
.uk-mini .n { font-size:13px; font-weight:600; color:#544f5a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uk-mini:hover { border-color:#0f7f83; }
.uk-link { font-size:11.5px; color:#0f7f83; display:inline-block; margin-top:3px; }
/* コスト・価格・目標カード */
.month-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media(max-width:700px){ .month-grid { grid-template-columns:repeat(2,1fr); } }
.mgt-card { border:1px solid #e7e7e8; border-radius:10px; padding:14px; text-align:center; }
.mgt-card.set { border-left:4px solid #56ca00; }
.mgt-card .m { font-size:13px; color:var(--vb-text); font-weight:600; }
.mgt-card .amt { font-size:16px; font-weight:700; color:#544f5a; margin:6px 0 2px; }
.target-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.target-icon.ti-blue { background:#dcf3ff; color:#16b1ff; } .target-icon.ti-green { background:#e6f7d9; color:#56ca00; } .target-icon.ti-purple { background:#e6f4f5; color:#0b6a6d; }
.stat-card.row-card { display:flex; align-items:center; gap:14px; }
.cat-badge { display:inline-block; font-size:13.5px; font-weight:700; padding:3px 10px; border-radius:12px; background:#dcf3ff; color:#0d8fd6; }
.rate-hi { color:#56ca00; font-weight:700; } .rate-mid { color:#a06d00; font-weight:700; } .rate-lo { color:#ff4c51; font-weight:700; }
.diff-pos { color:#56ca00; font-weight:700; } .diff-neg { color:#ff4c51; font-weight:700; }
.money-pos { color:#56ca00; font-weight:700; } .money-neg { color:#ff4c51; font-weight:700; } .money-prospect { color:#a06d00; font-weight:700; }
.detail-row td { background:#f4f5fa; }
.detail-line { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; font-size:13px; border-bottom:1px dashed #e7e7e8; }
.detail-line:last-child { border-bottom:none; }
/* VS-09 小物 */
.stats-grid.stats-3 { grid-template-columns:repeat(3,1fr); }
.stats-grid.rv-stats { grid-template-columns:repeat(5,1fr); margin-bottom:20px; }
@media (max-width:900px){ .stats-grid.rv-stats { grid-template-columns:repeat(2,1fr); } }
.fs-22 { font-size:22px; }
.data-table tfoot tr.tbl-total td { border-top:2px solid #e7e7e8; }
/* VS-09 コスト管理 2カラム */
.cost-cols { display:grid; grid-template-columns:1fr 2fr; gap:20px; align-items:start; }
@media(max-width:900px){ .cost-cols { grid-template-columns:1fr; } }
.btn-block { width:100%; }
/* VS-09 売上一覧：期間フィルタ＋月内明細展開 */
.list-filter { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.list-filter .form-group { margin-bottom:0; }
.month-row { cursor:pointer; }
.month-row:hover { background:#e6f4f5; }
.month-cv { font-size:13px; color:#c0bec6; margin-left:6px; transition:transform .2s; }
.month-row.open .month-cv { transform:rotate(180deg); }
.month-detail > td { background:#f8f7fc; }
.md-list { list-style:none; margin:0; padding:0; }
.md-item { border-bottom:1px solid #f1f0f6; font-size:14px; }
.md-item:last-child { border-bottom:none; }
.md-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 4px; }
.md-link { text-decoration:none; color:inherit; border-radius:6px; transition:background .12s; }
.md-link:hover { background:#e6f4f5; }
.md-nm { color:#544f5a; min-width:0; }
.md-line1 { font-weight:600; font-size:14.5px; }
.md-cl { color:#0b6a6d; font-weight:700; }
.md-line2 { font-size:14px; color:var(--vb-text); margin-top:2px; }
.md-amt { white-space:nowrap; text-align:right; flex-shrink:0; }
.md-amt > div:first-child { font-weight:700; }
.md-date { font-size:13px; color:var(--vb-text); margin-top:2px; }
/* フィードバック管理（VS 不具合・要望） */
.fb-tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.fb-tabs a { font-size:13.5px; font-weight:700; color:var(--vb-text); padding:7px 14px; border-radius:8px; background:#fff; border:1px solid var(--vb-border); text-decoration:none; }
.fb-tabs a:hover { border-color:#0f7f83; color:#0f7f83; } .fb-tabs a.active { background:#0f7f83; color:#fff; border-color:#0f7f83; }
.fb-tabs a .cnt { background:#fee2e2; color:#dc2626; padding:0 6px; border-radius:8px; font-size:13.5px; margin-left:4px; } .fb-tabs a.active .cnt { background:rgba(255,255,255,.25); color:#fff; }
.fb-list { display:flex; flex-direction:column; gap:12px; }
.fb-item { display:grid; grid-template-columns:1fr auto; gap:16px; background:#fff; border:1px solid var(--vb-border); border-radius:12px; padding:16px 18px; align-items:start; }
.fb-item.done { opacity:.7; }
.fb-item-main { min-width:0; grid-column:1; }
.fb-item-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.fb-tag { font-size:13px; font-weight:800; padding:2px 9px; border-radius:999px; } .fb-tag.bug { background:#fee2e2; color:#b91c1c; } .fb-tag.req { background:#e0f2fe; color:#0369a1; }
.fb-when { font-size:13.5px; color:#94a3b8; } .fb-done-tag { font-size:13px; font-weight:700; color:#059669; background:#d1fae5; padding:2px 8px; border-radius:999px; }
.fb-item-msg { font-size:14px; color:var(--vb-heading); line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.fb-item-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:13.5px; color:#64748b; } .fb-item-meta i { opacity:.7; margin-right:3px; }
.fb-page-link { color:#0e7490; text-decoration:none; } .fb-page-link:hover { text-decoration:underline; }
.fb-ua { font-size:13px; color:#cbd5e1; margin-top:5px; word-break:break-all; }
.fb-shot { grid-column:2; grid-row:1 / span 2; display:block; border:1px solid var(--vb-border); border-radius:8px; overflow:hidden; }
.fb-shot img { display:block; width:180px; height:auto; max-height:140px; object-fit:cover; }
.fb-item-act { grid-column:1; }
.fb-done-btn { display:inline-flex; align-items:center; gap:6px; background:#0f766e; color:#fff; border:none; border-radius:7px; padding:7px 13px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; } .fb-done-btn:hover { background:#0c6378; }
.fb-reopen-btn { display:inline-flex; align-items:center; gap:6px; background:#fff; color:#64748b; border:1px solid var(--vb-border); border-radius:7px; padding:7px 13px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; } .fb-reopen-btn:hover { border-color:#94a3b8; }
@media (max-width:640px){ .fb-item { grid-template-columns:1fr; } .fb-shot { grid-column:1; grid-row:auto; } .fb-shot img { width:100%; max-height:200px; } }
/* VS-11 予定追加モーダル：プロジェクト検索ピッカー */
.cpick { position:relative; }
.cpick-list { position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:20; background:#fff; border:1px solid var(--vb-border); border-radius:8px; box-shadow:0 8px 24px rgba(64,52,120,.16); max-height:240px; overflow:auto; }
.cpick-opt { padding:8px 11px; font-size:14px; cursor:pointer; display:flex; align-items:baseline; gap:8px; border-bottom:1px solid #f4f5fa; }
.cpick-opt:last-child { border-bottom:none; } .cpick-opt:hover { background:#f5fafa; }
.cpick-nm { font-weight:600; color:var(--vb-heading); }
.cpick-cl { font-size:13.5px; color:var(--vb-text); }
.cpick-empty { padding:10px 11px; font-size:13px; color:var(--vb-text); }
.cpick-sel { display:flex; align-items:center; gap:7px; background:#f3f0fb; border:1px solid #b7dfe1; border-radius:8px; padding:8px 11px; font-size:14px; font-weight:600; color:var(--vb-heading); }
.cpick-sel i { color:var(--vb-primary); }
.cpick-sel span { flex:1; }
.cpick-clear { border:none; background:transparent; color:var(--vb-text); cursor:pointer; font-size:14px; }
.cpick-subrow { display:flex; gap:8px; align-items:center; }
.cpick-subrow .form-select { flex:1; }
/* 取引先を選んだときに出る「この取引先の案件をつくる」 */
.cpick-newpj { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:7px; }
.cpick-newpj[hidden] { display:none !important; }
.cpick-newpj .muted { color:#c2384a; }

.cpick-addrow { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.cpick-addrow[hidden] { display:none !important; }  /* display:flex が hidden 属性に勝ってしまうため */
.cpick-addrow2 { display:flex; gap:8px; }
.cpick-addrow2 .form-input { flex:1; min-width:0; }
.cpick-addbtns { display:flex; gap:8px; justify-content:flex-end; }
.cpick-addrow .form-input { flex:1; }
/* 運営：テナント切替（nav） */
.nav-tswitch { display:inline-flex; align-items:center; gap:6px; background:#f3f0fb; border:1px solid #b7dfe1; border-radius:999px; padding:4px 10px; margin-right:6px; }
.nav-tswitch i { color:#0f7f83; font-size:13px; }
.nav-tswitch select { border:none; background:transparent; font-size:13px; font-weight:700; color:#544f5a; font-family:inherit; cursor:pointer; max-width:120px; }
.nav-tswitch select:focus { outline:none; }
@media (max-width:720px){ .nav-tswitch { display:none; } }
/* 売上一覧：月内明細を企業（取引先）ごとにグループ表示 */
.md-group { margin-bottom:12px; }
.md-group:last-child { margin-bottom:0; }
.md-group-h { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:6px 4px; border-bottom:2px solid #b7dfe1; margin-bottom:2px; }
.md-group-nm { font-size:16px; font-weight:800; color:#0b6a6d; }
.md-group-sum { font-size:16px; font-weight:700; white-space:nowrap; }
/* 売上一覧：完了案件はグレーアウト（旧sales準拠） */
.md-item.md-done { opacity:.7; }
.md-item.md-done .md-line1, .md-item.md-done .md-amt > div:first-child { color:#94a3b8 !important; font-weight:600; }
.md-amt > div:first-child { font-size:14px; }

/* ============================================================
   VA-08 エージェント・スタジオ（2ペイン：役割一覧 ＋ 設定パネル）
   ============================================================ */
.ic-agent { color:#0b6a6d; }
.btn-ai .ic-agent, .todo-add.ai .ic-agent { color:#fff; }   /* グラデーション背景の上では濃色が沈んで見えないので白 */

/* VS-02 依頼詳細（2カラム） */
.mb-xs { margin-bottom:6px; }
.c-primary { color:var(--vb-primary); }
.rq-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:start; }
.rq-grid > div { display:flex; flex-direction:column; gap:16px; }
.rq-grid .card { margin:0; }
.rq-body { margin:0; }
.rq-aibox { background:#e6f4f5; border:1px solid #b7dfe1; border-radius:10px; padding:16px; }
.rq-ai-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.rq-note { border:1px dashed #fcd34d; background:#fff8e6; border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.rq-note-meta { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.rq-note-input { min-height:56px; }
.rq-quote td { padding:6px 4px; font-size:14px; }
.rq-quote-total td { border-top:2px solid #e7e7e8; }
.rq-link-row { padding:8px 0; border-bottom:1px solid #f4f5fa; }
.rq-link-row:last-child { border-bottom:none; }
.rq-link-a { color:var(--vb-primary); font-weight:600; font-size:14px; text-decoration:none; }
@media (max-width:900px){ .rq-grid { grid-template-columns:1fr; } .rq-ai-metrics { grid-template-columns:repeat(2,1fr); } }

/* VS-06 お問い合わせ詳細（switchworks applications 相当） */
.mt-xs { margin-top:4px; } .pt-md { padding-top:14px; } .bd-top { border-top:1px solid #eeedf5; }
.iq-hero { background:#fff; border:1px solid #eeedf5; border-radius:12px; padding:18px 20px; margin-bottom:18px; }
.iq-hero-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.iq-title { font-size:19px; font-weight:800; color:var(--vb-heading); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.iq-sub { font-size:13.5px; color:var(--vb-text); margin-top:8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.iq-sub .sep { color:#d5d3da; }
.iq-flow { display:flex; gap:8px; margin-top:18px; }
.iq-step { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.iq-step:not(:last-child)::after { content:""; position:absolute; top:14px; left:calc(50% + 18px); right:calc(-50% + 18px); height:2px; background:#eeedf5; }
.iq-step.done:not(:last-child)::after { background:#0f7f83; }
.iq-circle { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:#f4f2fb; color:var(--vb-text); border:2px solid #eeedf5; z-index:1; }
.iq-step.done .iq-circle { background:#0f7f83; color:#fff; border-color:#0f7f83; }
.iq-step.current .iq-circle { border-color:#0f7f83; color:#0f7f83; background:#f5fafa; }
.iq-step-lbl { font-size:13.5px; color:var(--vb-text); font-weight:600; }
.iq-step.done .iq-step-lbl, .iq-step.current .iq-step-lbl { color:var(--vb-heading); }
.iq-org { display:flex; gap:14px; align-items:flex-start; }
.iq-logo { width:52px; height:52px; border-radius:10px; background:#e6f4f5; color:#0b6a6d; font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.iq-hd { display:flex; gap:6px; }
.iq-hd form { flex:1; }
.iq-hd-btn { width:100%; padding:8px 6px; border:1px solid #eeedf5; border-radius:8px; background:#fff; color:#6f6b76; font-size:13.5px; font-weight:700; cursor:pointer; transition:border-color .12s, background .12s; }
.iq-hd-btn:hover { border-color:var(--vb-primary); }
.iq-hd-btn.on { background:#0f7f83; color:#fff; border-color:#0f7f83; }
.iq-danger { margin-top:14px; padding-top:12px; border-top:1px solid #eeedf5; text-align:center; }
.iq-del { color:var(--vb-danger); }
.iq-ai { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; padding:10px; background:#f5fafa; border:1px solid #b7dfe1; border-radius:8px; }
.iq-ai .form-input { flex:1; min-width:180px; }
.iq-ai #aiMsg { flex-basis:100%; }
.iq-ai > * { min-width:0; max-width:100%; }   /* 中身が伸びて右のボタンを押し出さないように */
.iq-ai .form-select { flex:1 1 100%; }
/* スマホでは縦に積む。ボタンが画面の外に出て押せない、を防ぐ */
@media (max-width:640px) {
  .iq-ai { flex-direction:column; align-items:stretch; }
  .iq-ai .form-input, .iq-ai .form-select { width:100%; flex:none; }
  .iq-ai #aiBtn { width:100%; justify-content:center; }
}
/* 受信メールの添付ファイル（お問い合わせ詳細）。押すとダウンロードされる */
.iq-atts { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.iq-att { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:6px 11px; border:1px solid #eeedf5; border-radius:8px; background:#faf9fd; color:#4b4b4b; font-size:13px; font-weight:600; text-decoration:none; }
.iq-att:hover { border-color:#23abaf; background:#e6f4f5; color:#0b6a6d; }
.iq-att i { color:#0f7f83; }
.iq-att .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; }
.iq-att .sz { color:var(--vb-text); font-weight:500; flex:0 0 auto; }

/* 汎用：危険色（AIコックピット等） */
.c-danger { color:var(--vb-danger); }

.va-lead { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--vb-text); margin-top:4px; flex-wrap:wrap; }
.va-lead .tag { background:#e6f4f5; color:#0b6a6d; font-weight:700; font-size:13.5px; padding:2px 9px; border-radius:20px; }
.va-lead b { color:#0b6a6d; }
/* サマリー */
.sum-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:760px){ .sum-grid { grid-template-columns:repeat(2,1fr); } }
.sm { border:1px solid #eeedf5; border-radius:12px; padding:12px 14px; background:#fff; }
.sm .l { font-size:13.5px; color:var(--vb-text); font-weight:600; }
.sm .v { font-size:24px; font-weight:800; color:#544f5a; line-height:1.1; margin-top:4px; }
.sm .v small { font-size:13px; font-weight:600; color:var(--vb-text); }
.sm.hl .v { color:#0b6a6d; }
.callout { background:linear-gradient(120deg,#f5f1ff,#eef6ff); border:1px solid #b7dfe1; border-radius:12px; padding:14px 16px; font-size:14px; color:#544f5a; line-height:1.7; margin:14px 0 20px; }
.callout b { color:#0b6a6d; }
/* studio layout */
.studio-grid { display:grid; grid-template-columns:340px 1fr; gap:18px; align-items:start; }
@media(max-width:1000px){ .studio-grid { grid-template-columns:1fr; } }
.agent-list { display:flex; flex-direction:column; gap:8px; }
.al-item { border:1px solid #eeedf5; border-radius:12px; padding:11px 12px; display:flex; align-items:center; gap:10px; cursor:pointer; background:#fff; transition:all .12s; width:100%; text-align:left; font-family:inherit; }
.al-item:hover { border-color:#b7dfe1; }
.al-item.active { border-color:#0b6a6d; background:#f5fafa; box-shadow:0 0 0 1px #0b6a6d inset; }
.al-ic { width:38px; height:38px; border-radius:10px; background:#e6f4f5; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; overflow:hidden; }
.al-ic img { width:100%; height:100%; object-fit:cover; }
.al-nm { font-weight:800; font-size:14px; color:#544f5a; }
.al-role { font-size:13.5px; color:var(--vb-text); margin-top:1px; }
.al-meta { margin-left:auto; text-align:right; flex-shrink:0; }
.al-src { font-size:13.5px; font-weight:800; color:#0b6a6d; }
.al-srcl { font-size:11.5px; color:var(--vb-text); }
/* config panel */
.cfg { border:1px solid #eeedf5; border-radius:16px; background:#fff; padding:18px 20px; }
.cfg-panel { display:none; }
.cfg-panel.active { display:block; }
.cfg-head { display:flex; align-items:center; gap:13px; margin-bottom:6px; }
.cfg-ic { width:80px; height:80px; border-radius:18px; background:#e6f4f5; display:flex; align-items:center; justify-content:center; font-size:40px; flex-shrink:0; overflow:hidden; }
.cfg-nm { font-size:19px; font-weight:800; color:#544f5a; }
.cfg-nm .sub { font-size:13px; color:var(--vb-text); font-weight:600; }
.cfg-role { font-size:13px; color:var(--vb-text); margin-top:2px; }
.cfg-head .auto-chip { margin-left:auto; }
.cfg-sec { margin-top:18px; }
.cfg-sec.first { margin-top:0; }
.cfg-sec h4 { font-size:13px; font-weight:800; color:#544f5a; margin:0 0 9px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.cfg-sec h4 .fa-solid { color:#0b6a6d; }
.cfg-sec h4 .hint { font-weight:500; color:var(--vb-text); font-size:13.5px; }
.frow { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media(max-width:640px){ .frow { grid-template-columns:1fr; } }
.fld label { font-size:13.5px; color:var(--vb-text); font-weight:600; display:block; margin-bottom:4px; }
.fld select, .fld input { width:100%; font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid #e7e7e8; border-radius:8px; color:#544f5a; background:#fff; }
.cfg-cost-big { font-size:19px; font-weight:800; color:#0b6a6d; }
.cfg-cost-plain { font-size:14px; color:#544f5a; padding-top:7px; }
.mono-model { font-family:ui-monospace,'SFMono-Regular',Menlo,monospace; font-weight:700; }
.sysp { width:100%; font-family:inherit; font-size:14px; padding:10px 12px; border:1px solid #e7e7e8; border-radius:10px; color:#544f5a; min-height:58px; resize:vertical; line-height:1.6; }
.kgroup { border:1px solid #eef0f3; border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.kgroup .kg-h { font-size:13.5px; font-weight:800; color:#544f5a; margin-bottom:9px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.kgroup.client .kg-h { color:#16b1ff; }
.kgroup.common .kg-h { color:#e0518d; }
.kchips { display:flex; flex-wrap:wrap; gap:7px; }
.kchip { display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:6px 11px; border-radius:20px; border:1px solid #e7e7e8; background:#fff; color:var(--vb-text); cursor:pointer; user-select:none; transition:all .1s; margin:0; }
.kchip .fa-solid { font-size:13px; opacity:0; }
.kchip.on { border-color:#0b6a6d; background:#e6f4f5; color:#0b6a6d; font-weight:700; }
.kchip.on .fa-solid { opacity:1; }
.kchip.client.on { border-color:#16b1ff; background:#e4f4ff; color:#0f83c4; }
.kchip.common.on { border-color:#e0518d; background:#fdeaf3; color:#c23a72; }
.auto-chip { font-size:13.5px; font-weight:800; padding:3px 11px; border-radius:20px; }
.auto-full { background:#e6f7d9; color:#3d9e00; }
.auto-appr { background:#fff4d9; color:#a06d00; }
.auto-draft { background:#dcf3ff; color:#16b1ff; }
.auto-human { background:#f1f2f4; color:var(--vb-text); }
.va-bud-h { display:flex; justify-content:space-between; font-size:13.5px; color:var(--vb-text); margin-bottom:5px; }
.va-budget { height:8px; background:#e6f4f5; border-radius:5px; overflow:hidden; }
.va-budget i { display:block; height:100%; background:linear-gradient(90deg,#0f7f83,#23abaf); }
.cfg-foot { display:flex; align-items:center; gap:10px; margin-top:20px; padding-top:15px; border-top:1px solid #f4f5fa; flex-wrap:wrap; }
.xlink { font-size:13.5px; color:#0b6a6d; font-weight:700; text-decoration:none; }
.xlink:hover { text-decoration:underline; }
.cfg-del { margin-top:10px; }
.cfg-del .btn { color:#ff4c51; }
.cfg-del .btn:hover { background:#fff0f0; color:#ff4c51; }
.mut-note { font-weight:500; color:var(--vb-text); font-size:13.5px; margin-left:6px; }

/* ============================================================
   VA-09 ナレッジベース（共通ナレッジ ＋ クライアント・カルテ）
   ============================================================ */
.kb-tabs { display:flex; gap:6px; margin:18px 0 20px; flex-wrap:wrap; }
.kb-tab { font-size:14px; font-weight:700; color:var(--vb-text); padding:9px 18px; border-radius:9px; background:#fff; border:1px solid #e7e7e8; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-family:inherit; }
.kb-tab.active { background:#0b6a6d; color:#fff; border-color:#0b6a6d; }
.kb-sec { display:none; } .kb-sec.show { display:block; }
.kb-grid { display:grid; grid-template-columns:320px 1fr; gap:18px; align-items:start; }
@media(max-width:1000px){ .kb-grid { grid-template-columns:1fr; } }
.art-list { display:flex; flex-direction:column; gap:7px; }
.art { border:1px solid #eeedf5; border-radius:11px; padding:11px 13px; cursor:pointer; background:#fff; transition:all .12s; width:100%; text-align:left; font-family:inherit; }
.art:hover { border-color:#b7dfe1; }
.art.active { border-color:#0b6a6d; background:#f5fafa; box-shadow:0 0 0 1px #0b6a6d inset; }
.art-t { font-size:14px; font-weight:800; color:#544f5a; }
.art-m { font-size:13px; color:var(--vb-text); margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cat { font-size:13px; font-weight:800; padding:1px 8px; border-radius:10px; }
.cat-design { background:#fdeaf3; color:#c23a72; }
.cat-tech   { background:#dcf3ff; color:#16b1ff; }
.cat-sales  { background:#e6f7d9; color:#3d9e00; }
.cat-mgmt   { background:#e6f4f5; color:#0b6a6d; }
.cat-ops    { background:#fff1e0; color:#e08a1e; }
.reader { border:1px solid #eeedf5; border-radius:16px; background:#fff; padding:20px 22px; }
.rd-panel { display:none; } .rd-panel.active { display:block; }
.rd-h { font-size:19px; font-weight:800; color:#544f5a; }
.rd-sub { font-size:13px; color:var(--vb-text); margin-top:5px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rd-body { font-size:14px; color:#4b4b4b; line-height:1.85; margin-top:16px; white-space:pre-wrap; }
.rd-agents { margin-top:18px; padding-top:15px; border-top:1px solid #f4f5fa; }
.rd-agents .lb { font-size:13.5px; font-weight:800; color:#544f5a; margin-bottom:9px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.rd-agents .lb i { color:#0b6a6d; }
.achip { display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:5px 11px; border-radius:20px; background:#e6f4f5; color:#0b6a6d; font-weight:700; margin:0 6px 6px 0; }
.achip.muted { background:#f1f2f4; color:var(--vb-text); }
/* client karte */
.cl-bar { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.cl-bar select { height:38px; border:1px solid var(--vb-border); border-radius:8px; background:#fff; color:var(--vb-heading); font-size:14px; font-family:inherit; padding:0 12px; min-width:260px; max-width:100%; }
.karte { border:1px solid #eeedf5; border-radius:16px; background:#fff; padding:20px 22px; }
.karte-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.karte-nm { font-size:18px; font-weight:800; color:#544f5a; }
.karte-badge { font-size:13px; font-weight:800; background:#e4f4ff; color:#0f83c4; padding:2px 9px; border-radius:10px; }
.kf-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
@media(max-width:640px){ .kf-grid { grid-template-columns:1fr; } }
.kf { border:1px solid #eef0f3; border-radius:11px; padding:12px 14px; }
.kf-h { font-size:13.5px; font-weight:800; color:#16b1ff; margin-bottom:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.kf-h .achip { font-size:13px; padding:2px 8px; margin:0; }
.kf-b { font-size:14px; color:#4b4b4b; line-height:1.7; white-space:pre-wrap; }
.kf textarea { width:100%; font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid #e7e7e8; border-radius:8px; color:#544f5a; min-height:56px; resize:vertical; line-height:1.6; }

.view-tg { display:inline-flex; border:1px solid #e7e7e8; border-radius:9px; overflow:hidden; }
/* ============================================================
   VA-10 プレイブック（タブ式フロー図 ＋ ステップ編集）
   ============================================================ */
.pb-tabs { display:flex; gap:8px; margin:18px 0; flex-wrap:wrap; }
.pb-tab { font-size:14px; font-weight:700; color:var(--vb-text); padding:9px 16px; border-radius:20px; background:#fff; border:1px solid #e7e7e8; cursor:pointer; text-decoration:none; }
.pb-tab:hover { border-color:#b7dfe1; }
.pb-tab.active { background:#0b6a6d; color:#fff; border-color:#0b6a6d; }
.pb-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#f5fafa; border:1px solid #b7dfe1; border-radius:12px; padding:13px 16px; margin-bottom:18px; }
.pb-bar .nm { font-size:16px; font-weight:800; color:#544f5a; }
.pb-bar .meta { font-size:13px; color:var(--vb-text); margin-top:2px; }
.pb-bar .sp { margin-left:auto; }
/* flow（表示） */
.flow { position:relative; }
.step { display:flex; gap:14px; padding-bottom:14px; }
.rail { flex-shrink:0; width:36px; display:flex; flex-direction:column; align-items:center; }
.rail .no { width:30px; height:30px; border-radius:50%; background:#0b6a6d; color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; z-index:1; }
.rail .ln { flex:1; width:2px; background:#e6f4f5; margin-top:2px; }
.step:last-child .rail .ln { display:none; }
.scard { flex:1; border:1px solid #eeedf5; border-radius:13px; padding:13px 15px; background:#fff; }
.scard-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ag-ic { width:36px; height:36px; border-radius:10px; background:#e6f4f5; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; overflow:hidden; }
.ag-ic img { width:100%; height:100%; object-fit:cover; }
.inq-ava { width:22px; height:22px; border-radius:50%; object-fit:cover; vertical-align:middle; }
.ag-nm { font-size:14px; font-weight:800; color:#544f5a; }
.ag-act { font-size:13px; color:#6f6b76; margin-top:1px; }
.hitl { font-size:13px; font-weight:800; padding:3px 10px; border-radius:20px; margin-left:auto; flex-shrink:0; }
.h-full { background:#e6f7d9; color:#3d9e00; } .h-approve { background:#fff4d9; color:#a06d00; } .h-draft { background:#dcf3ff; color:#16b1ff; } .h-human { background:#f1f2f4; color:var(--vb-text); }
.reads { margin-top:10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.reads .lb { font-size:13px; color:var(--vb-text); font-weight:700; }
.rpill { font-size:13.5px; padding:3px 9px; border-radius:20px; font-weight:600; }
.rpill.cl { background:#e4f4ff; color:#0f83c4; } .rpill.co { background:#fdeaf3; color:#c23a72; }
.pb-callout { background:linear-gradient(120deg,#f5f1ff,#eef6ff); border:1px solid #b7dfe1; border-radius:12px; padding:13px 16px; font-size:13.5px; color:#544f5a; line-height:1.7; margin-top:18px; }
.pb-callout b { color:#0b6a6d; }
/* flow（編集） */
.pbe { border:1px solid #b7dfe1; border-radius:14px; background:#fff; padding:16px 18px; margin-bottom:18px; }
.pbe-step { border:1px solid #eeedf5; border-radius:12px; padding:12px 13px; margin-bottom:10px; background:#fbfaff; }
.pbe-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pbe-no { width:26px; height:26px; border-radius:50%; background:#0b6a6d; color:#fff; font-weight:800; font-size:13px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.pbe-row select, .pbe-row input { font-family:inherit; font-size:14px; padding:7px 9px; border:1px solid #e7e7e8; border-radius:8px; color:#544f5a; background:#fff; }
.pbe-row .pbe-act { flex:1; min-width:160px; }
.pbe-ctl { margin-left:auto; display:inline-flex; gap:4px; }
.pbe-ctl button { background:#f4f5fa; border:none; border-radius:7px; width:28px; height:28px; cursor:pointer; color:var(--vb-text); font-family:inherit; }
.pbe-ctl button:hover { background:#e6f4f5; color:#0b6a6d; }
.pbe-reads { margin-top:9px; display:flex; flex-direction:column; gap:7px; }
.pbe-kg { display:flex; align-items:flex-start; gap:7px; flex-wrap:wrap; }
.pbe-kg .kglb { font-size:13px; font-weight:800; padding-top:5px; flex-shrink:0; }
.pbe-kg.cl .kglb { color:#16b1ff; } .pbe-kg.co .kglb { color:#c23a72; }
.pbe-chip { display:inline-flex; align-items:center; gap:5px; font-size:13.5px; padding:4px 9px; border-radius:16px; border:1px solid #e7e7e8; background:#fff; color:var(--vb-text); cursor:pointer; user-select:none; }
.pbe-chip.on.cl { border-color:#16b1ff; background:#e4f4ff; color:#0f83c4; }
.pbe-chip.on.co { border-color:#e0518d; background:#fdeaf3; color:#c23a72; }
.pbe-add { border:1.5px dashed #b7dfe1; border-radius:12px; padding:11px; text-align:center; color:#0f7f83; font-weight:700; font-size:14px; cursor:pointer; background:#fff; width:100%; font-family:inherit; }
.pbe-add:hover { background:#f5fafa; }

/* ============================================================
   VQ-03 マスキング・パターン設定
   ============================================================ */
.gbar { display:flex; align-items:center; gap:14px; background:linear-gradient(120deg,#f5fafa,#f3f9ff); border:1px solid #b7dfe1; border-radius:14px; padding:15px 18px; margin-bottom:18px; flex-wrap:wrap; }
.gbar .ic { width:44px; height:44px; border-radius:12px; background:#e6f4f5; color:#0b6a6d; display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 44px; }
.gbar .gt { flex:1; min-width:180px; } .gbar .gt b { font-size:14px; color:#3a3541; } .gbar .gt p { font-size:13.5px; color:var(--vb-text); margin:3px 0 0; line-height:1.6; }
.mk-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:18px; align-items:start; }
@media(max-width:960px){ .mk-grid { grid-template-columns:1fr; } }
.mk-card { background:#fff; border:1px solid #eeedf5; border-radius:14px; padding:16px 18px; margin-bottom:18px; }
.mk-card h3 { font-size:14px; font-weight:800; color:#3a3541; margin:0 0 3px; display:flex; align-items:center; gap:8px; }
.mk-card h3 i { color:#0b6a6d; }
.mk-card .sub { font-size:13.5px; color:var(--vb-text); margin-bottom:12px; line-height:1.6; }
.pat { display:flex; align-items:center; gap:12px; border:1px solid #eef0f3; border-radius:11px; padding:11px 13px; margin-bottom:9px; }
.pat .pic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 34px; font-size:15px; }
.pic.name { background:#e4f4ff; color:#0f83c4; } .pic.email { background:#fdeaf3; color:#c23a72; } .pic.phone { background:#e6f7d9; color:#3d9e00; } .pic.address { background:#fff1e0; color:#e08a1e; } .pic.account { background:#ffe4e5; color:#ff4c51; } .pic.company { background:#e6f4f5; color:#0b6a6d; } .pic.custom { background:#eef0f3; color:#6f6b76; }
.pat .pb { flex:1; min-width:0; }
.pat .pn { font-size:14px; font-weight:700; color:#3a3541; }
.pat .pp { font-size:13.5px; color:#6f6b76; font-family:ui-monospace,monospace; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pat .tokv { font-size:13.5px; font-weight:700; color:#0b6a6d; background:#e6f4f5; padding:2px 8px; border-radius:8px; font-family:ui-monospace,monospace; flex:0 0 auto; }
.mask-off .pat { opacity:.5; }
.tester textarea { width:100%; min-height:120px; font-family:inherit; font-size:14px; line-height:1.8; padding:12px 14px; border:1px solid #e7e7e8; border-radius:10px; resize:vertical; color:#333; }
.prev { font-size:13.5px; line-height:1.9; color:#4b4b4b; background:#fff; border:1px dashed #b7dfe1; border-radius:10px; padding:12px 14px; white-space:pre-wrap; margin-top:10px; min-height:60px; }
.ptok { background:#e6f4f5; color:#0b6a6d; font-weight:700; padding:0 4px; border-radius:4px; }
.tpii-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tpii { font-size:13.5px; font-weight:700; padding:2px 9px; border-radius:20px; background:#f2f4f8; color:#6f6b76; }
.sec-note { border:1px solid #b7dfe1; background:#f7f4ff; border-radius:12px; padding:14px 16px; }
.sec-note .srow { display:flex; gap:10px; font-size:13px; color:#4b4560; padding:7px 0; border-bottom:1px solid #b7dfe1; line-height:1.6; }
.sec-note .srow:last-child { border-bottom:none; } .sec-note .srow i { color:#0b6a6d; margin-top:2px; }
.sec-note b { color:#3a3541; }
.crumb { font-size:13px; color:var(--vb-text); margin-bottom:14px; }
.crumb a { color:#0891b2; text-decoration:none; font-weight:700; }
.sw-lg { transform:scale(1.15); }

/* ============================================================
   VA-02 AI自律レベル / HITL設定盤
   ============================================================ */
.lv-full    { --lc:#3d9e00; --lb:#e6f7d9; }
.lv-approve { --lc:#0b6a6d; --lb:#e6f4f5; }
.lv-draft   { --lc:#0d8bd9; --lb:#e5f4ff; }
.lv-human   { --lc:#6b7280; --lb:#eef0f3; }
.lvl-legend { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media(max-width:820px){ .lvl-legend { grid-template-columns:repeat(2,1fr); } }
.lvl-card { border:1px solid transparent; border-radius:12px; padding:12px 14px; background:var(--lb); }
.lvl-card .lh { display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; margin-bottom:5px; color:var(--lc); }
.lvl-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; background:var(--lc); }
.lvl-card .ld { font-size:13.5px; color:var(--vb-text); line-height:1.5; }
.sum-bar { display:flex; height:14px; border-radius:8px; overflow:hidden; margin:6px 0 10px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); background:#f4f5fa; }
.sum-bar span { transition:width .3s; }
.sum-bar span.lv-full { background:var(--lc); } .sum-bar span.lv-approve { background:var(--lc); } .sum-bar span.lv-draft { background:var(--lc); } .sum-bar span.lv-human { background:var(--lc); }
.sum-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color:#544f5a; }
.sum-legend .li { display:inline-flex; align-items:center; gap:6px; }
.sum-auto { font-size:14px; color:#544f5a; }
.sum-auto b { font-size:22px; font-weight:800; color:#0b6a6d; }
.pol-row { display:grid; grid-template-columns:1.5fr auto 1.3fr; gap:16px; align-items:center; padding:14px 4px; border-top:1px solid #f4f5fa; }
.pol-row:first-child { border-top:none; }
@media(max-width:900px){ .pol-row { grid-template-columns:1fr; gap:10px; } }
.pol-name { font-size:14px; font-weight:700; color:#544f5a; display:flex; align-items:center; gap:7px; }
.pol-desc { font-size:13.5px; color:var(--vb-text); margin-top:2px; }
.aseg { display:inline-flex; border:1px solid #e7e7e8; border-radius:9px; overflow:hidden; background:#fff; }
.aseg button { border:none; background:none; padding:6px 11px; font-size:13px; font-weight:700; color:var(--vb-text); cursor:pointer; font-family:inherit; border-right:1px solid #f1f1f3; white-space:nowrap; transition:.12s; }
.aseg button:last-child { border-right:none; }
.aseg button:hover:not(.on) { background:#e6f4f5; }
.aseg button.on { color:#fff; background:var(--lc); }
.pol-extra { min-width:0; }
.thr-lab { font-size:13.5px; color:#6f6b76; font-weight:600; display:flex; justify-content:space-between; align-items:baseline; }
.thr-lab b { color:#0b6a6d; font-size:14px; font-weight:800; }
.thr input[type=range] { width:100%; accent-color:#0f7f83; margin:5px 0 3px; }
.thr-note { font-size:13px; color:var(--vb-text); line-height:1.4; }
.pol-esc { display:flex; align-items:center; gap:7px; }
.pol-esc label { font-size:13.5px; color:var(--vb-text); white-space:nowrap; }
.pol-esc select { flex:1; min-width:0; padding:6px 9px; font-size:13px; font-family:inherit; border:1px solid #e7e7e8; border-radius:8px; color:#544f5a; background:#fff; }
.pol-humanly { font-size:13.5px; color:var(--vb-text); }
.gp-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
@media(max-width:700px){ .gp-grid { grid-template-columns:1fr; } }
.gp-item { display:flex; align-items:flex-start; gap:9px; font-size:14px; color:#544f5a; padding:6px 0; cursor:pointer; }
.gp-item input[type=checkbox] { width:16px; height:16px; accent-color:#0f7f83; margin-top:2px; flex-shrink:0; }
.gp-item .gd { font-size:13.5px; color:var(--vb-text); margin-top:1px; }
.gp-item b { color:#0b6a6d; }
.a-tgl-row { display:flex; align-items:center; gap:12px; font-size:14px; color:#544f5a; margin-top:10px; }

/* ============================================================
   VK-02 取引先詳細（2カラム・サマリーカルテ・成果追跡・フォロー）
   ============================================================ */
.ck-karte-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.ck-karte-chip { display:inline-flex; align-items:center; gap:7px; font-size:13px; background:#f7f6fb; border:1px solid #eeedf5; border-radius:20px; padding:5px 12px; color:#544f5a; }
.ck-karte-chip .k { color:var(--vb-text); font-weight:600; font-size:13.5px; }
.ck-karte-chip .v { font-weight:700; }
.ck-karte-chip .dot { width:8px; height:8px; border-radius:50%; }
.kpi-card { border:1px solid #eeedf5; border-radius:12px; padding:12px 14px; text-decoration:none; display:block; background:#fff; }
.kpi-card .l { font-size:13.5px; color:var(--vb-text); font-weight:600; }
.kpi-card .n { font-size:20px; font-weight:800; color:#544f5a; margin-top:3px; }
.kpi-card .n.neg { color:#ff4c51; } .kpi-card .n.pos { color:#56ca00; } .kpi-card .n.deal { color:#0f7f83; } .kpi-card .n.warn { color:#a06d00; }
.sec-nav { display:flex; flex-wrap:wrap; gap:6px 8px; font-size:13px; margin:6px 0 18px; }
.sec-nav a { color:#6f6b76; text-decoration:none; background:#fff; border:1px solid #e7e7e8; border-radius:20px; padding:4px 12px; font-weight:700; }
.sec-nav a:hover { border-color:#0f7f83; color:#0b6a6d; }
.cl-detail-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start; }
@media(max-width:960px){ .cl-detail-grid { grid-template-columns:1fr; } }
.ck-kvl { margin:0; }
.ck-kvl div { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed #f0f0f4; font-size:14px; }
.ck-kvl div:last-child { border-bottom:none; }
.ck-kvl dt { color:var(--vb-text); margin:0; } .ck-kvl dd { color:#3a3541; margin:0; font-weight:600; text-align:right; word-break:break-all; }
.memo-block { padding:9px 0; border-bottom:1px dashed #f0f0f4; }
.memo-block:last-child { border-bottom:none; }
.memo-block .lb { font-size:13.5px; font-weight:800; color:#0b6a6d; margin-bottom:3px; }
.memo-block .bd { font-size:14px; color:#4b4b4b; line-height:1.7; }
.follow-item { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid #f4f5fa; font-size:14px; }
.follow-item:last-child { border-bottom:none; }
.follow-item.done { opacity:.55; }
.follow-item.done .ft-title { text-decoration:line-through; }
.follow-item .ft-title { flex:1; color:#544f5a; }
.follow-item .ft-due { font-size:13.5px; color:var(--vb-text); white-space:nowrap; }
.follow-item form { margin:0; }
.qa-list { display:flex; flex-direction:column; gap:8px; }
.qa-list a { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:#544f5a; text-decoration:none; border:1px solid #eeedf5; border-radius:9px; padding:9px 12px; }
.qa-list a:hover { border-color:#0f7f83; color:#0b6a6d; background:#e6f4f5; }
.qa-list a i { color:#0f7f83; width:18px; text-align:center; }
.ck-karte-chip .dot { background:#56ca00; }
.inq-item { border:1px solid #ffe08a; background:#fff8e6; border-radius:10px; padding:10px 13px; margin-bottom:8px; }
.inq-item .bold { font-size:14px; }

/* ============================================================
   VK-05 クライアントWiki（2カラム）＋ AIが読むカテゴリ
   ============================================================ */
.client-pills { display:flex; gap:6px; margin-bottom:18px; }
.client-pill { font-size:14px; font-weight:600; color:var(--vb-text); padding:8px 16px; border-radius:20px; background:#fff; border:1px solid #e7e7e8; text-decoration:none; }
.client-pill.active { background:var(--vb-primary); color:#fff; border-color:var(--vb-primary); }
.wiki-grid { display:grid; grid-template-columns:280px 1fr; gap:20px; align-items:start; }
@media(max-width:820px){ .wiki-grid { grid-template-columns:1fr; } }
.wiki-item { padding:11px 13px; border-radius:8px; cursor:pointer; margin-bottom:6px; border:1px solid transparent; width:100%; text-align:left; background:none; font-family:inherit; }
.wiki-item:hover { background:#f4f5fa; }
.wiki-item.active { background:#e6f4f5; border-color:#b7dfe1; }
.wiki-item .t { font-weight:700; font-size:14px; color:#544f5a; }
.wiki-item .d { font-size:13.5px; color:var(--vb-text); margin-top:2px; }
.wiki-panel { display:none; } .wiki-panel.active { display:block; }
.wiki-body { font-size:14px; line-height:1.9; color:#4b4b4b; white-space:pre-wrap; margin-top:12px; }
/* ダッシュボード：手が空いたら候補タスクの詳細ポップアップ */
.todo.float { cursor:pointer; }
.todo.float:hover { background:#f5fafa; }
.todo.float .go { cursor:pointer; }
.task-pop { position:fixed; z-index:70; width:300px; max-width:90vw; background:#fff; border:1px solid #e3e3e7; border-radius:10px; box-shadow:0 12px 30px rgba(64,52,120,.2); padding:12px 14px; }
.task-pop h4 { font-size:14px; font-weight:800; margin:0 0 8px; color:#3a3541; }
.task-pop .row { font-size:13px; color:#544f5a; margin:3px 0; display:flex; gap:6px; }
.task-pop .row b { color:var(--vb-text); font-weight:700; flex:0 0 68px; }
.task-pop .desc { font-size:13px; color:#3a3541; margin-top:8px; white-space:pre-wrap; max-height:160px; overflow:auto; border-top:1px solid #f1f1f3; padding-top:8px; }
.task-pop .foot { margin-top:10px; text-align:right; }
/* ダッシュボード：つむぎのお祝いポップアップ（今やる） */
.tsugi-cheer { position:fixed; inset:0; z-index:200; background:rgba(30,20,50,.45); display:flex; align-items:center; justify-content:center; padding:20px; }
.tsugi-cheer-box { background:#fff; border-radius:18px; padding:26px 28px 22px; max-width:360px; width:100%; text-align:center; box-shadow:0 20px 60px rgba(64,52,120,.35); animation:tsugiPop .3s ease; }
@keyframes tsugiPop { from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }
.tsugi-cheer-img { width:160px; height:160px; border-radius:50%; object-fit:cover; border:4px solid #b7dfe1; box-shadow:0 6px 20px rgba(15,127,131,.25); }
.tsugi-cheer-ava { width:160px; height:160px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:70px; background:#f2eefe; margin:0 auto; }
.tsugi-cheer-name { font-size:14px; font-weight:800; color:#0f7f83; margin-top:14px; }
.tsugi-cheer-msg { font-size:18px; font-weight:800; color:#3a3541; margin:8px 0 18px; }
.mtg-bubble .js-task-detail { cursor:pointer; }
.mtg-bubble .js-task-detail:hover { text-decoration:underline; }
/* 予定登録アシスタント：時間編集 */
.nlp-time { white-space:nowrap; }
.nlp-time input[type=time] { width:88px; display:inline-block; padding:5px 6px; font-size:13px; }

/* VS-01 依頼一覧：モック vs01-requests のデザインに合わせたスコープ付きスタイル（.reqpage 配下のみ） */
.reqpage .kpi6 { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:14px; }
@media(max-width:820px){ .reqpage .kpi6{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:480px){ .reqpage .kpi6{ grid-template-columns:repeat(2,1fr);} }
.reqpage .kpi { border:1px solid #eeedf5; border-radius:10px; padding:10px 12px; background:#fff; transition:all .12s; text-decoration:none; display:block; }
.reqpage .kpi:hover{ border-color:#0f7f83; }
.reqpage .kpi.active{ border-color:#0f7f83; box-shadow:0 0 0 1px #0f7f83 inset; background:#f5fafa; }
.reqpage .kpi .l{ font-size:13.5px; color:var(--vb-text); font-weight:600; }
.reqpage .kpi .n{ font-size:22px; font-weight:800; color:#544f5a; line-height:1.1; margin-top:2px; }
.reqpage .kpi.warn .n{ color:#ff4c51; } .reqpage .kpi.mid .n{ color:#e07b39; }
.reqpage .chan{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; padding:2px 8px; border-radius:20px; }
.reqpage .chan.form{ background:#e4f4ff; color:#0f83c4; } .reqpage .chan.phone{ background:#e6f7d9; color:#3d9e00; } .reqpage .chan.mail{ background:#eef0f3; color:#6f6b76; } .reqpage .chan.sales{ background:#e6f4f5; color:#0b6a6d; }
.reqpage .pri-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.reqpage .pri-high{ background:#ff4c51; } .reqpage .pri-mid{ background:#ffb400; } .reqpage .pri-low{ background:#cbd5e1; } .reqpage .pri-urgent{ background:#ff4c51; box-shadow:0 0 0 3px rgba(255,76,81,.22); }
.reqpage .cattag{ font-size:13px; font-weight:700; padding:1px 7px; border-radius:8px; background:#f4f5fa; color:#6f6b76; }
.reqpage .est{ font-size:11.5px; font-weight:700; padding:1px 6px; border-radius:8px; margin-left:5px; }
.reqpage .est-approx{ background:#eef0f3; color:var(--vb-text); } .reqpage .est-fixed{ background:#e6f7d9; color:#3d9e00; }
.reqpage .linkpj{ font-size:13px; font-weight:700; color:#0b6a6d; text-decoration:none; }
.reqpage .bulkbar{ display:none; align-items:center; gap:10px; background:#2f2b3a; color:#fff; border-radius:10px; padding:10px 16px; margin-bottom:12px; flex-wrap:wrap; }
.reqpage .bulkbar.show{ display:flex; }
.reqpage .bulkbar b{ color:#23abaf; }
.reqpage .bulkbar .form-select{ height:32px; font-size:13px; }
.reqpage .srch{ position:relative; }
.reqpage .srch i{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--vb-text); font-size:13px; }
.reqpage .srch input{ padding-left:30px; width:220px; }
.reqpage .reqrow{ cursor:pointer; } .reqpage .reqrow:hover{ background:#f5fafa; }
.reqpage tr.row-done{ opacity:.5; } .reqpage tr.row-done td strong{ text-decoration:line-through; color:#8a8790; }
.reqpage tr.row-done:hover{ opacity:.72; }
.reqpage .tbl-wrap{ overflow-x:auto; }
.reqpage .req-av{ width:24px; height:24px; border-radius:50%; background:#e6f4f5; color:#0b6a6d; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }

/* 案件別粗利集計：合計行の区切り（vs09 モック準拠） */
.data-table tr.gp-total td { border-top: 2px solid #e7e7e8; }

/* お問い合わせ：複数担当（タグ方式のチップ） */
.iq-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.iq-chip { display:inline-flex; align-items:center; gap:5px; background:#e6f4f5; color:#0b6a6d; border-radius:14px; padding:3px 4px 3px 11px; font-size:13px; font-weight:600; }
.iq-chip-x { border:0; background:rgba(91,63,179,.14); color:#0b6a6d; width:17px; height:17px; border-radius:50%; cursor:pointer; line-height:1; font-size:13px; padding:0; }
.iq-chip-x:hover { background:#0b6a6d; color:#fff; }
.iq-chip .rq-link-a { color:inherit; text-decoration:none; }
.iq-chip .rq-link-a:hover { text-decoration:underline; }
.pj-relreq-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid #f0eef4; font-size:14px; }
.pj-relreq-row:last-child { border-bottom:0; }
.pj-relreq-row .vl-linkpj { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pj-relreq-row .vl-linkpj, .pj-relreq-row .mono, .pj-relreq-row .text-xs { font-size:14px; }

/* 検索できるセレクト（searchable-select.js）— 既存selectをトリガー化 */
.ss-field { display:block; }
.ss-trigger { text-align:left; cursor:pointer; position:relative; padding-right:26px; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:#fff; }
.ss-trigger::after { content:"\25BE"; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#8a8896; font-size:13.5px; pointer-events:none; }
.ss-trigger.ss-empty { color:#9a97a4; }

/* 押せるタグ（売上一覧の請求バッジなど）。押すとその場で切り替わる */
.tag-btn { cursor:pointer; user-select:none; border:1px solid transparent; transition:filter .12s, transform .06s; }
.tag-btn:hover { filter:brightness(.94); }
.tag-btn:active { transform:translateY(1px); }
.tag-btn:focus-visible { outline:2px solid var(--vb-primary); outline-offset:2px; }
.tag-btn.is-busy { opacity:.55; pointer-events:none; }
/* 売上一覧：取引先見出しの右側（まとめて請求済に＋売上合計） */
.md-group-r { display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* hidden 属性は display 指定に負けるので、display を持つ部品では明示的に打ち消す。
   （.btn/.row を hidden で隠しているところが、隠れずに出てしまうため） */
.btn[hidden], .row[hidden], .row-between[hidden] { display:none !important; }

/* ============================================================
   ダッシュボードのプロジェクト進捗ボード（rb-）
   カード＝案件／レーン＝未完了タスク。モック docs/mock/dashboard/vd03 から起こしたもの。
   ============================================================ */
@keyframes rb-pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
@keyframes rb-flow  { 0% { background-position:0 0; } 100% { background-position:28px 0; } }
.rb-live { width:7px; height:7px; border-radius:50%; background:#4cc38a; display:inline-block; flex-shrink:0; animation:rb-pulse 1.3s ease-in-out infinite; }

.rb-switch { display:inline-flex; border:1px solid #e7e7e8; border-radius:8px; overflow:hidden; }
.rb-switch button { padding:7px 14px; font-size:13.5px; font-weight:700; background:#fff; border:none; color:var(--vb-text); cursor:pointer; border-right:1px solid #e7e7e8; font-family:inherit; }
.rb-switch button:last-child { border-right:none; }
.rb-switch button.active { background:#0f7f83; color:#fff; }

.rb-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0 14px; }
.rb-bar .sp { flex:1; }
.rb-seg { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--vb-text); }
.rb-seg select { height:32px; border:1px solid #e7e7e8; border-radius:8px; background:#fff; font-size:14px; font-family:inherit; padding:0 8px; color:#241f31; }
.rb-chip { font-size:13px; font-weight:700; padding:6px 12px; border-radius:16px; border:1px solid #e7e7e8; background:#fff; color:var(--vb-text); cursor:pointer; font-family:inherit; }
.rb-chip.on { background:#e6f4f5; border-color:#0f7f83; color:#0b6a6d; }
.rb-hint { font-size:13.5px; color:var(--vb-text); display:inline-flex; align-items:center; gap:5px; }

/* ボードの要約（押すと、その数字の見え方に切り替わるボタン） */
.rb-top { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 8px; }
.rb-kpi { flex:1; min-width:150px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  background:#fff; border:1px solid #e9e7ef; border-radius:12px; padding:11px 15px; font-family:inherit; cursor:pointer;
  transition:border-color .12s, box-shadow .12s, background .12s; }
.rb-kpi:hover { border-color:#0f7f83; box-shadow:0 2px 8px rgba(15,127,131,.12); }
.rb-kpi.on { background:#e6f4f5; border-color:#0f7f83; }
.rb-kpi .l { font-size:13.5px; color:var(--vb-text); display:flex; align-items:center; gap:5px; }
.rb-kpi .n { font-size:21px; font-weight:800; color:#241f31; line-height:1.2; }
.rb-kpi .n small { font-size:13px; font-weight:700; color:var(--vb-text); }
.rb-kpi .h { font-size:12px; color:#8a8794; line-height:1.4; }
.rb-kpi.warn .n { color:#e0435a; }
.rb-kpi.run .n { color:#1a8a55; }
.rb-kpi.zero .n, .rb-kpi.zero.warn .n, .rb-kpi.zero.run .n { color:#b3b0bb; }   /* 0 は目立たせない */
.rb-kpinote { font-size:12.5px; color:#8a8794; margin:0 0 8px; }

/* カレンダーの上の「この日の見通し」（予定／今日が期限／7日以内／積み残し） */
.cal-glance { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.cg-item { flex:1; min-width:150px; display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid #e9e7ef; border-radius:12px; padding:10px 15px; text-decoration:none; color:inherit; }
a.cg-item { cursor:pointer; transition:border-color .12s, box-shadow .12s; }
a.cg-item:hover { border-color:#0f7f83; box-shadow:0 2px 8px rgba(15,127,131,.12); text-decoration:none; }
.cg-item .l { font-size:13.5px; color:var(--vb-text); display:flex; align-items:center; gap:5px; }
.cg-item .l i { color:#0f7f83; }
.cg-item .n { font-size:21px; font-weight:800; color:#241f31; line-height:1.2; }
.cg-item .n small { font-size:13px; font-weight:700; color:var(--vb-text); }
.cg-item .h { font-size:12px; color:#8a8794; line-height:1.4; }
.cg-item.soon .n { color:#e08a1e; }
.cg-item.warn .n { color:#e0435a; }
.cg-item.warn .l i { color:#e0435a; }
.cg-item.zero .n { color:#b3b0bb; }
.cg-item.zero .l i { color:#b3b0bb; }

.rb-aiby { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:6px; }
.rb-aiby .lb { font-size:13.5px; color:var(--vb-text); }
.rb-aiby .it { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #e9e7ef; border-radius:20px; padding:4px 12px; font-size:13px; color:#5b5764; }
.rb-aiby .it i { color:#1a8a55; }
.rb-aiby .it b { color:#1a8a55; }

.rb-pri { font-size:13px; font-weight:800; padding:2px 7px; border-radius:10px; white-space:nowrap; }
.rb-pri.top  { background:#ffe4e8; color:#c62b41; }
.rb-pri.high { background:#fff0dc; color:#a8620a; }
.rb-pri.mid  { background:#e6f4f5; color:#0b6a6d; }
.rb-pri.low  { background:#f2f1f5; color:#8b8895; }
.rb-stars { font-size:13.5px; color:#e0a800; letter-spacing:-1px; }

.rb-board { display:grid; grid-auto-flow:column; grid-auto-columns:300px; justify-content:start; gap:14px; overflow-x:auto; padding-bottom:10px; align-items:start; }
.rb-col { background:#f7f6fb; border:1px solid #ece9f5; border-radius:12px; padding:10px; min-height:100px; }
.rb-col.over { border-color:#0f7f83; background:#e6f4f5; }
.rb-colh { display:flex; align-items:center; gap:8px; padding:2px 4px 10px; }
.rb-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; background:#cfcbd8; }
.rb-dot.top { background:#e0435a; } .rb-dot.high { background:#e08a1e; }
.rb-dot.mid { background:#0f7f83; } .rb-dot.low { background:#cfcbd8; }
.rb-dot.run { background:#4cc38a; } .rb-dot.done { background:#9fd6b4; }
.rb-colnm { font-size:14px; font-weight:800; color:#241f31; }
.rb-cnt { font-size:13px; font-weight:700; color:var(--vb-text); background:#fff; border:1px solid #e7e7e8; border-radius:10px; padding:1px 8px; }
.rb-empty { font-size:13px; color:var(--vb-text); text-align:center; padding:14px 0; }

.rb-card { background:#fff; border:1px solid #e9e7ef; border-radius:11px; padding:12px 13px 10px; margin-bottom:9px; cursor:pointer; position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(90,70,150,.05); transition:box-shadow .15s, border-color .15s; }
.rb-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#d5d3da; }
.rb-card.pri-top::before  { background:#e0435a; }
.rb-card.pri-high::before { background:#e08a1e; }
.rb-card.pri-mid::before  { background:#0f7f83; }
.rb-card.pri-low::before  { background:#e0dde8; }
.rb-card:hover { border-color:#b7dfe1; box-shadow:0 5px 16px rgba(15,127,131,.14); }
.rb-card.open { border-color:#0f7f83; box-shadow:0 0 0 2px rgba(15,127,131,.18); }
.rb-card.dragging { opacity:.4; }
.rb-card[draggable=true] { cursor:grab; }
.rb-ch { display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; }
.rb-ttl { flex:1; min-width:0; }
.rb-nm { font-size:14px; font-weight:800; color:#241f31; line-height:1.35; }
.rb-cl { font-size:13.5px; color:var(--vb-text); margin-top:1px; }
.rb-pct { font-size:14px; font-weight:800; color:#0b6a6d; white-space:nowrap; }
.rb-tags { display:flex; gap:5px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.rb-total { height:6px; background:#f1eff7; border-radius:3px; overflow:hidden; margin-bottom:10px; }
.rb-total > i { display:block; height:100%; background:linear-gradient(90deg,#0f7f83,#23abaf); }

.rb-lane { display:flex; align-items:center; gap:8px; padding:4px 0; }
.rb-ic { width:20px; height:20px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.rb-ic.me { background:#e6f4f5; color:#0b6a6d; }
.rb-ic.ai { background:#e4f7ed; color:#1a8a55; }
.rb-ic.wait { background:#f2f1f5; color:var(--vb-text); }
.rb-lnm { flex:1; min-width:0; font-size:13px; color:#5b5764; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-lane.wait .rb-lnm { color:var(--vb-text); }
.rb-more { font-size:13.5px; color:var(--vb-text); padding:3px 0 0 28px; }
.rb-cf { display:flex; align-items:center; gap:8px; margin-top:9px; padding-top:8px; border-top:1px solid #f4f2f9; font-size:13.5px; color:var(--vb-text); }
.rb-cf .sp { flex:1; }
.rb-cf b { color:#5b5764; }
.rb-need { font-size:13.5px; font-weight:800; color:#c62b41; background:#ffe9ec; border-radius:10px; padding:2px 8px; }
.rb-open { font-size:13.5px; color:#0f7f83; font-weight:700; }

.rb-detail { margin-top:16px; background:#fff; border:1px solid #b7dfe1; border-radius:14px; overflow:hidden; box-shadow:0 6px 22px rgba(15,127,131,.12); }
.rb-dh { display:flex; align-items:center; gap:10px; padding:12px 16px; background:linear-gradient(90deg,#e6f4f5,#fdfcff); border-bottom:1px solid #f0edf7; flex-wrap:wrap; }
.rb-dh i.fa-diagram-project { color:#0f7f83; }
.rb-dh .ttl { font-size:15px; font-weight:800; color:#241f31; }
.rb-dh .cl { font-size:13px; color:var(--vb-text); }
.rb-dh .sp { flex:1; }
.rb-dh .pct { font-size:14px; font-weight:800; color:#0b6a6d; }
.rb-dclose { border:none; background:transparent; color:var(--vb-text); font-size:15px; cursor:pointer; padding:0 2px; }
.rb-dclose:hover { color:#0f7f83; }
.rb-dbar { height:6px; background:#e6f4f5; }
.rb-dbar > i { display:block; height:100%; background:linear-gradient(90deg,#0f7f83,#23abaf); }
.rb-rlane { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid #f6f5fa; position:relative; }
.rb-rlane:last-child { border-bottom:none; }
.rb-rlane::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; }
.rb-rlane.me::before { background:#0f7f83; } .rb-rlane.ai::before { background:#4cc38a; }
.rb-rlane.wait::before { background:#e3e0ea; } .rb-rlane.need::before { background:#e0435a; }
.rb-who { width:160px; flex-shrink:0; display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:#5b5764; }
.rb-byline { display:block; font-size:13px; font-weight:600; color:var(--vb-text); line-height:1.3; margin-top:1px; }
.rb-rbody { flex:1; min-width:0; }
.rb-rnm { font-size:14px; font-weight:700; color:#241f31; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.rb-step { font-size:13.5px; color:var(--vb-text); margin-top:3px; }
.rb-rside { width:96px; flex-shrink:0; text-align:right; }
.rb-st { font-size:13px; font-weight:800; padding:2px 8px; border-radius:11px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.rb-st.me { background:#e6f4f5; color:#0b6a6d; }
.rb-st.ai { background:#e4f7ed; color:#1a8a55; }
.rb-st.wait { background:#f2f1f5; color:#8b8895; }












.rb-toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px); z-index:60;
  background:#241f31; color:#fff; border-radius:12px; padding:11px 16px; font-size:14px;
  display:flex; align-items:center; gap:14px; box-shadow:0 10px 30px rgba(36,31,49,.28);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; }
.rb-toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.rb-toast b { color:#b7dfe1; }
.rb-toast button { background:transparent; border:1px solid #57506b; color:#fff; border-radius:8px; padding:4px 12px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.rb-toast button:hover { background:#37304a; }

@media (max-width: 720px) {
  .rb-board { grid-auto-columns:88%; }
  /* 担当・状態・完了ボタンを上の段に置き、作業名は下の段いっぱいに使う
     （3列のままだと「完了にする」がはみ出して押しづらい） */
  .rb-rlane { flex-wrap:wrap; gap:8px 10px; }
  .rb-who { width:auto; flex:0 1 auto; min-width:0; }
  .rb-who > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rb-rside { width:auto; flex:1 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
  .rb-rside .rb-doneb { margin-top:0; }
  .rb-rbody { flex:1 1 100%; order:3; }
}

/* 進捗ボード：作業をその場で完了にする／元の画面へ飛ぶ */
.rb-tlink { color:inherit; text-decoration:none; border-bottom:1px dotted #cfcbd8; }
.rb-tlink:hover { color:#0b6a6d; border-bottom-color:#0f7f83; }
.rb-doneb { border:1px solid #d9d5e4; background:#fff; color:#5b5764; border-radius:8px; padding:3px 10px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; margin-top:5px; white-space:nowrap; }
.rb-doneb:hover { border-color:#4cc38a; color:#1a8a55; background:#f5fdf8; }
.rb-doneb:disabled { opacity:.5; cursor:default; }
.rb-st.done { background:#e9f7ef; color:#2f8f5b; }
.rb-rlane.rb-done { opacity:.6; }
.rb-rlane.rb-done .rb-rnm { text-decoration:line-through; }

/* ===== スマホ（≤720px）：見出しと操作ボタンが潰れないようにする =====
   .card-title / .page-header は flex で「見出し｜操作」を左右に置いている。
   折り返しを許していなかったため、幅が足りないと両方が縮み、
   見出しが1文字ずつ改行され、タブは文字が縦積みになって読めなくなっていた。
   足りなければ段を分ける（＝縮めない）ようにする。 */
@media (max-width: 720px) {
  .card-title { flex-wrap: wrap; row-gap: 10px; }
  /* 見出しに添えた注記（「今週のうち9月ぶん」など）は、入らなければ次の行へ。
     そのままだと注記に押されて見出しが途中で割れる */
  .card-title-text { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 2px; }

  .page-header { flex-wrap: wrap; row-gap: 12px; align-items: flex-start; }
  .page-header > :first-child { flex: 1 1 100%; min-width: 0; }

  /* 表示の切り替え（カレンダー／ボード／…、今日／今週／今月）は、
     見出しの下に幅いっぱいで置いて、指で押せる大きさを確保する */
  .nt-toggle { flex: 1 0 100%; display: flex; }
  .nt-toggle button { flex: 1 1 0; min-width: 0; white-space: nowrap; padding: 8px 6px; font-size: 12.5px; }

  /* 表示の切り替えタブは4つ並ぶと文字が入りきらないので、
     ひとつながりの帯をやめて2つずつの札にする（文言を削らずに読める） */
  .rb-switch { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; border: none; overflow: visible; }
  .rb-switch button {
    flex: 1 1 0; min-width: 0; white-space: nowrap;
    border: 1px solid #e7e7e8; border-radius: 8px;
    padding: 9px 6px; font-size: 12.5px;
  }
  .rb-switch button > i { display: none; }   /* 文言だけで分かるのでアイコンは省く */
  /* 「積み残し」は件数バッジぶん文言が長く、他のタブと同じ幅に収まりきらないと
     右端がボタン枠からはみ出て見切れていた（2つずつの札のときも、4つ並びのときも）。
     入らないときは折り返す。 */
  .rb-switch button[data-rbview="back"] { white-space: normal; }

  /* 画面の切り替えナビ（マーケ・Web運用・タスク・スタッフ…）。
     ひとつながりの帯に8個ほど詰めているため、狭い画面では1文字ずつ縦に積まれて読めなくなる。
     帯をやめて札を並べ、入らなければ次の行へ折り返す（項目を隠さない）。 */
  .vac-toggle { display: flex; flex-wrap: wrap; gap: 6px; border: none; border-radius: 0; overflow: visible; }
  .vac-toggle a {
    border: 1px solid var(--vb-border); border-radius: 8px;
    padding: 8px 11px; font-size: 12.5px; white-space: nowrap;
  }
  .vac-toggle a:last-child { border-right: 1px solid var(--vb-border); }

  /* 表は縮めない。列が入らないときは、横スクロールで見せる。
     幅に合わせて縮めると、狭い列で文字が1字ずつ折り返して読めなくなるため。
     セルは長文で伸びすぎないよう上限をつける（そこだけ折り返す）。 */
  .vl-tbl-wrap > table,
  .reqpage .tbl-wrap > table { min-width: max-content; }
  .vl-tbl-wrap > table th, .vl-tbl-wrap > table td,
  .reqpage .tbl-wrap > table th, .reqpage .tbl-wrap > table td { max-width: 16em; }
}

/* 月別売上のグラフ。棒（.bars）と月ラベル（.bar-caps）は別々の行なので、
   幅の決め方を必ず揃える。揃えないと、はみ出したときに棒とラベルがずれる。
   1列あたりの最低幅を決めて、入らないぶんはグラフごと横スクロールで見せる。 */
@media (max-width: 720px) {
  .chart-area { overflow-x: auto; padding-bottom: 4px; }
  .bars, .bar-caps { gap: 10px; }
  .bar-col, .bar-capcol { flex: 1 0 46px; }
  /* .bars はブロック要素なので幅指定が無いと表示領域幅のまま（棒だけが flex-shrink:0 で
     はみ出す）になり、.bars を基準に left:0/right:0 で位置決めしている目標線（.target-line）が
     スワイプ前の範囲までしか伸びなくなる。.bars 自身の幅も棒の合計幅まで広げて追従させる。 */
  .bars { width: max-content; min-width: 100%; }
}
/* タブレット幅では2列に落とす。.stats-3 / .rv-stats は列数の指定がこれより前にあり、
   上の @media (max-width:900px) では打ち消せないため、ここで指定し直す。 */
@media (max-width: 900px) {
  .stats-grid.stats-3,
  .stats-grid.rv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* KPIカードは、2列だと金額（¥4,200,000 など）が入りきらない幅で1列にする。
   .stats-3 / .rv-stats / .kpi5 は、これより後ろで列数を指定しているものがあるため、
   確実に打ち消せるようスタイルシートの後ろでまとめて指定する。 */
@media (max-width: 520px) {
  .stats-grid,
  .stats-grid.stats-3,
  .stats-grid.rv-stats,
  .kpi5 { grid-template-columns: 1fr; }
}

/* 4つを横1列に置くと文字が入らない幅では、2つずつ2段にする */
@media (max-width: 430px) {
  .rb-switch button { flex: 1 1 calc(50% - 3px); }
  /* 「積み残し」は件数バッジぶん文言が長く、半分幅に収まりきらないと
     右端がボタン枠からはみ出て見切れていた。入らないときは折り返す。 */
  .rb-switch button[data-rbview="back"] { white-space: normal; }
}
/* 今日の接点：営業AIのひとこと（10点ごとに変わる） */
.tp-cheer { display:flex; align-items:center; gap:9px; font-size:13px; line-height:1.8; color:var(--vb-heading); }
.tp-cheer-ava { width:26px; height:26px; border-radius:50%; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(45deg,#0f7f83,#23abaf); color:#fff; font-weight:800; font-size:12px; }
.tp-cheer-ava img { width:100%; height:100%; object-fit:cover; display:block; }
.tp-cheer-txt { min-width:0; }
.tp-cheer-txt b { color:var(--vb-primary); }
.tp-cheer-txt .muted b { color:inherit; }

/* モーダルを開いている間は、右下のフローティングボタン（不具合報告・AIに聞く・先頭へ戻る）を裏に回す。
   z-index が高いままだと、モーダルの上に乗って手前のボタンが押せなくなる（スマホ幅で特に目立つ） */
body:has(.modal-overlay:not([hidden])) .fb-fab,
body:has(.modal-overlay:not([hidden])) .as-fab,
body:has(.modal-overlay:not([hidden])) .pj-top-btn { display:none; }

/* プロジェクト一覧：ページ先頭へ戻る。右下は不具合・要望FAB等のスタックが既にあるため左下に置く。 */
.pj-top-btn { position:fixed; left:18px; bottom:18px; z-index:80; width:42px; height:42px; display:flex;
  align-items:center; justify-content:center; border-radius:50%; background:#fff; color:var(--vb-primary);
  border:1px solid var(--vb-border); box-shadow:var(--vb-shadow); cursor:pointer; font-size:16px; }
.pj-top-btn:hover { border-color:var(--vb-primary); color:var(--vb-primary-dark); }
.pj-top-btn[hidden] { display:none; }
/* 案件詳細：変更履歴（誰が・いつ・何を） */
.pj-audit { display:flex; flex-direction:column; }
.pj-audit-row { display:flex; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px solid #f4f3f8; font-size:13.5px; flex-wrap:wrap; }
.pj-audit-row:last-child { border-bottom:none; }
.pj-audit-at { color:var(--vb-text); font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pj-audit-who { font-weight:700; color:#544f5a; white-space:nowrap; }
.pj-audit-what { color:#241f31; }
.pj-audit-on { color:var(--vb-text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pj-audit-n { color:#0b6a6d; background:#e6f4f5; border-radius:9px; padding:0 7px; font-size:12.5px; font-weight:800; white-space:nowrap; }
/* 売上一覧：売上の計上月を移す（終了日をまとめて変える） */
.md-ck { display:inline-flex; align-items:center; padding:0 8px 0 2px; cursor:pointer; flex-shrink:0; }
.md-ck input { width:16px; height:16px; cursor:pointer; accent-color:#0f7f83; }
.md-item.md-pick { display:flex; align-items:center; }
.md-item.md-pick .md-row { flex:1; min-width:0; }
.md-item.md-pick[draggable="true"] { cursor:grab; }
.md-item.md-pick[draggable="true"]:active { cursor:grabbing; }
.md-item.is-picked { background:#e6f4f5; }
.mv-bar { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:94vw;
  background:#fff; border:1px solid #b7dfe1; border-radius:12px; padding:10px 14px;
  box-shadow:0 12px 34px rgba(36,31,49,.2); }
/* display を持たせたので、hidden 属性を明示的に打ち消す（でないと消えない） */
.mv-bar[hidden] { display:none !important; }
.mv-n { font-size:14px; color:#544f5a; white-space:nowrap; }
.mv-n b { font-size:16px; color:#0b6a6d; }
.mv-sep { width:1px; height:22px; background:#b7dfe1; }
.mv-date { height:32px; width:auto; padding:0 8px; font-size:13.5px; }
/* 選択バーが出ている間は、画面下のお知らせを上へ逃がす */
body.mv-picking .rb-toast { bottom:96px; }
/* スマホ幅では画面いっぱいに広げる（そのままだと縦に細長くなって押しづらい） */
@media (max-width: 720px) {
  .mv-bar { left:8px; right:8px; transform:none; max-width:none; justify-content:center; gap:8px; padding:10px; }
  .mv-bar .mv-sep { display:none; }
  .mv-n { width:100%; text-align:center; }
}

/* ドラッグ中は、落とせる先（月の行）が分かるようにする */
#monthTable.mv-dragging .js-month-row td { background:#fbf9ff; }
.js-month-row.mv-over td { background:#e6f4f5; box-shadow:inset 0 2px 0 #0f7f83, inset 0 -2px 0 #0f7f83; }

/* 進捗ボード：積み残し（昨日までの、まだ完了になっていない予定） */
#rbViewBack[hidden] { display:none !important; }
.rb-swn { display:inline-block; min-width:18px; margin-left:5px; padding:0 5px; border-radius:9px; background:#fde8ea; color:#c22f45; font-size:11.5px; font-weight:800; text-align:center; }
.rb-switch button.active .rb-swn { background:rgba(255,255,255,.24); color:#fff; }
.rb-swn[hidden] { display:none !important; }
.rb-blist { margin-top:12px; background:#fff; border:1px solid #e9e7ef; border-radius:14px; overflow:hidden; }
.rb-bday { display:flex; align-items:center; gap:10px; padding:9px 16px; background:#f7f6fb; border-bottom:1px solid #efedf5; border-top:1px solid #efedf5; }
.rb-bday:first-child { border-top:none; }
.rb-bday .dt { font-size:13.5px; font-weight:800; color:#544f5a; }
.rb-bday .n { font-size:12.5px; color:var(--vb-text); }
.rb-btime { font-size:12.5px; font-weight:700; color:#0b6a6d; background:#e6f4f5; border-radius:6px; padding:1px 7px; }

/* 進捗ボード：担当（人／AI）の割り振り */
.rb-assignb { display:block; margin-top:4px; border:1px solid #d9d5e4; background:#fff; color:var(--vb-text); border-radius:8px; padding:2px 8px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.rb-assignb:hover { border-color:#0f7f83; color:#0b6a6d; background:#f5fafa; }

.rb-pick { position:fixed; inset:0; z-index:70; background:rgba(36,31,49,.34); display:flex; align-items:center; justify-content:center; padding:20px; }
/* display を持たせたので、hidden 属性を明示的に打ち消す（でないと閉じない） */
.rb-pick[hidden] { display:none !important; }
.rb-pickbox { background:#fff; border-radius:16px; width:100%; max-width:560px; max-height:80vh; overflow:auto; box-shadow:0 20px 50px rgba(36,31,49,.3); }
.rb-pickh { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid #f0edf7; position:sticky; top:0; background:#fff; }
.rb-pickh b { flex:1; font-size:14px; color:#241f31; }
.rb-pickcols { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 18px; }
.rb-pickl { font-size:13.5px; font-weight:800; color:var(--vb-text); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.rb-pickb { display:block; width:100%; text-align:left; border:1px solid #e9e7ef; background:#fff; color:#241f31; border-radius:9px; padding:8px 11px; font-size:14px; font-family:inherit; cursor:pointer; margin-bottom:6px; }
.rb-pickb:hover { border-color:#0f7f83; background:#f5fafa; color:#0b6a6d; }
.rb-pickb.ai:hover { border-color:#4cc38a; background:#f5fdf8; color:#1a8a55; }
.rb-pickb.on { border-color:#0f7f83; background:#e6f4f5; font-weight:800; }
.rb-pickn { font-size:13.5px; color:var(--vb-text); padding:0 18px 16px; }
@media (max-width: 560px) { .rb-pickcols { grid-template-columns:1fr; } }
.rb-picknow { font-size:13.5px; color:var(--vb-text); margin-right:6px; }

/* 進捗ボード：カード内のレーンに担当の顔と進み具合を出す（モック vd03 と同じ表記） */
.rb-mini-own { width:17px; height:17px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.rb-mini-own.ini { background:#f0eef6; color:#0b6a6d; font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.rb-mini { width:52px; height:5px; background:#f1eff7; border-radius:3px; overflow:hidden; flex-shrink:0; }
.rb-mini > i { display:block; height:100%; border-radius:3px; background:#0f7f83; }
.rb-mini.ai > i { background:repeating-linear-gradient(115deg,#4cc38a 0 10px,#7ad6a8 10px 20px); background-size:28px 100%; animation:rb-flow .9s linear infinite; }

/* 進捗ボード：AIの行のバー（実行中は流れる／任せただけのときは空の器） */
.rb-rtrack { height:5px; background:#f1eff7; border-radius:3px; overflow:hidden; margin:5px 0 4px; }
.rb-rtrack > i { display:block; height:100%; border-radius:3px; background:#0f7f83; }
.rb-rtrack.ai > i { background:repeating-linear-gradient(115deg,#4cc38a 0 10px,#7ad6a8 10px 20px); background-size:28px 100%; animation:rb-flow .9s linear infinite; }

/* 進捗ボード：AIのアイコン（画像／名前の頭文字／ロボット） */
.rb-ic.img { padding:0; overflow:hidden; }
.rb-ic.img, .rb-who .rb-ic.img { width:20px; height:20px; border-radius:6px; object-fit:cover; display:inline-block; }
.rb-ic.ai { font-weight:800; }
.rb-mini-more { font-size:13px; font-weight:800; color:var(--vb-text); background:#f0eef6; border-radius:8px; padding:1px 5px; flex-shrink:0; }

/* 進捗ボード：スケジュール（案件ごとの横棒。モック vd03 のロードマップ） */
.rb-schedwrap { border:1px solid #ece9f5; border-radius:12px; overflow:hidden; background:#fff; }
.rb-schedscroll { overflow-x:auto; }
.rb-sched { min-width:900px; }
.rb-srow { display:grid; grid-template-columns:270px 1fr; border-bottom:1px solid #f4f2f9; }
.rb-srow:last-child { border-bottom:none; }
.rb-sside { padding:8px 12px; border-right:1px solid #f2f0f7; display:flex; align-items:center; gap:7px; min-width:0; font-size:13.5px; }
.rb-sside i.fa-diagram-project { color:#0f7f83; }
.rb-sside .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-sside .nm.sub { padding-left:14px; color:#5b5764; }
.rb-strack { position:relative; display:grid; height:38px; }
.rb-tick { border-right:1px solid #f6f5fa; }
.rb-tick.we { background:#fbfaFe; }
.rb-tick.now { background:#e6f4f5; }
.rb-shead { background:#faf9fd; }
.rb-shead .rb-sside { font-size:13.5px; font-weight:800; color:var(--vb-text); }
.rb-shead .rb-strack { height:auto; }
.rb-shd { text-align:center; font-size:13px; color:var(--vb-text); padding:5px 0 6px; border-right:1px solid #f2f0f7; line-height:1.25; }
.rb-shd b { display:block; font-size:13px; color:#5b5764; }
.rb-shd.now { background:#e6f4f5; } .rb-shd.now b { color:#0b6a6d; }
.rb-spj { background:#fcfbfe; } .rb-spj .nm { font-weight:800; }
.rb-sbar { position:absolute; top:50%; transform:translateY(-50%); height:20px; border-radius:6px; display:flex; align-items:center; padding:0 8px; font-size:13.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; }
.rb-sbar.env  { background:#e6f4f5; color:#0b6a6d; height:12px; border-radius:4px; font-size:0; }
.rb-sbar.me   { background:#0f7f83; }
.rb-sbar.wait { background:#e6e3ee; color:#8b8895; }
.rb-sbar.over { background:#e0435a; }
.rb-sbar.ai   { background:repeating-linear-gradient(115deg,#3fb37c 0 10px,#5fc796 10px 20px); background-size:28px 100%; animation:rb-flow .9s linear infinite; }
.rb-sms { position:absolute; top:50%; width:11px; height:11px; background:#e08a1e; transform:translate(-50%,-50%) rotate(45deg); border-radius:2px; z-index:2; }
.rb-schedlegend { display:flex; gap:14px; flex-wrap:wrap; font-size:13.5px; color:var(--vb-text); padding:10px 14px; background:#faf9fd; border-top:1px solid #f0edf7; }
.rb-schedlegend span { display:inline-flex; align-items:center; gap:5px; }
.rb-schedlegend i { width:14px; height:9px; border-radius:3px; display:inline-block; }
.rb-schednote { margin-top:12px; background:#fff8e6; border:1px solid #ffe08a; border-radius:10px; padding:11px 15px; font-size:13.5px; color:#7a5200; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rb-schednote b { color:#5c3e00; }
@media (max-width: 720px) { .rb-srow { grid-template-columns:150px 1fr; } }
/* 横に送っても案件名・作業名は左に貼り付けておく */
.rb-sside { position:sticky; left:0; z-index:3; background:#fff; }
.rb-shead .rb-sside { background:#faf9fd; z-index:4; }
.rb-spj .rb-sside { background:#fcfbfe; }
/* カレンダーの送りボタン（先月・先週・昨日／明日・来週・来月）。文字なので幅を可変にする */
.cal-arw.txt { width:auto; min-width:44px; padding:0 10px; font-size:13px; font-weight:700; letter-spacing:.02em; }
/* ── 取引先の任意項目（設定＝.cfd-*、取引先詳細＝.cf-*） ── */
.cf-fields { margin-top:14px; padding-top:12px; border-top:1px dashed #e7e7ee; }
.cf-fields .form-hint { margin-bottom:8px; }
.cf-table { margin:4px 0 14px; }
.cf-table .vl-tbl-wrap { margin-bottom:6px; }
.cf-tbl th { font-size:12.5px; white-space:nowrap; }
.cf-tbl td { padding:4px 6px; }
.cf-tbl .form-input { margin:0; min-width:110px; }
.cf-tbl tr:hover td, .cf-tbl-view tr:hover td { background:transparent; cursor:default; }
.cf-tbl .cf-del, .cfd-col-rm { background:#f4f5fa; border:none; border-radius:7px; width:28px; height:28px; cursor:pointer; color:var(--vb-text); font-family:inherit; }
.cf-tbl .cf-del:hover, .cfd-col-rm:hover { background:#fdeaf3; color:#c23a72; }
.cf-view-title { font-size:13px; font-weight:700; color:var(--vb-heading); margin:12px 0 4px; }
.cf-tbl-view { margin-bottom:4px; }
.cf-tbl-view th { font-size:12.5px; }
.cf-tbl-view td.num { text-align:right; font-variant-numeric:tabular-nums; }
.ck-kv dd.pre { white-space:pre-wrap; }
.cfd-opt { display:none; } .cfd-opt.is-on { display:block; }
.cfd-cols { margin-bottom:8px; }
.cfd-col { display:grid; grid-template-columns:1fr 140px auto; gap:8px; margin-bottom:6px; align-items:center; }
.cfd-col .form-input, .cfd-col .form-select { margin:0; }
.cfd-col label { white-space:nowrap; }
.cf-def-tbl td { vertical-align:middle; }
.cf-def-tbl tr:hover td { cursor:default; }

/* ── 取引先詳細：基本情報のタイル表示（ラベルの下に値。長文は1行占有。表形式の任意項目は2列） ── */
.ck-sec { display:flex; align-items:center; gap:10px; margin:14px 0 8px; font-size:13px; font-weight:700; color:var(--vb-heading); letter-spacing:.02em; }
.ck-sec::after { content:''; flex:1; height:1px; background:var(--vb-border); }
.ck-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px 12px; margin:0; }
.ck-item { min-width:0; padding:8px 12px; background:#f5fafa; border:1px solid #e6f4f5; border-radius:8px; }
.ck-item .l { font-size:12px; color:var(--vb-text); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ck-item .v { font-size:14.5px; font-weight:600; color:var(--vb-heading); line-height:1.5; word-break:break-all; }
.ck-item .v.mono { font-family:Consolas, "SFMono-Regular", Menlo, monospace; font-weight:500; font-size:14px; }
.ck-item .v.pre { white-space:pre-wrap; font-weight:400; }
.ck-item .v.muted { color:var(--vb-text); font-weight:400; }
.ck-item .v a { color:var(--vb-primary); }
.ck-item.wide { grid-column:1 / -1; }
.ck-tbl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); gap:0 24px; }
.ck-tbl-box { min-width:0; }
.ck-tbl-box.wide { grid-column:1 / -1; }   /* 4列以上の表は1行を占める */
.ck-tbl-box .cf-view-title { margin-top:6px; }
@media (max-width:700px) { .ck-grid { grid-template-columns:1fr 1fr; } .ck-tbl-grid { grid-template-columns:1fr; } }

/* ── RFM分析（顧客配下 staff/client-rfm.php）：セグメントカード＋R/F/Mスコアのバッジ ── */
.seg-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
@media (max-width:820px){ .seg-cards { grid-template-columns:repeat(2,1fr); } }
.seg-c { border-radius:10px; padding:12px; text-align:center; color:#fff; background:var(--vb-secondary); }
.seg-c.champion { background:var(--vb-success); } .seg-c.stable { background:var(--vb-primary); } .seg-c.growing { background:var(--vb-info); } .seg-c.at_risk { background:var(--vb-warning); } .seg-c.dormant { background:#8a8d93; }
.seg-c .n { font-size:22px; font-weight:800; line-height:1.1; }
.seg-c .l { font-size:13.5px; opacity:.96; margin-top:2px; }
.seg-c .d { font-size:13px; opacity:.92; margin-top:3px; }
.rfm { display:inline-flex; gap:4px; }
.rfm b { font-size:13px; font-weight:800; padding:2px 6px; border-radius:5px; color:#fff; }
.rfm b.hi { background:var(--vb-success); } .rfm b.mid { background:var(--vb-warning); } .rfm b.lo { background:var(--vb-secondary); }

/* ── 取引先詳細：ヘッダの見出し内バッジ／KPIカードのリンク化／タイルの補足／依頼カードの種別行 ── */
.page-title .stars, .page-title .tag { vertical-align:middle; margin-left:8px; }
.page-title .stars { font-size:16px; }
.stat-link { display:block; text-decoration:none; color:inherit; }
.stat-link:hover { border-color:var(--vb-primary); }
.stat-value small { font-size:14px; font-weight:600; color:var(--vb-text); }
.ck-item .v .sub { display:block; margin-top:2px; font-size:12.5px; font-weight:400; color:var(--vb-text); }
.ck-svc-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.stats-grid.stats-2 { grid-template-columns:repeat(2,1fr); }
@media (max-width: 520px) { .stats-grid.stats-2 { grid-template-columns:1fr; } }

/* 金融機関ピッカー（bank-picker.js）。負債の状況は「マスタから選ぶ／無ければその場で足す」が前提なので、
   選んだ結果はカードで見せる。候補は「名前＋住所・TEL」の2段なので縦リストにする。 */
.bank-pop { width:360px; max-height:calc(100vh - 24px); overflow-y:auto; }
.bank-pop .svc-pop-list { display:block; max-height:240px; }
.bank-pop-item { display:block; width:100%; text-align:left; border-radius:8px; padding:6px 9px; margin-bottom:4px; line-height:1.35; }
.bank-pop-item .b-sub { display:block; font-size:11.5px; color:var(--vb-text); margin-top:1px; }
.bank-add { border-top:1px solid #ececf1; margin-top:10px; padding-top:8px; }
.bank-add-h { font-size:12px; font-weight:700; color:var(--vb-text); }
.bank-add-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
.bank-add-grid .form-input { width:100%; font-size:13px; padding:6px 8px; }
.bank-add-more { margin-top:6px; }
.bank-add-more summary { font-size:12px; color:var(--vb-primary); cursor:pointer; }

/* 負債フォームの「金融機関」欄：選択中のマスタをカードで出す（未選択は破線） */
.bank-pick { display:block; }
.bank-card { display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--vb-border); border-left:3px solid var(--vb-primary); border-radius:var(--vb-radius);
  background:#f5fbfb; padding:9px 12px; }
.bank-card.is-empty { border-style:dashed; border-left-color:#d5d5da; background:#fafafa; }
.bank-card-body { min-width:0; }
.bank-card-name { display:block; font-size:14.5px; font-weight:700; color:var(--vb-heading); }
.bank-card.is-empty .bank-card-name { font-weight:600; color:var(--vb-text); }
.bank-card-sub { display:block; margin-top:2px; font-size:12px; color:var(--vb-text); word-break:break-all; }
.bank-card .bank-btn { flex:0 0 auto; white-space:nowrap; }

/* モーダル内の区切り見出し（「この取引先での状況」） */
.form-sep { display:flex; align-items:center; gap:8px; margin:16px 0 10px; font-size:12.5px; font-weight:700; color:var(--vb-text); }
.form-sep::after { content:''; flex:1; height:1px; background:#ececf1; }
/* まだ記録できない日（接点は当日ぶんのみ）。並びを崩さないよう、消さずに押せなくする。 */
.cal-arw.off, .cal-week .wcol.off { opacity:.35; cursor:default; pointer-events:none; }
.cal-arw.off:hover { border-color:var(--vb-border); color:var(--vb-heading); }
/* 狭い画面では送りのボタンが画面からはみ出していた（ダッシュボードのカレンダーも同じ）。
   折り返しを許し、日付を1行使って［先月 先週 昨日／日付／明日 来週 来月］に積む。 */
@media (max-width:640px){
  .cal-nav { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .cal-nav .cal-date { min-width: 100%; order: 0; }
  /* 今日の日付（.cal-date）は中央揃えなのに、1週間の日付（.cal-week）は
     左詰めのままでずれて見えていた。こちらも幅いっぱいにして中央に揃える。 */
  .cal-week { width: 100%; justify-content: center; }
}

/* ===== VP-04 ガントチャート（案件のタイムライン） =====
   1日=1列。列幅は --gday（日/週/月で切替）。バーの位置は JS が data-s/data-d を
   CSS 変数 --gx/--gw に写し、ここの calc で置く（HTML に style 属性は書かない）。
   左ペインは sticky で固定、ヘッダも sticky。スクロールは .gantt-scroll の1つだけ。 */
.gantt { --gday:18px; --gleft:320px; --grow:36px; --gdays:56; position:relative; border:1px solid var(--vb-border); border-radius:var(--vb-r-card); background:#fff; overflow:hidden; }
.gantt--day { --gday:36px; } .gantt--week { --gday:18px; } .gantt--month { --gday:5px; }
.gantt-scroll { overflow:auto; max-height:72vh; position:relative; overscroll-behavior-x:contain; }
/* ヘッダ（月・週・日） */
.gantt-head { position:sticky; top:0; z-index:6; display:flex; background:#fff; border-bottom:1px solid var(--vb-border); }
.gantt-head-left { position:sticky; left:0; z-index:7; flex:none; width:var(--gleft); box-sizing:border-box; padding:0 12px 6px; display:flex; align-items:flex-end; font-size:11.5px; font-weight:700; color:var(--vb-text); letter-spacing:.04em; background:#fff; border-right:1px solid var(--vb-border); }
.gantt-head-right { position:relative; flex:none; width:calc(var(--gdays) * var(--gday)); }
.gantt-months, .gantt-weeks, .gantt-days { position:relative; }
.gantt-months { height:22px; border-bottom:1px solid #f1f1f3; }
.gantt-weeks, .gantt-days { height:30px; }
.gantt-mcell, .gantt-wcell, .gantt-dcell { position:absolute; top:0; bottom:0; left:calc(var(--gx) * var(--gday)); width:calc(var(--gw) * var(--gday)); box-sizing:border-box; border-right:1px solid #eeeef1; overflow:hidden; white-space:nowrap; }
.gantt-mcell { padding:3px 8px; font-size:12px; font-weight:700; color:var(--vb-heading); }
.gantt-wcell { padding:7px 6px 0; font-size:11.5px; color:var(--vb-text); }
.gantt-wcell b { color:var(--vb-heading); font-weight:700; }
.gantt-dcell { text-align:center; font-size:11.5px; color:var(--vb-heading); padding-top:4px; line-height:1.15; }
.gantt-dcell small { display:block; font-size:10px; color:#aeacb3; }
.gantt-dcell.is-weekend { background:#f6f6f9; color:#aeacb3; }
.gantt-dcell.is-today, .gantt-dcell.is-today small { color:var(--vb-danger); font-weight:700; }
.gantt--day .gantt-weeks { display:none; }
.gantt--week .gantt-days, .gantt--month .gantt-days { display:none; }
.gantt--month .gantt-wcell { font-size:10px; padding:9px 3px 0; } .gantt--month .gantt-wcell span { display:none; }
/* 行 */
.gantt-body { position:relative; }
.gantt-row { display:flex; height:var(--grow); border-bottom:1px solid #f1f1f3; }
.gantt-row.is-hidden, .gantt-row.is-filtered { display:none; }
.gantt-cell-left { position:sticky; left:0; z-index:4; flex:none; width:var(--gleft); box-sizing:border-box; background:#fff; border-right:1px solid var(--vb-border); display:flex; align-items:center; gap:6px; padding-right:10px; overflow:hidden; white-space:nowrap; font-size:13px; color:var(--vb-heading); }
.gantt-lv-0 { padding-left:10px; } .gantt-lv-1 { padding-left:26px; } .gantt-lv-2 { padding-left:42px; } .gantt-lv-3 { padding-left:58px; } .gantt-lv-4 { padding-left:74px; } .gantt-lv-5 { padding-left:90px; }
.gantt-row--project .gantt-cell-left { background:#f7f6fb; font-weight:700; }
.gantt-row--phase .gantt-cell-left { background:#fbfbfd; font-weight:600; color:var(--vb-text); }
.gantt-tg, .gantt-tg-sp { flex:none; width:18px; height:18px; }
.gantt-tg { border:0; background:transparent; padding:0; cursor:pointer; color:var(--vb-text); font-size:10px; line-height:18px; text-align:center; border-radius:4px; transition:transform .12s; }
.gantt-tg:hover { background:#eeeef3; color:var(--vb-heading); }
.gantt-row.is-collapsed .gantt-tg { transform:rotate(-90deg); }
.gantt-ico { flex:none; width:16px; text-align:center; font-size:12px; color:var(--vb-text); }
.gantt-row--task.is-late .gantt-ico { color:var(--vb-danger); }
.gantt-name { min-width:0; overflow:hidden; text-overflow:ellipsis; color:inherit; text-decoration:none; }
.gantt-row--task .gantt-name { cursor:pointer; }
.gantt-name:hover { color:var(--vb-primary); text-decoration:underline; }
.gantt-sub { flex:none; font-size:11.5px; color:var(--vb-text); font-weight:500; }
.gantt-row--task.is-done .gantt-ico { color:var(--vb-success); } .gantt-row--task.is-doing .gantt-ico { color:var(--vb-primary); }
.gantt-meta { flex:none; margin-left:auto; display:flex; align-items:center; gap:6px; }
/* 担当は頭文字のチップ（名前は title と詳細ポップオーバーで出す） */
.gantt-av { flex:none; width:22px; height:22px; border-radius:50%; background:#efe9fb; color:var(--vb-on-primary); font-size:11px; font-weight:700; line-height:22px; text-align:center; overflow:hidden; }
.gantt-av.is-ai { background:#e9f1ff; font-size:13px; }
.gantt-av.is-none { background:#f1f1f3; color:#aeacb3; }
.gantt-dates { font-size:11px; color:#aeacb3; font-weight:500; font-variant-numeric:tabular-nums; }
.gantt-meta .tag { font-size:10.5px; padding:1px 7px; }
.gantt-meta .progress-mini { width:auto; font-size:11px; }
.gantt-meta .progress-mini .progress-bar-mini { width:46px; }
.gantt-cell-right { position:relative; flex:none; width:calc(var(--gdays) * var(--gday)); background-image:linear-gradient(90deg, transparent 0 calc(5 * var(--gday)), rgba(16,24,40,.045) calc(5 * var(--gday)) calc(7 * var(--gday))); background-size:calc(7 * var(--gday)) 100%; }
.gantt--day .gantt-cell-right { background-image:linear-gradient(90deg, transparent 0 calc(5 * var(--gday)), rgba(16,24,40,.045) calc(5 * var(--gday)) calc(7 * var(--gday))), repeating-linear-gradient(90deg, #f1f1f3 0 1px, transparent 1px var(--gday)); }
.gantt--week .gantt-cell-right { background-image:linear-gradient(90deg, transparent 0 calc(5 * var(--gday)), rgba(16,24,40,.045) calc(5 * var(--gday)) calc(7 * var(--gday))), repeating-linear-gradient(90deg, #ececf0 0 1px, transparent 1px calc(7 * var(--gday))); }
.gantt--can .gantt-row--task .gantt-cell-right:has(.gantt-bar--none) { cursor:copy; }
/* 今日線・依存線 */
.gantt-today { position:absolute; top:0; bottom:0; left:calc(var(--gleft) + var(--gx) * var(--gday) + var(--gday) / 2); width:2px; margin-left:-1px; background:var(--vb-danger); opacity:.7; z-index:3; pointer-events:none; }
.gantt-deps { position:absolute; left:0; top:0; z-index:3; pointer-events:none; overflow:visible; }
.gantt-deps path { fill:none; stroke:var(--vb-warning); stroke-width:1.5; }
.gantt-deps .gantt-arrow { fill:var(--vb-warning); }
/* バー */
.gantt-bar { position:absolute; top:7px; height:22px; left:calc(var(--gx) * var(--gday)); width:calc(var(--gw) * var(--gday)); box-sizing:border-box; border-radius:6px; padding:0 8px; font-size:12px; font-weight:600; line-height:22px; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; z-index:2; box-shadow:0 1px 3px rgba(16,24,40,.12); cursor:pointer; user-select:none; touch-action:none; }
.gantt-bar-label { position:relative; z-index:1; }
.gantt-bar-prog { position:absolute; left:0; top:0; bottom:0; background:rgba(0,0,0,.16); pointer-events:none; }
.gantt-bar--task.is-todo { background:#e3e3e8; color:var(--vb-heading); }
.gantt-bar--task.is-doing { background:var(--vb-primary); }
.gantt-bar--task.is-done { background:var(--vb-success); opacity:.8; }
.gantt-bar--task.is-late { background:#fde8ea; color:var(--vb-on-danger); border:2px solid var(--vb-danger); line-height:18px; }
.gantt-bar--task.is-late .gantt-bar-prog { background:rgba(255,76,81,.18); }
.gantt-bar--project { top:14px; height:8px; border-radius:2px; padding:0; background:var(--vb-primary-dark); box-shadow:none; cursor:default; }
.gantt-bar--project.is-derived { background:repeating-linear-gradient(90deg, var(--vb-primary-dark) 0 6px, transparent 6px 10px); }
.gantt-bar--project.is-late { background:var(--vb-danger); }
.gantt-bar--project.is-done { background:var(--vb-success); }
.gantt-bar--phase { top:11px; height:14px; border-radius:3px; padding:0; background:var(--gc, var(--vb-primary)); opacity:.3; box-shadow:none; cursor:default; }
.gantt-bar--none { left:calc(var(--gx, 0) * var(--gday)); width:calc(var(--gw, 8) * var(--gday)); background:transparent; color:#aeacb3; border:1.5px dashed #cfcfd6; box-shadow:none; font-weight:500; line-height:19px; cursor:default; touch-action:auto; }
.gantt--can .gantt-bar--none { cursor:copy; }
.gantt-bar--ghost { background:rgba(144,85,253,.18); border:1.5px dashed var(--vb-primary); color:var(--vb-on-primary); box-shadow:none; z-index:3; line-height:19px; }
/* 短いバー（幅が文字に足りない）はラベルをバーの右外に出す（JS が is-narrow を付ける） */
.gantt-bar--task.is-narrow { overflow:visible; padding:0; }
.gantt-bar--task.is-narrow .gantt-bar-label { position:absolute; left:100%; top:0; margin-left:6px; color:var(--vb-heading); font-weight:600; font-size:12px; line-height:22px; pointer-events:none; text-shadow:0 0 2px #fff, 0 0 2px #fff; }
.gantt-bar--task.is-narrow.is-late .gantt-bar-label { line-height:18px; color:var(--vb-on-danger); }
.gantt--month .gantt-bar-label, .gantt--month .gantt-bar--none { display:none; }
.gantt--month .gantt-bar { padding:0 2px; }
.gantt-bar.is-dragging { opacity:.9; box-shadow:var(--vb-shadow); z-index:3; cursor:grabbing; }
.gantt--can .gantt-drag { cursor:grab; }
.gantt-rz { position:absolute; top:0; bottom:0; width:8px; cursor:ew-resize; z-index:2; }
.gantt-bar--task.is-narrow .gantt-rz { width:5px; }
.gantt-rz-l { left:0; } .gantt-rz-r { right:0; }
.gantt-rz::after { content:""; position:absolute; top:6px; bottom:6px; left:3px; width:2px; border-radius:1px; background:rgba(255,255,255,.6); opacity:0; }
.gantt-bar:hover .gantt-rz::after { opacity:1; }
.gantt-bar--task.is-todo .gantt-rz::after, .gantt-bar--task.is-late .gantt-rz::after { background:rgba(0,0,0,.28); }
/* 準備前（JS が --gx を入れる前）の点滅防止 */
.gantt-bar, .gantt-mcell, .gantt-wcell, .gantt-dcell, .gantt-today { visibility:hidden; }
.gantt--ready .gantt-bar, .gantt--ready .gantt-mcell, .gantt--ready .gantt-wcell, .gantt--ready .gantt-dcell, .gantt--ready .gantt-today { visibility:visible; }
/* 空状態 */
.gantt-empty { padding:28px 16px; text-align:center; color:var(--vb-text); font-size:13.5px; line-height:1.7; }
.gantt-empty a { color:var(--vb-primary); font-weight:700; }
/* ツールバー・凡例 */
.gantt-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.gantt-sep { width:1px; height:22px; background:var(--vb-border); }
.gantt-scale { display:inline-flex; border:1px solid var(--vb-border); border-radius:8px; overflow:hidden; }
.gantt-scale button { border:0; background:#fff; padding:6px 14px; font-size:13px; font-weight:700; color:var(--vb-text); cursor:pointer; border-right:1px solid var(--vb-border); }
.gantt-scale button:last-child { border-right:0; }
.gantt-scale button.active { background:var(--vb-primary); color:#fff; }
.gantt-check { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--vb-heading); cursor:pointer; }
.gantt-tools .form-select { width:auto; min-width:150px; padding:6px 30px 6px 10px; font-size:13px; }
.gantt-legend { display:flex; flex-wrap:wrap; gap:4px 12px; margin-left:auto; }
.gantt-lg { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--vb-text); }
.gantt-lg i { display:inline-block; width:16px; height:10px; border-radius:3px; box-sizing:border-box; }
.gantt-lg-todo { background:#e3e3e8; } .gantt-lg-doing { background:var(--vb-primary); } .gantt-lg-done { background:var(--vb-success); opacity:.8; }
.gantt-lg-late { background:#fde8ea; border:2px solid var(--vb-danger); } .gantt-lg-none { border:1.5px dashed #cfcfd6; }
.gantt-lg-project { background:var(--vb-primary-dark); height:5px; } .gantt-lg-phase { background:var(--vb-primary); opacity:.3; }
.gantt-lg-today { width:2px; background:var(--vb-danger); }
/* タスクの詳細ポップオーバー（座標も CSS 変数で受ける） */
.gantt-pop { position:fixed; left:var(--px, 0px); top:var(--py, 0px); z-index:120; width:300px; max-width:calc(100vw - 24px); box-sizing:border-box; background:#fff; border:1px solid var(--vb-border); border-radius:12px; box-shadow:var(--vb-shadow); padding:14px; font-size:13px; color:var(--vb-heading); }
.gantt-pop-title { font-weight:700; font-size:14px; margin-bottom:8px; word-break:break-word; line-height:1.4; }
.gantt-pop dl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0 0 12px; }
.gantt-pop dt { color:var(--vb-text); font-size:12px; } .gantt-pop dd { margin:0; }
.gantt-pop-foot { display:flex; justify-content:flex-end; gap:8px; }
/* スマホ：左ペインを狭くし、担当・日付の文字は隠す */
@media (max-width:640px){
  .gantt { --gleft:170px; }
  .gantt-sub, .gantt-dates { display:none; }
  .gantt-meta .progress-mini .progress-bar-mini { display:none; }
  .gantt-scroll { max-height:62vh; }
  .gantt-legend { margin-left:0; }
}

/* ===== VT-04 タスクカレンダー（週・月）=====
   位置は task-calendar.js が data-* から写す CSS 変数（--tc-top/--tc-h/--tc-col/--tc-cols/--tc-s/--tc-d/--tc-row/--tc-rows）で決める。
   週の時間グリッドは1時間＝--tc-hour。帯（複数日・月表示）は1段＝--tc-bar-h。 */
.tcal { --tc-hour:48px; --tc-bar-h:22px; position:relative; }
.tcal-head .cal-date { min-width:0; text-align:left; margin-left:4px; }
.tc-noselect { user-select:none; -webkit-user-select:none; }
.tc-hide { display:none !important; }

/* 担当者の色（淡い背景＋濃い文字＋左の線）。AI はティール、未割当は灰 */
.tc-c0  { --tc-bg:#e8f1ff; --tc-bd:#3b7dd8; --tc-fg:#1a4f93; }
.tc-c1  { --tc-bg:#e7f6ea; --tc-bd:#3f9d57; --tc-fg:#1f6b34; }
.tc-c2  { --tc-bg:#fff1e5; --tc-bd:#e3843a; --tc-fg:#8f4610; }
.tc-c3  { --tc-bg:#f1ebff; --tc-bd:#8a63d2; --tc-fg:#4f3399; }
.tc-c4  { --tc-bg:#ffeaf3; --tc-bd:#d9558e; --tc-fg:#962456; }
.tc-c5  { --tc-bg:#e3f5fb; --tc-bd:#2f9ec4; --tc-fg:#0f5f7d; }
.tc-c6  { --tc-bg:#fff7da; --tc-bd:#d1a50f; --tc-fg:#6e5200; }
.tc-c7  { --tc-bg:#ffecec; --tc-bd:#d95757; --tc-fg:#992626; }
.tc-c8  { --tc-bg:#eaedff; --tc-bd:#5b6fd6; --tc-fg:#2e3f99; }
.tc-c9  { --tc-bg:#f0f8e2; --tc-bd:#7aa83a; --tc-fg:#46651a; }
.tc-c10 { --tc-bg:#f6eee8; --tc-bd:#a8774f; --tc-fg:#63412a; }
.tc-c11 { --tc-bg:#f8eafa; --tc-bd:#b25ec2; --tc-fg:#72287f; }
.tc-ai   { --tc-bg:#e6f4f5; --tc-bd:#0f7f83; --tc-fg:#0b6a6d; }
.tc-none { --tc-bg:#f1f2f4; --tc-bd:#a0a4ab; --tc-fg:#5f6368; }

/* 凡例 */
.tc-legend { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 12px; font-size:13px; color:var(--vb-heading); }
.tc-leg { display:inline-flex; align-items:center; gap:6px; }
.tc-leg i { display:inline-block; width:12px; height:12px; border-radius:3px; background:var(--tc-bg); border:2px solid var(--tc-bd); flex-shrink:0; }
.tc-legend-note { font-size:12.5px; color:var(--vb-text); margin-left:auto; }
.cal-mem-item .tc-leg { margin-right:2px; }

/* 予定（週の時間グリッド・帯の共通） */
.tc-ev, .tc-bar { display:block; box-sizing:border-box; overflow:hidden; text-decoration:none; background:var(--tc-bg,#f1f2f4); color:var(--tc-fg,#5f6368); border-left:3px solid var(--tc-bd,#a0a4ab); border-radius:6px; font-size:12.5px; line-height:1.3; }
.tc-ev:hover, .tc-bar:hover { box-shadow:0 2px 8px rgba(16,24,40,.16); color:var(--tc-fg,#5f6368); }
.tc-drag { cursor:grab; }
.is-dragging { cursor:grabbing; opacity:.9; box-shadow:0 8px 18px rgba(16,24,40,.25); z-index:8; }
.tc-ev.is-done, .tc-bar.is-done { opacity:.5; }
.is-done .tc-ev-n::before, .is-done .tc-bar-n::before { content:"✓ "; }
.tc-ai-badge { display:inline-block; margin-left:4px; padding:0 4px; border-radius:4px; background:#0b6a6d; color:#fff; font-size:10.5px; font-weight:700; line-height:1.5; vertical-align:1px; }

/* 週表示 */
.tcw-x { overflow-x:auto; }
.tcw-head, .tcw-allday, .tcw-body { display:grid; grid-template-columns:56px repeat(7,minmax(0,1fr)); }
.tcw-head { border-bottom:1px solid var(--vb-border); }
.tcw-gut { font-size:11.5px; color:var(--vb-text); }
.tcw-dh { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 0 8px; text-decoration:none; color:var(--vb-heading); border-radius:8px; }
.tcw-dh:hover { background:#f5fafa; }
.tcw-dw { font-size:12px; color:var(--vb-text); }
.tcw-dn { font-size:19px; font-weight:600; width:36px; height:36px; line-height:36px; text-align:center; border-radius:50%; }
.tcw-dh.is-sun .tcw-dw { color:#c62b41; }
.tcw-dh.is-sat .tcw-dw { color:#0b6aa3; }
.tcw-dh.is-today .tcw-dn { background:var(--vb-primary); color:#fff; }
.tcw-allday { border-bottom:1px solid var(--vb-border); }
.tcw-gut-ad { display:flex; align-items:center; justify-content:flex-end; padding-right:8px; }
.tcw-ad { grid-column:2 / span 7; position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-height:calc(max(1, var(--tc-rows,1)) * (var(--tc-bar-h) + 2px) + 8px); }
.tcw-adcell { border-left:1px solid #eef0f3; }
.tcal.can-write .tcw-adcell, .tcal.can-write .tcw-col, .tcal.can-write .tcm-cell, .tcal.can-write .tcl-day { cursor:copy; }
.tcw-ad .tc-bar, .tcm-bars .tc-bar { position:absolute; left:calc(100% / 7 * var(--tc-s) + 2px); width:calc(100% / 7 * var(--tc-d) - 4px); top:calc(4px + var(--tc-row) * (var(--tc-bar-h) + 2px)); height:var(--tc-bar-h); padding:2px 6px; white-space:nowrap; text-overflow:ellipsis; }
.tc-bar.cut-l { border-top-left-radius:0; border-bottom-left-radius:0; border-left-style:dashed; }
.tc-bar.cut-r { border-top-right-radius:0; border-bottom-right-radius:0; }
.tc-bar-tm { font-weight:700; margin-right:4px; }
.tc-bar.is-over, .tc-ev.is-over { display:none; }
/* 「+N件」。月のマス・週の終日の段では、隠した帯の代わりに最後の段の位置へ置く */
.tc-more { box-sizing:border-box; border:none; border-radius:6px; background:none; color:var(--vb-text); font-family:inherit; font-size:12px; font-weight:700; line-height:1.2; cursor:pointer; }
.tc-more:hover { background:#eef0f3; color:var(--vb-heading); }
.tcw-ad .tc-more, .tcm-bars .tc-more { position:absolute; left:calc(100% / 7 * var(--tc-s) + 2px); width:calc(100% / 7 - 4px); top:calc(4px + var(--tc-row) * (var(--tc-bar-h) + 2px)); height:var(--tc-bar-h); padding:0 6px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:auto; z-index:3; }
.tcw-scroll { max-height:70vh; overflow-y:auto; position:relative; scrollbar-gutter:stable; }
/* 時間グリッドの縦スクロールバーのぶん、見出しと終日の段も同じ幅を空けて列をそろえる */
.tcw-head, .tcw-allday { overflow-y:hidden; scrollbar-gutter:stable; }
.tcw-hr { display:block; height:var(--tc-hour); text-align:right; padding-right:8px; line-height:1; transform:translateY(-6px); }
.tcw-hr:first-child { visibility:hidden; }
.tcw-col { position:relative; height:calc(24 * var(--tc-hour)); border-left:1px solid #eef0f3; background-image:linear-gradient(#e6e8ec 1px, transparent 1px), linear-gradient(#f4f5f7 1px, transparent 1px); background-size:100% var(--tc-hour), 100% calc(var(--tc-hour) / 2); }
.tcw-col.is-today { background-color:#fbfefe; }
.tcw-biz { position:absolute; left:0; right:0; top:calc(var(--tc-top) * var(--tc-hour) / 60); height:calc(var(--tc-h) * var(--tc-hour) / 60); background:rgba(15,127,131,.04); pointer-events:none; }
/* 時間グリッドの予定：--tc-col 列目から --tc-w 列ぶん（まとまりの列数 --tc-cols のうち） */
.tcw-col .tc-ev, .tcw-col .tcw-more { position:absolute; top:calc(var(--tc-top) * var(--tc-hour) / 60); height:calc(var(--tc-h) * var(--tc-hour) / 60 - 2px); left:calc((100% - 6px) * var(--tc-col) / var(--tc-cols) + 2px); width:calc((100% - 6px) * var(--tc-w, 1) / var(--tc-cols) - 2px); padding:2px 5px; z-index:2; }
.tcw-col .tcw-more { display:flex; justify-content:center; align-items:flex-start; padding:5px 2px; background:#f1f2f4; border:1px dashed #c3c6cd; color:var(--vb-heading); overflow:hidden; word-break:break-all; }
.tcw-col .tcw-more:hover { background:#e6e8ec; }
.tc-ev-t { display:block; font-size:11.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-ev-n { display:block; font-weight:600; word-break:break-word; }
.tc-ev.is-short .tc-ev-t, .tc-ev.is-short .tc-ev-n { display:inline; }
.tc-ev.is-short .tc-ev-t { margin-right:4px; }
.tc-ev.is-short { white-space:nowrap; text-overflow:ellipsis; }
.tc-ev.is-short .tc-ev-e { display:none; }
.tc-rz { position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize; }
.tcw-now { position:absolute; left:0; right:0; top:calc(var(--tc-top) * var(--tc-hour) / 60); height:2px; background:var(--vb-danger); z-index:4; pointer-events:none; }
.tcw-now::before { content:""; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--vb-danger); }

/* 一覧表示：日ごとの列に、その日の予定をすべて縦に並べる（重なりで隠さない）。見出しは週表示の .tcw-dh を使う */
.tcl { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid var(--vb-border); }
.tcl-day { min-width:0; min-height:240px; padding:4px 3px 12px; border-left:1px solid #eef0f3; }
.tcl-day:first-child { border-left:none; }
.tcl-day.is-today { background-color:#fbfefe; }
.tcl-cnt { font-size:11.5px; color:var(--vb-text); }
.tcl-list { display:flex; flex-direction:column; gap:4px; }
.tcl-ev { flex-shrink:0; padding:4px 6px; }
.tcl-tm { display:block; font-size:11.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcl-ev .tc-bar-n { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-weight:600; word-break:break-word; }
.tcl-empty { padding:8px 0; text-align:center; font-size:12px; color:#b3b6bc; }

/* 月表示 */
.tcm-dow { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-bottom:1px solid var(--vb-border); }
.tcm-dow div { text-align:center; font-size:12px; color:var(--vb-text); padding:6px 0; }
.tcm-dow .is-sun { color:#c62b41; }
.tcm-dow .is-sat { color:#0b6aa3; }
.tcm-week { position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-bottom:1px solid #eef0f3; }
.tcm-cell { position:relative; min-height:calc(34px + 3 * (var(--tc-bar-h) + 2px)); border-left:1px solid #eef0f3; }
.tcm-cell:first-child { border-left:none; }
.tcm-cell.is-out { background:#fafafb; }
.tcm-cell.is-out .tcm-num { color:#b3b6bc; }
.tcm-cell.is-drop, .tcw-adcell.is-drop, .tcl-day.is-drop { background:#e6f4f5; }
.tcm-num { display:inline-block; margin:3px 0 0 4px; min-width:24px; height:24px; padding:0 4px; line-height:24px; text-align:center; border-radius:12px; font-size:13px; font-weight:600; color:var(--vb-heading); text-decoration:none; }
.tcm-num:hover { background:#eef0f3; }
.tcm-cell.is-sun .tcm-num { color:#c62b41; }
.tcm-cell.is-sat .tcm-num { color:#0b6aa3; }
.tcm-cell.is-today .tcm-num { background:var(--vb-primary); color:#fff; }
.tcm-bars { position:absolute; left:0; right:0; top:26px; bottom:0; pointer-events:none; }
.tcm-bars .tc-bar { pointer-events:auto; }

/* 「+N件」の一覧 */
.tc-pop { position:absolute; z-index:40; left:var(--tc-px,0); top:var(--tc-py,0); width:250px; max-width:calc(100vw - 48px); background:#fff; border:1px solid var(--vb-border); border-radius:12px; box-shadow:0 16px 40px rgba(58,53,65,.22); padding:10px; }
.tc-pop-h { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700; color:var(--vb-heading); margin-bottom:8px; }
.tc-pop-x { border:none; background:none; cursor:pointer; color:var(--vb-text); font-size:14px; padding:2px 4px; }
.tc-pop-list { display:flex; flex-direction:column; gap:4px; max-height:300px; overflow-y:auto; }
/* 件数が多いと flex の既定（縮む）で1件ずつが潰れて読めなくなるので、縮ませずに一覧をスクロールさせる */
.tc-pop-list .tc-bar, .tc-pop-list .tc-ev { flex-shrink:0; position:static; width:auto; height:auto; padding:4px 8px; white-space:normal; }
.tc-pop-list .tc-ev-t, .tc-pop-list .tc-ev-n { display:inline; }
.tc-pop-list .tc-ev-t { margin-right:4px; }

/* 狭い画面：週は横スクロール、一覧は日を縦に積む（カードを画面の幅いっぱいに出す）、月は時刻を省く */
@media (max-width:760px) {
  .tcw-inner { min-width:640px; }
  .tcl { grid-template-columns:minmax(0,1fr); }
  .tcl-day { display:grid; grid-template-columns:52px minmax(0,1fr); gap:8px; min-height:0; padding:8px 0; border-left:none; border-bottom:1px solid #eef0f3; }
  .tcl-dh { justify-content:flex-start; padding:0; }
  .tcl-ev .tc-bar-n { -webkit-line-clamp:3; }
  .tcl-empty { padding:4px 0; text-align:left; }
  .tcal-head .cal-head-right { margin-left:0; }
  .tcm-cell { min-height:calc(32px + 3 * (var(--tc-bar-h) + 2px)); }
  .tcm-bars .tc-bar, .tcm-bars .tc-more { font-size:11px; padding:2px 3px; }
  .tcm-bars .tc-bar-tm { display:none; }
  .tc-legend-note { margin-left:0; }
}

/* ===== 取引先詳細：左サイドバー固定＋右タブ切替（main の VK-02 再編を craftbox のティール配色で取り込み） ===== */
.cl-shell { display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start; }
@media(max-width:980px){ .cl-shell { grid-template-columns:1fr; } }
.cl-side { position:sticky; top:80px; display:flex; flex-direction:column; gap:14px; }
.cl-side.is-tall { position:static; }   /* 画面より背が高いときは追従しない（JSで付ける） */
@media(max-width:980px){ .cl-side { position:static; } }
.cl-side .card { margin-bottom:0; }
.cl-side .ck-grid { grid-template-columns:1fr; }        /* サイドバーではタイルを縦一列に */
.cl-side .edit-src[hidden] { display:none; }
.cl-main { min-width:0; }

.cl-tabs .badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; font-size:10.5px; font-weight:700; background:#edeeef; color:#8a8d93; margin-left:2px; }
.cl-tab.active .badge { background:rgba(255,255,255,.25); color:#fff; }
.cl-tab .badge.warn { background:#fff4d9; color:#a06d00; }
.cl-tab.active .badge.warn { background:#fff4d9; color:#a06d00; }
.cl-tab .badge.danger { background:#fde7ea; color:#b0202f; }
.cl-tab.active .badge.danger { background:#fde7ea; color:#b0202f; }
.cl-panel { display:none; }
.cl-panel.active { display:block; }
.cl-panel .card:last-child { margin-bottom:0; }
@keyframes cl-flash { 0%{ box-shadow:0 0 0 3px rgba(15,127,131,.35);} 100%{ box-shadow:none; } }
.cl-flash { animation: cl-flash 1s ease-out; }
.cl-empty { font-size:13px; color:var(--vb-text); padding:20px 0; text-align:center; }
.cl-shell .c-red { color:var(--vb-danger); }
.stat-unit { font-size:14px; margin-left:2px; }
.col-w40 { width:40px; }
.tp-score { font-size:20px; } .tp-score .tp-unit { font-weight:400; }

/* 最近の動き・接点のタイムライン */
.cl-timeline-item { position:relative; display:flex; gap:12px; }
.cl-timeline-item + .cl-timeline-item { margin-top:2px; }
.cl-timeline-item::before { content:''; position:absolute; left:15px; top:34px; bottom:-2px; width:2px; background:var(--vb-border); }
.cl-timeline-item:last-child::before { display:none; }
.cl-timeline-ic {
  position:relative; z-index:1; flex:0 0 auto; width:32px; height:32px; margin:2px 0 14px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--vb-border);
}
.cl-timeline-ic.c-blue   { background:#e3f0fa; }
.cl-timeline-ic.c-cyan   { background:#e6f4f5; }
.cl-timeline-ic.c-green  { background:#e6f7d9; }
.cl-timeline-ic.c-orange { background:#ffe6d1; }
.cl-timeline-body { flex:1 1 auto; min-width:0; padding:3px 0 16px; border-bottom:1px solid #f4f5fa; }
.cl-timeline-item:last-child .cl-timeline-body { border-bottom:none; padding-bottom:2px; }
.cl-timeline-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cl-timeline-cat { font-size:13.5px; font-weight:800; color:var(--vb-heading); }
.cl-timeline-date { font-size:12px; color:var(--vb-text); white-space:nowrap; }
.cl-timeline-text { font-size:13.5px; color:var(--vb-text); margin-top:3px; line-height:1.6; overflow-wrap:anywhere; }
.cl-timeline-meta { font-size:12px; color:var(--vb-text); margin-top:3px; }

/* 補足説明のツールチップ（infoアイコンにホバー/タップすると吹き出しで説明を出す。常時表示の長文を隠す用） */
.vl-info-wrap { position:relative; display:inline-flex; align-items:center; }
.vl-info { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:none; background:transparent; color:#b7b4bd; font-size:15px; cursor:pointer; padding:0; margin-left:4px; font-family:inherit; }
.vl-info:hover { color:var(--vb-primary); }
.vl-info-pop { display:none; position:absolute; top:24px; left:0; z-index:20; width:260px; background:#2f3a3b; color:#fff; font-size:12.5px; font-weight:400; line-height:1.6; padding:10px 12px; border-radius:8px; box-shadow:var(--vb-shadow-card); }
.vl-info-pop.is-open { display:block; }
/* PC等ホバーできる環境だけ：ホバー中も出す（タッチ環境で hover が押しっぱなし扱いになるのを避ける） */
@media (hover: hover) { .vl-info-wrap:hover .vl-info-pop { display:block; } }
.vl-info-pop::before { content:''; position:absolute; top:-5px; left:8px; border:5px solid transparent; border-bottom-color:#2f3a3b; }

/* 一覧の列ヘッダーで並び替え */
.vl-th-sort { cursor:pointer; user-select:none; white-space:nowrap; }
.vl-th-sort:hover { color:var(--vb-primary); }
.vl-th-sort i { margin-left:3px; font-size:10px; color:#c7c5cb; }
.vl-th-sort.is-asc i, .vl-th-sort.is-desc i { color:var(--vb-primary); }

/* 行の三点メニュー */
.row-menu { position:relative; display:inline-block; }
.row-menu-pop { position:absolute; top:100%; right:0; margin-top:4px; min-width:168px; background:#fff; border:1px solid var(--vb-border); border-radius:10px; box-shadow:0 14px 34px rgba(15,60,62,.18); padding:6px; z-index:60; text-align:left; }
.row-menu-pop[hidden] { display:none; }
.row-menu-item { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; font-size:12.5px; color:var(--vb-heading); cursor:pointer; white-space:nowrap; text-decoration:none; background:none; border:none; width:100%; font-family:inherit; }
.row-menu-item i { width:14px; text-align:center; color:#b4b2b7; }
.row-menu-item:hover { background:#e6f4f5; color:var(--vb-primary); }
.row-menu-item:hover i { color:var(--vb-primary); }
.row-menu-item.danger:hover { background:#fde7ea; color:#b0202f; }
.row-menu-item.danger:hover i { color:#b0202f; }
.is-hidden { display:none !important; }
/* ===== 業種ピッカー（大分類 → 中分類 → 業種）=====
   業種は387件あり、名前順に並べると「その他の◯◯」が先頭に固まって探せない。
   分類を辿って選ぶ・名前で探す、の2通りで見つけられるようにする。 */
.itp { display:inline-flex; }
.itp-open {
  display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:8px 14px;
  border:1px solid var(--vb-border); border-radius:var(--vb-r-btn); background:#fff;
  font-family:inherit; font-size:14px; color:var(--vb-text); cursor:pointer; max-width:260px;
}
.itp-open:hover { border-color:var(--vb-primary); color:var(--vb-primary); }
.itp-open.on { border-color:var(--vb-primary); color:var(--vb-primary); font-weight:700; }
.itp-open-arw { font-size:11px; color:#b7b4bd; margin-left:auto; }
.itp-search { margin-bottom:10px; }
.itp-crumb { display:flex; align-items:center; gap:8px; margin-bottom:10px; min-height:26px; }
.itp-back {
  border:1px solid var(--vb-border); background:#fff; border-radius:6px; padding:3px 10px;
  font-family:inherit; font-size:13px; color:var(--vb-text); cursor:pointer;
}
.itp-back:hover { border-color:var(--vb-primary); color:var(--vb-primary); }
.itp-crumb-t { font-size:13px; font-weight:700; color:var(--vb-heading); }
.itp-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
@media (max-width:760px) { .itp-grid { grid-template-columns:1fr; } }
.itp-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; position:relative;
  padding:12px 34px 12px 14px; border:1px solid #eeedf5; border-radius:10px; background:#f8f8fb;
  font-family:inherit; font-size:14px; color:var(--vb-heading); text-align:left; cursor:pointer; min-height:56px;
}
.itp-card:hover { background:#fff; border-color:var(--vb-primary); box-shadow:0 4px 12px rgba(15,127,131,.12); }
.itp-card-t { font-weight:700; line-height:1.4; }
.itp-card-sub { font-size:11.5px; color:#89868d; }
.itp-card-n { font-size:11.5px; color:#89868d; }
.itp-card-arw { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:11px; color:#b7b4bd; }
.itp-empty { font-size:13.5px; color:#89868d; padding:10px 2px; }
.itp-foot { display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--vb-border); }

/* 取引先の削除（取引先詳細 > 基本情報の一番下）。ふだんは目立たせず、赤は枠と注意書きだけ */
.danger-zone { margin-top:16px; border-color:#f0c4cb; box-shadow:none; }
.danger-zone-note { margin-top:10px; padding:10px 12px; border-radius:8px; background:#fdf1f3; border:1px solid #f0c4cb; color:#8f1d30; font-size:13.5px; line-height:1.7; }
.danger-zone-note i { margin-right:4px; }
.btn-outline.text-danger { border-color:#e3a3ad; color:var(--vb-danger); }
.btn-outline.text-danger:hover { background:#fdf1f3; border-color:var(--vb-danger); color:var(--vb-danger); }
/* 取引先名が一致するまでは押せないことを見た目でも示す */
.js-name-confirm .btn-danger:disabled { opacity:.4; cursor:not-allowed; filter:none; }