/* PLトレンドの画面の調整だけ(共通で足りるものはここに置かない。docs/design/ui/001-design-system.md セクション5「段階3の設計」)。
   色の値は書かない(トークンだけ)。 */

/* --- 損益推移の表(.pl-trend)。見出し・先頭列・年度の合計を固定する(入れ物は .table-scroll) --- */
.pl-trend { font-size: var(--text-sm); }
.pl-trend th, .pl-trend td { padding: var(--space-2) var(--space-3); }
.pl-trend tbody th[scope=row] {
  position: sticky; left: 0; z-index: 2; min-width: 12rem; font-weight: 400; text-align: left;
  border-right: 1px solid var(--border);
}
.pl-trend thead th:first-child { position: sticky; top: 0; left: 0; z-index: 4; min-width: 12rem; border-right: 1px solid var(--border); }
.pl-trend tbody td:last-child, .pl-trend thead th:last-child { position: sticky; right: 0; min-width: 8rem; border-left: 1px solid var(--border); }
.pl-trend thead th:last-child { z-index: 4; }
.pl-trend tbody td:last-child { z-index: 2; }
.pl-trend.unit-man tbody td:not(:last-child), .pl-trend.unit-man thead th:not(:first-child):not(:last-child) { min-width: 6rem; }
.pl-trend.unit-yen tbody td:not(:last-child), .pl-trend.unit-yen thead th:not(:first-child):not(:last-child) { min-width: 8rem; }
.pl-trend thead th.num { text-align: right; }
.pl-trend thead .badge, .pl-trend tbody .badge, .pl-trend .case-managed-note { white-space: normal; max-width: 100%; }
.pl-trend .case-managed-note { display: block; }

/* 層の区別(色だけに頼らない):見出しの下線の線種・列の背景の模様・層の最初の列の左の線 */
.pl-trend thead th.layer-confirmed, .pl-trend thead th.layer-none { border-bottom: 2px solid var(--border-input); }
.pl-trend thead th.layer-preliminary { border-bottom: 2px dotted var(--border-input); }
.pl-trend thead th.layer-forecast { border-bottom: 2px dashed var(--border-input); }
.pl-trend .layer-preliminary { background-image: linear-gradient(var(--layer-preliminary-bg), var(--layer-preliminary-bg)); }
.pl-trend .layer-forecast { background-image: var(--layer-forecast-bg); }
.pl-trend .layer-start.layer-preliminary { border-left: 2px solid var(--border-input); }
.pl-trend .layer-start.layer-forecast { border-left: 2px dashed var(--border-input); }

/* 見出しの行(tbodyのth colspan)。ラベルは、横にスクロールしても見えるよう貼り付ける */
.pl-trend tbody tr:not([class]) > th { background-color: var(--surface-subtle); color: var(--text-muted); font-weight: 600; text-align: left; }
.pl-heading-label { position: sticky; left: var(--space-3); }

/* 行の種類 */
.pl-trend tbody tr.pl-subtotal > *, .pl-trend tbody tr.pl-profit > * { background-color: var(--surface-subtle); font-weight: 600; }
.pl-trend tbody tr.pl-subtotal > * { border-top: 1px solid var(--text-faint); }
.pl-trend tbody tr.pl-profit > * { border-top: 1px solid var(--text-faint); border-bottom: 1px solid var(--text-faint); }
.pl-trend tbody tr.pl-breakdown > * { font-size: var(--text-xs); }
/* 内訳・対象外の行の文字は薄くする。ただし、負の金額(.is-negative)の色は上書きしない(詳細度で負けないよう:not()で除く) */
.pl-trend tbody tr.pl-breakdown > *:not(.is-negative), .pl-trend tbody tr.pl-excluded > *:not(.is-negative) { color: var(--text-muted); }

@media (max-width: 699px) {
  /* 先頭列は幅を絞って折り返し(長い科目名で、月の値の領域を奪わない)、年度の合計の列は貼り付けない(見出しだけ上に貼り付く) */
  .pl-trend tbody th[scope=row], .pl-trend thead th:first-child { min-width: 8rem; max-width: 9rem; white-space: normal; }
  .pl-trend tbody td:last-child { position: static; border-left: 0; }
  .pl-trend thead th:last-child { right: auto; border-left: 0; }
}

/* --- 月額マスタの表(.pl-monthly)。見出しと先頭列を固定する(入れ物は .table-scroll) --- */
.pl-monthly { font-size: var(--text-sm); }
.pl-monthly th, .pl-monthly td { padding: var(--space-2) var(--space-3); }
.pl-monthly tbody th[scope=row] { position: sticky; left: 0; z-index: 2; min-width: 12rem; font-weight: 400; text-align: left; border-right: 1px solid var(--border); }
.pl-monthly thead th:first-child { position: sticky; top: 0; left: 0; z-index: 4; min-width: 12rem; border-right: 1px solid var(--border); }
.pl-monthly thead th.num { text-align: right; min-width: 6rem; }
.pl-monthly td { min-width: 6rem; }
/* 名前ありの行(7c)は、科目の行(合計)の下に字下げして出す。先頭列は固定の幅に収まる字下げにする(長い名前は省略する) */
.pl-monthly tbody th.pl-name-cell { padding-left: var(--space-6); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699px) {
  .pl-monthly tbody th[scope=row], .pl-monthly thead th:first-child { min-width: 8rem; }
}