/* ==========================================================================
   パターン：詳細・横から開くパネル・案件・フォームと送る前の確認・見積書／請求書
   （pattern-record-case-form-doc.html が使う。接頭辞 p-）
   L06 詳細／L07 横から開くパネル／案件の新しい形（decisions 28）／P18・P62／L16・P81
   土台（tokens・base・layout）は書き換えず、足りない物だけここに置く。
   ========================================================================== */

/* ---- 見出しの小物 -------------------------------------------------------- */
.p-stars { display: inline-flex; gap: 1px; color: var(--vb-star); flex: none; }
.p-stars .vb-i { width: 16px; height: 16px; }
.p-stars .vb-i svg { fill: currentColor; }
.p-stars .is-off { color: #cdd2e1; }
.p-stars .is-off svg { fill: none; }

/* ---- L06 詳細：左にタブの中身・右に項目欄（幅 320） ---------------------- */
.p-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--vb-card-gap); align-items: start; min-width: 0; }
.p-detail[data-aside="off"] { grid-template-columns: minmax(0, 1fr); }
.p-detail[data-aside="off"] > .p-detail__aside { display: none !important; }
.p-detail__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.p-detail__main > [role="tabpanel"] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.p-detail__main > [role="tabpanel"][hidden] { display: none; }
.p-detail__aside { min-width: 0; }
.p-detail__aside > * + * { margin-top: 16px; }   /* 右の欄に項目のカードと別のカード（添付など）が重なる時、隙間が 0 にならないように（欄は block のまま） */
.p-tab-kv { display: none; }
@media (min-width: 1024px) {
  .p-detail[data-aside="on"] > .p-detail__aside[hidden] { display: block !important; }
}
@media (max-width: 1023px) {
  .p-detail { display: flex; flex-direction: column; align-items: stretch; }   /* 左右の列が縦に積む時の段の間は gap（block のままだと、本文のカードと項目のカードの隙間が 0 になった） */
  .p-tab-kv { display: inline-flex; }
  .p-detail__aside:not([hidden]) { display: block !important; }
}

/* カードの見出しの操作（使う時だけ出す：マウス・フォーカス。指で触る端末は常に） */
.p-card-acts { display: flex; align-items: center; gap: 2px; margin-left: auto; opacity: 0; transition: opacity var(--vb-dur-instant); }
.vb-card:hover .p-card-acts, .vb-card:focus-within .p-card-acts, .vb-card.is-hover .p-card-acts { opacity: 1; }
@media (hover: none) { .p-card-acts { opacity: 1; } }
.p-cardsub { font: var(--vb-text-caption); color: var(--vb-ink-3); white-space: nowrap; }

/* 活動：種類で絞るチップの行 */
.p-actfilter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.p-actfilter::-webkit-scrollbar { display: none; }
.p-composer-subject { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0; }
.p-composer-subject .vb-composer__to { width: 36px; }
.p-composer-subject .vb-input { height: 36px; }
.vb-composer .vb-field__error { padding: 0 14px 4px; }

