/* ==========================================================================
   パターン：表・ガント・ボード（pattern-table-gantt-board.html）
   tokens.css・base.css・layout.css の後に読む。
   vb- で始まる物＝製品に持ち込む候補（土台へ移す候補）。
   p- で始まる物＝この見本の組み立てだけに使う物。
   ========================================================================== */

/* ---- 共通：PC だけ・スマホだけ ------------------------------------------ */
.p-sp { display: none; }
.p-ellipsis { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-dotsep { color: var(--vb-ink-4); margin: 0 4px; }
.p-mb { margin-bottom: 6px; }
.vb-pagehead__title { cursor: default; }

/* 道具の行：絞り込みのチップは 1 つの塊（高さ 32 のチップ同士で並ぶ） */
.p-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.p-filters:empty { display: none; }
@media (min-width: 768px) { .p-toolbar .vb-toolbar__search { width: 260px; } }
@media (min-width: 768px) and (max-width: 1279px) { .p-toolbar .vb-toolbar__search { width: 220px; } }
.vb-filter__val { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* ---- 表（P33・L04） ------------------------------------------------------ */
.p-tw .vb-mcards { display: none; }
.vb-table td.p-tdcut { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.p-tw .vb-table .is-check { width: 44px; min-width: 44px; }
.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); }
.vb-table tbody tr.is-done .p-tree__text > .p-ellipsis { color: var(--vb-ink-3); }
.vb-table .vb-status { cursor: pointer; }
.p-emptyrow td { height: auto !important; white-space: normal; }
.vb-table tbody tr.p-emptyrow, .vb-table tbody tr.p-skelrow { cursor: default; }
.vb-table tbody tr.p-emptyrow:hover, .vb-table tbody tr.p-skelrow:hover { background: transparent; }
.p-w56 { width: 56px; } .p-w70 { width: 70px; } .p-w80 { width: 80px; } .p-w90 { width: 90px; } .p-w120 { width: 120px; }
.p-mlauto { margin-left: auto; }
.p-tfoot:empty { display: none; }

/* 木の形（案件のタスク：グループ › タスク › サブタスク。3 段にしない） */
.vb-table .p-taskname { max-width: 380px; }
.p-tree { display: flex; align-items: center; gap: 4px; min-width: 0; }
.p-tree--l2 { padding-left: 28px; }
.p-tree__toggle { display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--vb-ink-3); }
.p-tree__toggle:hover { background: var(--vb-surface-3); color: var(--vb-ink); }
.p-tree__toggle .vb-i { width: 16px; height: 16px; transition: transform var(--vb-dur); }
.p-tree__toggle[aria-expanded="false"] .vb-i { transform: rotate(-90deg); }
.p-tree__pad { flex: none; width: 24px; }
.p-tree__sub { color: var(--vb-ink-4); }
.p-tree__text { display: flex; flex-direction: column; min-width: 0; }
.p-ms-ico { color: var(--vb-primary); }
.p-ms-ico svg { fill: currentColor; }
.p-grp { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 2px; margin-left: -2px; border: 0; border-radius: 8px; background: transparent; font: 700 13.5px/1 var(--vb-font); color: var(--vb-ink); white-space: nowrap; min-width: 0; max-width: 100%; }
.p-grp:hover { background: var(--vb-surface-3); }
.p-grp > .vb-i:first-child { width: 16px; height: 16px; color: var(--vb-ink-3); transition: transform var(--vb-dur); }
.p-grp[aria-expanded="false"] > .vb-i:first-child { transform: rotate(-90deg); }
.p-cardgroup .vb-group__head[aria-expanded="false"] .vb-i:first-child { transform: rotate(-90deg); }

/* まとめての操作の帯：知らせ（トースト）と重ならない */
.p-hasbulk .vb-toasts { bottom: 88px; }
.p-bulk [data-sp-only] { display: none; }
.p-upmenu { top: auto; bottom: calc(100% + 8px); }

/* 表示の設定（PC は横のパネル・スマホは下のシート） */

/* プレビューの中 */
.p-sublist .vb-row { padding: 6px 4px; min-height: 40px; }

/* スマホのカード（物の一覧＝T22 ①） */
.p-cardgroup .vb-group__head { padding: 0 4px; height: 36px; }
.p-cardgroup { border-top: 0; }