/* 取引先の「案件」タブ：継続と単発に分けて並べる */
.p-caserow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--vb-line-2); border-radius: var(--vb-radius-md); background: #fff; color: inherit; text-decoration: none; min-width: 0; }
.p-caserow + .p-caserow { margin-top: 10px; }
.p-caserow:hover { background: var(--vb-row-hover); text-decoration: none; }
.p-caserow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.p-caserow__title { display: flex; align-items: center; gap: 8px; font: 700 15px/1.35 var(--vb-font); color: var(--vb-ink); min-width: 0; }
.p-caserow__title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.p-caserow__sub { font: var(--vb-text-sm); color: var(--vb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-caserow__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font: var(--vb-text-sm); color: var(--vb-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-caserow > .vb-i { color: var(--vb-ink-3); }
@media (max-width: 767px) {
  .p-caserow { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .p-caserow__side { flex-direction: row; align-items: center; order: 3; flex-basis: 100%; justify-content: space-between; }
  .p-caserow > .vb-i:last-child { display: none; }
}

/* 案件の段階（見積 → 制作 → 納品 → 請求 → 入金） */
.p-stages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.p-stage { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--vb-radius-pill); background: var(--vb-surface-3); font: 600 12px/1 var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; }
.p-stage .vb-i { width: 12px; height: 12px; }
.p-stage.is-done { background: var(--vb-success-bg); color: var(--vb-success-ink); }
.p-stage.is-current { background: var(--vb-primary-strong); color: #fff; }

/* ---- タスクの一覧（グループ・サブタスク・節目） -------------------------- */
.p-tasktools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.p-tasktools .vb-control { width: 260px; max-width: 100%; }
@media (max-width: 767px) { .p-tasktools .vb-control { width: 100%; order: 3; } }
/* 列は一覧の型（表）と同じ順：タスク名・担当・期日・状態・ラベル */
.p-tasks { --p-cols: 44px minmax(0, 1fr) 148px 72px 92px 132px 48px; background: #fff; border-radius: var(--vb-radius-card); box-shadow: var(--vb-shadow-card); overflow: hidden; min-width: 0; }
.p-tasks__head, .p-trow { display: grid; grid-template-columns: var(--p-cols); align-items: center; min-width: 0; }
.p-tasks__head { height: 42px; background: var(--vb-surface-2); border-bottom: 1px solid var(--vb-line-2); font: 700 12.5px/1 var(--vb-font); color: var(--vb-ink-3); }
.p-tasks__head > span { padding: 0 10px; white-space: nowrap; }
.p-trow { min-height: 50px; border-bottom: 1px solid var(--vb-line); cursor: pointer; position: relative; }
.p-trow > * { padding: 0 10px; min-width: 0; }
.p-trow:hover, .p-trow.is-hover { background: var(--vb-row-hover); }
.p-trow.is-selected { background: var(--vb-row-selected); box-shadow: inset 3px 0 0 var(--vb-primary); }
.p-trow .p-c-check { padding: 0 0 0 16px; display: flex; align-items: center; }
.p-trow .p-c-check .vb-check input { opacity: 0; }
.p-trow:hover .p-c-check .vb-check input, .p-trow.is-hover .p-c-check .vb-check input, .p-trow.is-selected .p-c-check .vb-check input, .p-trow:focus-within .p-c-check .vb-check input, .p-tasks.is-selecting .p-c-check .vb-check input { opacity: 1; }
.p-c-name { display: flex; align-items: center; gap: 8px; font: 600 16px/1.4 var(--vb-font); color: var(--vb-ink); }
.p-c-name__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.p-c-name small { font: var(--vb-text-caption); color: var(--vb-ink-3); white-space: nowrap; flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.p-c-dep { display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; max-width: 45%; font: var(--vb-text-caption); color: var(--vb-ink-3); }
.p-c-dep > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.p-c-dep .vb-icon, .p-c-dep svg { flex: none; width: 14px; height: 14px; }
.p-c-label, .p-c-who, .p-c-due, .p-c-st { display: flex; align-items: center; }
.p-c-who .vb-person { font: 500 13px/1.3 var(--vb-font); color: var(--vb-ink-2); }
.p-c-due { font: 500 13px/1.3 var(--vb-font); color: var(--vb-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-c-num { font: 500 13px/1.3 var(--vb-font); color: var(--vb-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; justify-content: flex-end; display: flex; }
.p-c-acts { display: flex; justify-content: flex-end; padding-right: 8px !important; visibility: hidden; }
.p-trow:hover .p-c-acts, .p-trow.is-hover .p-c-acts, .p-trow:focus-within .p-c-acts, .p-trow:has(.vb-menu:not([hidden])) .p-c-acts { visibility: visible; }
.p-tasks.is-selecting .p-c-acts { visibility: hidden !important; }
@media (hover: none) { .p-c-acts { visibility: visible; } .p-trow .p-c-check .vb-check input { opacity: 1; } }
.p-subtoggle { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 6px 0 4px; border: 0; border-radius: 6px; background: transparent; font: 600 11.5px/1 var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; flex: none; }
.p-subtoggle:hover { background: var(--vb-surface-3); color: var(--vb-ink-2); }
.p-subtoggle .vb-i { width: 14px; height: 14px; transition: transform var(--vb-dur); }
.p-subtoggle[aria-expanded="false"] .vb-i { transform: rotate(-90deg); }
.p-trow--sub .p-c-name { padding-left: 34px; font-weight: 500; }
.p-trow--sub .p-c-name > .vb-i:first-child { width: 15px; height: 15px; color: var(--vb-ink-4); }
.p-mile { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; }
.p-mile::before { content: ""; width: 11px; height: 11px; border-radius: 2px; background: var(--vb-primary); transform: rotate(45deg); }
.p-trow--mile .p-c-name { font-weight: 700; }
/* まとまりの見出し（グループ・ラベル・担当） */
.p-tgroup { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px 0 10px; background: #fbfaff; border-bottom: 1px solid var(--vb-line); min-width: 0; }
.p-tgroup__toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 4px; border: 0; border-radius: 8px; background: transparent; font: 800 14px/1 var(--vb-font); color: var(--vb-ink); white-space: nowrap; min-width: 0; }
.p-tgroup__toggle:hover { background: var(--vb-surface-3); }
/* まとまりの見出しの名前が長い時に、件数・期間・進み具合を押し出さない。人の名前は字の下側が切れないよう下に余白 */
.p-tgroup__toggle { flex: 0 1 auto; max-width: 55%; }
.p-tgroup__toggle .vb-person__name { padding-bottom: 2px; margin-bottom: -2px; }
@media (max-width: 767px) {
  .p-tgroup__toggle { max-width: 100%; }
  /* 行に添えるグループ名は、狭い幅では名前の下の行へ（横に並べると 1 字分も残らない） */
  .p-trow .p-c-name { flex-wrap: wrap; row-gap: 2px; }
  .p-trow .p-c-name small { flex: 1 0 100%; max-width: 100%; }
  .p-trow .p-c-dep { flex: 1 0 100%; max-width: 100%; }
}
.p-tgroup__toggle > .vb-i { width: 16px; height: 16px; color: var(--vb-ink-3); transition: transform var(--vb-dur); }
.p-tgroup.is-closed .p-tgroup__toggle > .vb-i { transform: rotate(-90deg); }
.p-tgroup__meta { display: flex; align-items: center; gap: 12px; min-width: 0; font: 500 12.5px/1 var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-tgroup__meta .vb-meta .vb-i { width: 14px; height: 14px; }
.p-tgroup__meta .vb-progress { width: 140px; }
.p-tgroup__acts { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity var(--vb-dur-instant); }
.p-tgroup:hover .p-tgroup__acts, .p-tgroup:focus-within .p-tgroup__acts { opacity: 1; }
@media (hover: none) { .p-tgroup__acts { opacity: 1; } }
.p-tgroup.is-closed + .p-tgroup__rows { display: none; }
.p-tasks__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; }
.p-tasks .vb-empty { border-bottom: 1px solid var(--vb-line); }
/* 継続の案件：月のタスク（日付・作業時間の列） */
.p-tasks--month { --p-cols: 64px minmax(0, 1fr) 132px 56px 124px 92px; }   /* 作業時間の列：数字のあとに「見込み」の札が並んでも、隣の列へはみ出さない幅 */
.p-tasks--month .p-c-num .vb-tag, .p-tasks--month .p-c-meta .vb-tag { margin-left: 6px; }
.p-tasks--month .p-trow { cursor: default; }
.p-tasks--month .p-trow > :first-child { padding-left: 18px; }
/* 1279 以下：担当は頭文字だけ・ラベルを細く */
@media (max-width: 1279px) {
  .p-tasks { --p-cols: 44px minmax(0, 1fr) 44px 68px 88px 124px 44px; }
  .p-tasks .p-c-who .vb-person__name { display: none; }
  .p-tasks .p-tasks__head .p-h-who { padding: 0 4px; }
  .p-tasks--month { --p-cols: 56px minmax(0, 1fr) 120px 44px 112px 88px; }
}
@media (max-width: 1023px) {
  .p-tgroup__meta .vb-progress { width: 90px; }
}
/* 767 以下：1 件を 2 行のカードにする（名前／ラベル・期日・担当・状態） */
@media (max-width: 767px) {
  .p-tasks__head { display: none; }
  .p-trow { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "c n s" "c m m"; padding: 10px 12px 10px 0; row-gap: 6px; }
  .p-trow > * { padding: 0 6px; }
  .p-trow .p-c-check { grid-area: c; padding-left: 12px; align-self: start; padding-top: 2px; }
  .p-trow .p-c-name { grid-area: n; white-space: normal; }
  .p-trow .p-c-st { grid-area: s; justify-content: flex-end; }
  .p-trow .p-c-label, .p-trow .p-c-who, .p-trow .p-c-due { grid-area: m; }
  .p-trow .p-c-acts { display: none; }
  .p-trow .p-c-meta { grid-area: m; display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 12.5px/1.3 var(--vb-font); color: var(--vb-ink-3); }
  .p-trow .p-c-label, .p-trow .p-c-who, .p-trow .p-c-due, .p-trow .p-c-num { display: none; }
  .p-trow--sub .p-c-name { padding-left: 22px; }
  .p-tgroup { flex-wrap: wrap; padding: 6px 10px; row-gap: 2px; }
  .p-tgroup__meta { flex-basis: 100%; padding-left: 28px; padding-bottom: 6px; gap: 10px; }
  .p-tgroup__meta .vb-progress { width: 80px; }
  .p-tgroup__acts { position: absolute; right: 8px; }
  .p-tgroup { position: relative; }
  .p-tasks--month .p-trow > :first-child { padding-left: 12px; }
  .p-tasks--month .p-trow { grid-template-areas: "c n s" "c m m"; grid-template-columns: 52px minmax(0, 1fr) auto; }
}
.p-c-meta { display: none; }

/* ---- 2 列（中身＋右の列 360） ------------------------------------------- */
.p-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; min-width: 0; }
.p-cols__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1279px) { .p-cols { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 1023px) { .p-cols { grid-template-columns: minmax(0, 1fr); } }

/* 継続の案件：月の切替 */
.p-casemonth { display: flex; align-items: center; gap: 6px; min-width: 0; }
.p-casemonth .vb-seg { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.p-casemonth .vb-seg__btn .vb-count { height: 18px; min-width: 0; padding: 0 6px; font-size: 10.5px; }
.p-casemonth__short { display: none; }
@media (max-width: 767px) { .p-casemonth__long { display: none; } .p-casemonth__short { display: inline; } .p-casemonth .vb-seg { flex: 1; } .p-casemonth .vb-seg__btn { flex: 1; } }

/* 請求の流れ（下書き → 発行済 → 入金済） */
.p-flow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.p-flow__step { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--vb-radius-pill); background: var(--vb-surface-3); font: 600 12px/1 var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; }
.p-flow__step.is-current { background: var(--vb-primary-strong); color: #fff; }
.p-flow__step.is-done { background: var(--vb-success-bg); color: var(--vb-success-ink); }
.p-flow > .vb-i { width: 12px; height: 12px; color: var(--vb-ink-4); }
.p-amounts { display: flex; flex-direction: column; gap: 8px; font: 500 13.5px/1.4 var(--vb-font); color: var(--vb-ink-2); font-variant-numeric: tabular-nums; }
.p-amounts > div { display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.p-amounts > div > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-amounts .is-grand { padding-top: 10px; border-top: 1px solid var(--vb-line-2); font: 800 18px/1.3 var(--vb-font); color: var(--vb-ink); }
.p-hours { display: flex; align-items: baseline; gap: 6px; font: var(--vb-text-sm); color: var(--vb-ink-3); }
.p-hours b { font: var(--vb-text-num-lg); color: var(--vb-ink); font-variant-numeric: tabular-nums; }
.p-contract { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--vb-line); min-width: 0; }
.p-contract:first-child { border-top: 0; padding-top: 0; }
.p-contract__top { display: flex; justify-content: space-between; gap: 10px; font: 700 14px/1.4 var(--vb-font); color: var(--vb-ink); min-width: 0; }
.p-contract__top > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-contract__sub { font: var(--vb-text-caption); color: var(--vb-ink-3); }
.p-cardfoot { display: flex; gap: 8px; flex-wrap: wrap; }
.p-cardfoot .vb-btn { flex: 1 1 auto; }

/* ---- お金：グループやタスクを選んで請求を作る --------------------------- */
.p-bill { display: flex; flex-direction: column; min-width: 0; }
.p-billrow { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 4px; border-bottom: 1px solid var(--vb-line); min-width: 0; cursor: pointer; }
.p-billrow:hover { background: var(--vb-row-hover); }
.p-billrow.is-selected { background: var(--vb-row-selected); }
.p-billrow--task { padding-left: 30px; }
.p-billrow__name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font: 600 14px/1.4 var(--vb-font); color: var(--vb-ink); }
.p-billrow__name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.p-billrow--group .p-billrow__name { font-weight: 800; }
.p-billrow__amt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 700 14px/1.2 var(--vb-font); color: var(--vb-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-billrow__amt small { font: var(--vb-text-caption); color: var(--vb-ink-3); }
.p-billrow.is-off { cursor: default; }
.p-billrow.is-off .p-billrow__name, .p-billrow.is-off .p-billrow__amt { color: var(--vb-ink-4); }
.p-billsum { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-top: 14px; border-radius: var(--vb-radius-sm); background: var(--vb-primary-soft); font: 700 13.5px/1.4 var(--vb-font); color: var(--vb-primary-ink); font-variant-numeric: tabular-nums; }
.p-docnote { display: flex; align-items: center; gap: 6px; font: var(--vb-text-sm); color: var(--vb-ink-3); }
.p-docnote .vb-i { width: 15px; height: 15px; }
.p-billdoc { display: flex; flex-direction: column; gap: 12px; }
.p-billdoc__to { font: 800 15px/1.4 var(--vb-font); color: var(--vb-ink); }
.p-billdoc__subject { font: var(--vb-text-sm); color: var(--vb-ink-2); }

/* ---- L07 横から開くパネル（プレビュー） ---------------------------------- */
.p-pv { --p-pvw: 560px; width: min(var(--p-pvw), 100%); }
@media (min-width: 768px) { .p-pv { top: var(--vb-topbar-h); border-radius: var(--vb-radius-lg) 0 0 0; } }
@media (min-width: 768px) and (max-width: 1023px) { .p-pv { width: min(480px, 100%); } }
@media (min-width: 1280px) {
  .p-pv-open .vb-page[data-screen="list"] { padding-right: calc(var(--p-pvw, 560px) + 24px); }
  .p-pv-open .p-col-opt { display: none; }
}
.p-pv .vb-panel__head { gap: 4px; padding: 0 10px 0 12px; }
.p-pv .vb-panel__resize:hover, .p-pv.is-resizing .vb-panel__resize { background: var(--vb-primary-soft-2); }
.p-pv__title { font: var(--vb-text-h2); color: var(--vb-ink); }
.p-pvkv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.p-pvkv .vb-kv__row { grid-template-columns: 84px minmax(0, 1fr); }
.p-pvkv .p-pvkv__full { grid-column: 1 / -1; }
.p-pvstats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.p-pvstats .vb-stat { box-shadow: none; background: var(--vb-surface-2); padding: 12px 14px; }
.p-pvstats .vb-stat__num { font-size: 20px; }
.p-pvsec { display: flex; flex-direction: column; gap: 4px; }
.p-pvsec__title { font: var(--vb-text-h3); color: var(--vb-ink); padding: 4px 0; }
.p-pvgroup { display: flex; align-items: center; gap: 6px; height: 34px; font: 800 13.5px/1 var(--vb-font); color: var(--vb-ink); white-space: nowrap; }
.p-pvgroup .vb-i { width: 15px; height: 15px; color: var(--vb-ink-3); }
.p-pvtask { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 4px; border-bottom: 1px solid var(--vb-line); min-width: 0; }
.p-pvtask__name { flex: 1; min-width: 0; font: 500 14px/1.4 var(--vb-font); color: var(--vb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-pvtask__name small { font: var(--vb-text-caption); color: var(--vb-ink-3); margin-left: 6px; }
@media (max-width: 767px) {
  .p-pv .vb-panel__head { height: 52px; }
  .p-pvkv { grid-template-columns: minmax(0, 1fr); }
  .p-pv__title { font-size: 18px; }
  .p-pv .vb-panel__resize { display: none; }
}
/* 一覧：表（768 以上）と 1 件 1 枚のカード（767 以下） */
@media (min-width: 768px) { .p-only-narrow { display: none !important; } }
@media (max-width: 767px) { .p-only-wide { display: none !important; } }
.p-cardlist { display: flex; flex-direction: column; background: #fff; border-radius: var(--vb-radius-card); box-shadow: var(--vb-shadow-card); overflow: hidden; }
.p-cardlist .vb-row { min-height: 64px; }
.p-cardlist .vb-row__title { display: flex; align-items: center; gap: 6px; }
.p-cardlist .vb-row__title > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.p-cardlist .vb-row > .vb-i { color: var(--vb-ink-3); }

/* ---- フォーム（作成のパネル・下のシート） -------------------------------- */
.p-formstack { display: flex; flex-direction: column; gap: 16px; }
.p-sheetform { display: flex; flex-direction: column; gap: 14px; padding: 4px 20px 8px; }

/* ---- L16 帳票：左で入力・右で紙面 ---------------------------------------- */
.p-doc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; min-width: 0; }
/* 1280 以上は入力の側を広く（1.2 : 1 のままだと 1440 で品名が 12 字ほどしか見えない。紙面は箱の幅に合わせて縮む・見積の画面から戻した） */
@media (min-width: 1280px) { .p-doc { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.p-doc__input { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.p-doc__paperwrap { position: sticky; top: calc(var(--vb-topbar-h) + 8px); padding: 20px; border-radius: var(--vb-radius-card); background: #e9e5f5; box-shadow: inset 0 0 0 1px var(--vb-line-2); min-width: 0; }
.p-docswitch { display: none; }
.p-doc .vb-form { gap: 14px 16px; }
.p-doc .vb-totals { margin-top: 8px; }
.p-lines-wrap { margin: 0 -4px; }
.p-lines-wrap .vb-lines { table-layout: fixed; }
.p-lines-wrap .vb-lines th:nth-child(1) { width: 20px; }
.p-lines-wrap .vb-lines th:nth-child(3) { width: 56px; }
.p-lines-wrap .vb-lines th:nth-child(4) { width: 64px; }   /* 単位の列：「人日」「ページ」が欄の中で切れない幅（見積の画面から戻した） */
.p-lines-wrap .vb-lines th:nth-child(5) { width: 104px; }
.p-lines-wrap .vb-lines th:nth-child(6) { width: 92px; }
.p-lines-wrap .vb-lines th:nth-child(7) { width: 32px; }
.p-lines-wrap .vb-lines td, .p-lines-wrap .vb-lines th { overflow: hidden; text-overflow: ellipsis; }
.p-lines-wrap .vb-lines .is-amt { padding-right: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--vb-ink); }
.p-lines-wrap .vb-lines .is-n { width: 64px; }
.p-lines-wrap .vb-lines .is-u { width: 64px; }
.p-lines-wrap .vb-lines .is-p { width: 120px; }
.p-lines-cards { display: none; }
.p-linecards { display: flex; flex-direction: column; gap: 8px; }
.p-linecards .vb-linecard { cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit; }
.p-linecards .vb-linecard:hover { background: var(--vb-row-hover); }
.p-readonly .vb-lines .is-x, .p-readonly .vb-lines .is-grip { visibility: hidden; }
/* 紙面（A4 の縦。幅 560 で組み、列の幅に合わせて縮める） */
.p-paperbox { position: relative; overflow: hidden; max-width: 560px; margin: 0 auto; }
.p-paper { position: absolute; left: 0; top: 0; width: 560px; min-height: 792px; padding: 52px 44px 44px; background: #fff; box-shadow: 0 8px 24px rgba(40, 30, 90, .14); transform-origin: 0 0; color: #1f2937; font: 400 11.5px/1.6 var(--vb-font); }
.p-paper__title { text-align: center; font: 800 22px/1.2 var(--vb-font); letter-spacing: .3em; color: var(--vb-ink); padding-bottom: 14px; border-bottom: 1.5px solid var(--vb-ink); margin-bottom: 22px; }
.p-paper__head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.p-paper__to { font: 800 15px/1.4 var(--vb-font); color: var(--vb-ink); border-bottom: 1px solid #c8cbd8; padding-bottom: 4px; }
.p-paper__meta { text-align: right; font: 400 10.5px/1.7 var(--vb-font); color: #4b5563; white-space: nowrap; }
.p-paper__subject { margin-bottom: 14px; }
.p-paper__total { display: flex; align-items: baseline; gap: 12px; padding: 10px 0 12px; margin-bottom: 18px; border-bottom: 1.5px solid var(--vb-ink); font: 700 12px/1 var(--vb-font); }
.p-paper__total b { font: 800 24px/1 var(--vb-font); color: var(--vb-ink); font-variant-numeric: tabular-nums; }
.p-paper table { width: 100%; border-collapse: collapse; font: 400 10.5px/1.45 var(--vb-font); }
.p-paper th { background: #f1f0f7; font-weight: 700; padding: 6px; border: 1px solid #d5d7e2; white-space: nowrap; }
.p-paper td { padding: 6px; border: 1px solid #d5d7e2; vertical-align: top; }
.p-paper .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-paper__sums { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 4px 28px; margin-top: 12px; font: 400 11px/1.5 var(--vb-font); font-variant-numeric: tabular-nums; }
.p-paper__sums dd { text-align: right; }
.p-paper__sums .is-grand { font: 800 13px/1.5 var(--vb-font); color: var(--vb-ink); border-top: 1px solid var(--vb-ink); padding-top: 4px; }
.p-paper__note { margin-top: 22px; padding: 8px 10px; border: 1px solid #d5d7e2; min-height: 48px; white-space: pre-wrap; }
.p-paper__from { margin-top: 26px; text-align: right; font: 400 10.5px/1.7 var(--vb-font); }
.p-paper__from b { font-size: 12px; }
.p-paper__stamp { display: inline-block; margin-top: 4px; padding: 2px 8px; border: 1.5px solid var(--vb-danger); color: var(--vb-danger); font: 800 11px/1.4 var(--vb-font); transform: rotate(-6deg); }
@media (max-width: 1023px) {
  .p-doc { grid-template-columns: minmax(0, 1fr); }
  .p-docswitch { display: flex; }
  .p-doc[data-view="input"] .p-doc__paperwrap { display: none; }
  .p-doc[data-view="paper"] .p-doc__input { display: none; }
  .p-doc__paperwrap { position: static; padding: 14px; }
}
@media (max-width: 767px) {
  .p-lines-wrap { display: none; }
  .p-lines-cards { display: block; }
  .p-doc .vb-form { grid-template-columns: 88px minmax(0, 1fr); gap: 10px 12px; align-items: center; }
  .p-doc .vb-form > .vb-field { display: contents; }
  .p-doc .vb-form > .vb-field > .vb-field__label { font-weight: 600; color: var(--vb-ink-2); }
  .p-doc .vb-form > .vb-field--full > .vb-field__label { align-self: start; padding-top: 10px; }
  /* 補足とエラーは、入力の欄の下（右の列）に置く。置かないと 1 つの升を取り、後ろのラベルと欄が 1 升ずつずれる */
  .p-doc .vb-form > .vb-field > .vb-field__help, .p-doc .vb-form > .vb-field > .vb-field__error { grid-column: 2; margin-top: -6px; }
  .p-doc .vb-totals { justify-content: stretch; grid-template-columns: 1fr auto; }
}

/* ---- 小物の追加 ---------------------------------------------------------- */

@media (max-width: 767px) { .vb-panel.p-formpanel:not(.vb-panel--static) { height: auto; max-height: 92%; } }
.p-pv > .vb-sheet__grip { display: none; }
@media (max-width: 767px) { .p-pv > .vb-sheet__grip { display: block; } }
.vb-table tbody tr.is-open { background: var(--vb-row-selected); }
.vb-table tbody tr.is-open td:first-child { box-shadow: inset 3px 0 0 var(--vb-primary); }
.p-cardlist .vb-row.is-open { background: var(--vb-row-selected); box-shadow: inset 3px 0 0 var(--vb-primary); }
.p-mi { display: flex; flex-direction: column; gap: 2px; }
.p-mi small { font: var(--vb-text-caption); color: var(--vb-ink-3); }
.p-pickval { border: 0; background: transparent; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
.p-kvavatars { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 34px; }
.p-filelist .vb-row { padding: 8px 4px; }
.p-namecell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.p-namecell > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.p-progcell { display: block; width: 150px; }
.p-linecards .vb-linecard__name, .p-linecards .vb-linecard__calc { display: block; }
.p-linecards .vb-linecard:disabled { cursor: default; opacity: .7; }
.p-trow { cursor: default; }

/* 活動の行：操作の列の幅を先に取る（decisions 10）。767 以下は 2 行まで折り返し、人の名前は省く */
[data-timeline] .vb-tl__acts { width: 108px; justify-content: flex-end; }
.p-detail__aside .vb-kv__val { overflow-wrap: anywhere; }
/* メールは @ と . の後で折る（base.css の .vb-mail） */
.p-detail__aside .vb-kv__val.vb-mail { overflow-wrap: break-word; }
/* 右の項目欄の「名前」の欄の幅：キーの列を 84px にする（カナ・長い値が 1 文字ぶん足りずに折れていたため。.p-pvkv と同じ幅） */
.p-detail__aside .vb-kv__row { grid-template-columns: 84px minmax(0, 1fr); }
/* 連絡先の行（2026-10-23）：1 行目＝名前［札…］［編集］、その下に部署・電話・メールを枠の全幅で出す。
   名前・部署・メール・電話を 1 つの細い列に積むと、札と鉛筆に押されて 60px ほどになりメールが 4 行に折れる。
   本文の行は並べて入る分は横に並び（部署と電話）、入らなければ次の行へ。メールは @ と . の後（<wbr>）で折り、1 行に入る時は 1 行。メモは 1 行ぶんの全幅 */
.p-contact { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; min-width: 0; }
.p-contact__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; min-height: 32px; min-width: 0; }
.p-contact__head > .vb-person { min-width: 0; }
.p-contact__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 150px; }
.p-contact__head > .vb-iconbtn { flex: none; }
.p-contact__body { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 1px; min-width: 0; font: var(--vb-text-caption); color: var(--vb-ink-3); }
.p-contact__line { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.p-contact__line--full { flex-basis: 100%; }
.p-contact__line .vb-mail { overflow-wrap: anywhere; }
.p-tasks--month .p-c-who .vb-person__name { display: none; }
@media (max-width: 767px) {
  .vb-page .vb-tl__body { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .vb-page .vb-tl__who { display: none; }
  [data-timeline] .vb-tl__acts { width: auto; }
}
@media (max-width: 767px) {

  .p-formpanel .vb-panel__foot .vb-btn { width: 100%; height: var(--vb-control-h-lg); }
  .p-doc .vb-totals { width: 100%; }
}
.p-c-date { display: flex; align-items: center; font: 500 13px/1.3 var(--vb-font); color: var(--vb-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 767px) { .p-tasks--month .p-c-date { padding-top: 3px; font-size: 12.5px; color: var(--vb-ink-3); } }
.vb-card__head:has(> .p-cardsub) > .vb-h3 { flex: none; }
.vb-card__head > .p-cardsub { margin-right: auto; }
@media (max-width: 767px) { .vb-card__head > .p-cardsub { display: none; } }
.p-formstack .vb-seg { align-self: flex-start; }
@media (min-width: 768px) and (max-width: 1023px) { .vb-panel.p-formpanel { width: min(480px, 100%); } }
/* 767 以下の確認のダイアログ：主ボタンを下（親指の位置）に。確定した画（form-sp ②・quote-sp ③）と、下のシートの並びにそろえる */
/* 1024〜1279：紙面の列を 300 に細くして、入力の明細に幅を回す（左右に並べたまま打った値がすぐ映る） */
@media (min-width: 1024px) and (max-width: 1279px) { .p-doc { grid-template-columns: minmax(0, 1fr) 300px; } .p-doc__paperwrap { padding: 12px; } }