/* 1023 以下：見出しと名前の列を固定（T06） */
@media (max-width: 1023px) {
  .p-tw .vb-table .is-check { position: sticky; left: 0; z-index: 1; background: #fff; }
  .p-tw .vb-table .p-colname, .p-tw .vb-table .p-taskname { position: sticky; left: 44px; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--vb-line-2); }
  .p-tw .vb-table thead th.is-check, .p-tw .vb-table thead .p-colname { z-index: 3; background: var(--vb-surface-2); }
  .p-tw .vb-table tfoot td.is-check, .p-tw .vb-table tfoot .p-colname { background: var(--vb-surface-2); }
  .p-tw .vb-table tbody tr:hover > td.is-check, .p-tw .vb-table tbody tr:hover > td.p-colname, .p-tw .vb-table tbody tr:hover > td.p-taskname { background: var(--vb-row-hover); }
  .p-tw .vb-table tbody tr.is-selected > td.is-check, .p-tw .vb-table tbody tr.is-selected > td.p-colname, .p-tw .vb-table tbody tr.is-selected > td.p-taskname,
  .p-tw .vb-table tbody tr.is-open > td.is-check, .p-tw .vb-table tbody tr.is-open > td.p-colname { background: var(--vb-row-selected); }
  .p-tw .vb-table tr.vb-table__group > td.is-check { background: #fbfaff; }
  .vb-table .p-taskname { max-width: 260px; }
  .p-tw .vb-table [data-col="pr"], .p-tw .vb-table [data-col="lb"] { display: none; }
}

/* ==========================================================================
   ガント（L13・§6）
   ========================================================================== */
.p-gcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.p-glegend { padding: 12px 20px; border-bottom: 1px solid var(--vb-line); }
.p-glegend .p-lg { width: 16px; height: 8px; border-radius: 4px; }
.p-glegend .p-lg--todo { background: #e6dafe; box-shadow: inset 0 0 0 1px #d3c1fc; }
.p-glegend .p-lg--doing { background: linear-gradient(90deg, var(--vb-primary) 55%, #d9c7fe 55%); }
.p-glegend .p-lg--done { background: var(--vb-success); }
.p-glegend .p-lg--hold { background: #c9cedd; }
.p-glegend .p-lg--cont { background: repeating-linear-gradient(135deg, #d9c7fe 0 3px, #f2ebff 3px 6px); }
.p-glegend .p-lg--late { background: #e6dafe; box-shadow: 0 0 0 2px var(--vb-warning); }
.p-glegend .p-lg--group { height: 6px; background: var(--vb-primary-soft); box-shadow: inset 0 0 0 1px #cdb7fb; }
.p-glegend .p-lg--ms { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--vb-primary); }
.p-glegend .p-lg--today { width: 2px; height: 12px; border-radius: 1px; background: var(--vb-primary); }

/* 土日の網掛け（開始が月曜なので 6・7 日目）と日・週の線 */
/* 見出し（日付） */
/* 帯 */
/* 今日の線とつながりの線（帯の後ろを通す） */
/* 左の名前の列 */
.p-gname { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 0; border: 0; background: transparent; text-align: left; font: 600 13.5px/1.35 var(--vb-font); color: var(--vb-ink); cursor: pointer; }
.p-gname:hover > .p-ellipsis { color: var(--vb-primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.p-gname > .p-ellipsis { max-width: 100%; }
.p-gname small { max-width: 100%; font: var(--vb-text-caption); color: var(--vb-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-gl2 { padding-left: 34px; }
.p-folder { color: var(--vb-ink-3); }
.p-load { flex: none; font: 600 12px/1 var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-gcols { display: flex; align-items: center; gap: 8px; flex: none; }
.p-gc-who { display: flex; justify-content: center; width: 28px; }
.p-gc-st { display: flex; width: 60px; }
.p-units { flex: none; }

@media (max-width: 1023px) {
  .p-gc-st { display: none; }
  .p-load { display: none; }
}

/* スマホ：縦の一覧（G15 ①） */
.p-glist { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 14px; }
.p-glist[hidden] { display: none; }
.p-glist__range { padding: 4px 4px 0; }
.p-glist__group { display: flex; align-items: center; gap: 6px; margin: 8px 4px 0; font: 700 13px/1.3 var(--vb-font); color: var(--vb-ink-2); }
.p-glist__group .vb-i { color: var(--vb-ink-3); }
.p-glist__row { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 12px 14px; border: 1px solid var(--vb-line-2); border-radius: var(--vb-radius-md); background: #fff; text-align: left; min-width: 0; }
.p-glist__row:active { background: var(--vb-row-hover); }
.p-glist__top { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.p-glist__name { flex: 1; font: 700 15px/1.35 var(--vb-font); color: var(--vb-ink); }
.p-glist__chev { color: var(--vb-ink-3); }
.p-glist__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: var(--vb-text-sm); color: var(--vb-ink-2); }
.p-glist__ms { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font: 700 13.5px/1.3 var(--vb-font); color: var(--vb-ink); min-width: 0; }
.p-glist__ms .vb-num { margin-left: auto; flex: none; font-weight: 600; color: var(--vb-ink-3); }
.p-mini { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; width: 100%; height: 12px; }
.p-mini__c { position: relative; border-radius: 3px; background: var(--vb-surface-3); }
.p-mini__c.is-off { background: #e7e5f0; }
.p-mini__c.is-on.is-todo { background: #d9c7fe; }
.p-mini__c.is-on.is-doing { background: var(--vb-primary); }
.p-mini__c.is-on.is-done { background: var(--vb-success); }
.p-mini__c.is-on.is-late { box-shadow: inset 0 0 0 2px var(--vb-warning); }
.p-mini__c.is-today::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--vb-ink); }

/* ==========================================================================
   ボード（L10・P80・決定 18）
   ========================================================================== */
.p-kcard__subs { display: flex; align-items: center; gap: 4px; }
.p-floating { position: absolute; z-index: 10; margin: 0; pointer-events: none; }

/* 移動の選択（PC は中央の窓・スマホは下からのシート） */
.p-choices { display: flex; flex-direction: column; gap: 8px; }
.p-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--vb-line-2); border-radius: var(--vb-radius-sm); background: #fff; font: 600 15px/1 var(--vb-font); color: var(--vb-ink); text-align: left; }
.p-choice:hover { background: var(--vb-row-hover); }
.p-choice__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--vb-check-line); background: #fff; }
.p-choice__text { flex: 1; min-width: 0; }
.p-choice__check { color: var(--vb-primary); visibility: hidden; }
.p-choice.is-selected { background: var(--vb-primary-soft); border-color: var(--vb-primary-soft-2); color: var(--vb-primary-ink); }
.p-choice.is-selected .p-choice__dot { border: 6px solid var(--vb-primary-strong); }
.p-choice.is-selected .p-choice__check { visibility: visible; }

/* ==========================================================================
   スマホ（767 以下）
   ========================================================================== */
@media (max-width: 767px) {
  .p-sp { display: inline-flex; }
  .p-pc, .p-pc-inline { display: none !important; }
  .vb-pagehead__acts > .vb-anchor { display: none; }
  /* 道具の行：1 段目に検索、2 段目に見方・絞り込み・横に見る */
  .p-toolbar .vb-toolbar__search { order: -1; }
  .p-filters { order: 5; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .p-units { display: none; }
  .p-toolbar { gap: 6px; }
  .p-toolbar > .vb-btn { padding: 0 12px; }
  .p-glegend span:has(.p-lg--group) { display: none; }
  .p-toolbar [data-fltcount] { background: var(--vb-primary-strong); color: #fff; }
  /* 表：カード並べ（物の一覧）か、横スクロール＋左端固定（数字を比べる表） */
  .p-tw[data-sp="cards"] { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .p-tw[data-sp="cards"] .p-tscroll, .p-tw[data-sp="cards"] .p-tfoot { display: none; }
  .p-tw[data-sp="cards"] .vb-mcards { display: flex; flex-direction: column; gap: 12px; }
  .p-tw[data-sp="scroll"] .vb-table .is-check, .p-tw[data-sp="scroll"] .vb-table .is-acts { display: none; }
  .p-tw[data-sp="scroll"] .vb-table .p-colname { left: 0; }
  .p-tw .p-tfoot .vb-pager__info { margin: 0; }
  .p-hasbulk .vb-toasts { bottom: calc(var(--vb-tabbar-h) + 76px); }
  .p-bulk { bottom: calc(var(--vb-tabbar-h) + 12px); width: calc(100% - 24px); }
  .p-bulk .vb-bulkbar__count { flex: 1; }
  .p-bulk [data-sp-only] { display: flex; }
  .p-colsec { display: none; }
  .p-sheetopt { display: flex; width: 100%; min-height: 44px; padding: 0 12px; }
  .p-fltsheet .vb-group__body { padding: 0 4px 8px; }
  /* ガント：横に見る（見るだけ） */
  .p-gl2 { padding-left: 16px; }
  .p-gname { font-size: 12.5px; }
  .p-gname > .p-ellipsis { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .p-glegend { padding: 10px 14px; }
  /* ボード：列を 1 つずつ横にめくる */
}

/* 見本帳の枠の中だけ（製品には持ち込まない）：状態の切替が狭い幅で折り返す */
.cat-frame__bar .vb-seg { flex-wrap: wrap; max-width: 100%; }
/* 横にはみ出す表を行の上でつかんで送っている間（v2/js/list.js・#1898） */
.p-tscroll.is-dragging { cursor: grabbing; user-select: none; }
.p-tscroll.is-dragging * { cursor: grabbing !important; }