/* ======================================================================
 * スタッフ向け価格表閲覧画面（/staff/price-books・Phase 3.5-E2B）
 *
 * 標準クラス（staff-portal / staff-quotes / staff-customers）を土台に、価格表閲覧に固有の
 * 最小限のスタイルだけを足す。固定px幅・広範囲な共通CSS上書きは避け、既存のカードUI・状態
 * バッジ・テーブル・空状態・定義リストを再利用する。JavaScript は使わない。
 * ==================================================================== */

/* 重要な注意文（この画面の新価格表はまだ見積で使われていない旨）。目立たせるが警告色にはしない。 */
.takearest-portal__alert--info {
	color: var(--ta-accent-dark);
	background: #eef1ea;
	border-color: #d7ddcf;
}

.ta-pb-notice {
	font-weight: 600;
}

/* 商品別価格テーブルの凡例（新価格表 / 現行運用価格の区別）。 */
.ta-pb-legend {
	margin-bottom: 12px;
}

/* 価格決定元セルの補足（親価格表から継承 / この価格表で固定 など）。 */
.ta-pb-source-hint {
	display: inline-block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--ta-ink-mute);
}

/* draft バージョンの状態バッジ（編集中）。承認前を表す落ち着いた黄系。 */
.ta-c-status.ta-pb-status--draft {
	background: #f4ecd7;
	color: #7c6a2f;
}

/* approval_requested バージョンの状態バッジ（承認待ち）。編集中とは別色で、判断待ちであることを示す。 */
.ta-c-status.ta-pb-status--requested {
	background: #e4e9f2;
	color: #3f5375;
}

/* scheduled バージョンの状態バッジ（公開予約済み）。承認済みで公開待ちであることを示す落ち着いた青緑系。 */
.ta-c-status.ta-pb-status--scheduled {
	background: #dfeae6;
	color: #2f5f52;
}

/* ---- CSV取込の検証結果・差分確認（Phase 3.5-E3） ---- */

/* 取込パネル内の小見出し（最近のCSV取込）。パネル見出しより一段小さくする。 */
.ta-q-panel .takearest-portal__panel-subtitle {
	margin: 20px 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ta-ink);
}

/* 検証エラー行のセル。エラーであることが分かるよう、控えめな赤系の背景と文字色にする。 */
.ta-pb-price-table td.ta-pb-row-error {
	background: #fbeceb;
	color: #8a2d24;
}

/* ---- 改定・承認の操作パネル（Phase 3.5-E2D-2） ---- */

/* 操作パネル（改定案作成・承認依頼・取りやめ・承認・差戻し・取下げ）。
 * 既存のパネルを流用し、操作であることが分かるよう左に細い色帯だけを足す。 */
.ta-pb-actions {
	border-left: 3px solid var(--ta-line);
}

.ta-pb-approval {
	border-left: 3px solid var(--ta-accent-dark);
}

/* 一覧の行内に置く改定案作成フォーム。操作セルのボタン（詳細・改定案を編集・承認待ちを確認）と同じ
 * 小ボタンをそのまま並べられるように、フォーム自体をインライン要素として扱うだけにする
 * （ボタンの寸法はページ固有CSSで上書きせず、共通の .ta-button--small に従う）。 */
.ta-pb-inlineform {
	display: inline-block;
	margin: 0;
}

/* 価格の決め方（固定価格／取扱対象外）のラジオ。スマートフォンでも縦に積んで押しやすくする。 */
.ta-pb-radio {
	display: block;
	margin: 6px 0;
	line-height: 1.6;
}

.ta-pb-radio input {
	margin-right: 6px;
}

/* 価格比較テーブルの列グループの視覚的分離。
 * 新価格表 / 現行運用価格の境目に、うるさくない罫線を入れる（固定幅は指定しない）。 */
.ta-pb-price-table .ta-pb-col-new {
	background: rgba(47, 93, 87, 0.035);
}

.ta-pb-price-table .ta-pb-col-current {
	border-left: 2px solid var(--ta-line);
}

/* グループ見出し行（新価格表 / 現行運用価格）。 */
.ta-pb-price-table .ta-pb-group th {
	font-size: 12.5px;
	color: var(--ta-ink-soft);
	text-align: center;
	border-bottom: 1px solid var(--ta-line);
}

.ta-pb-price-table .ta-pb-group .ta-pb-col-current {
	border-left: 2px solid var(--ta-line);
}

/* スマートフォンでは標準テーブルがカード型に積み替わり（thead 非表示・各セルは data-label 表示）。
 * 積み替え時の列グループ境界は、現行運用価格セルの上に細い区切りで示す（横スクロールを増やさない）。 */
@media (max-width: 782px) {
	.ta-pb-price-table td.ta-pb-col-new {
		background: transparent;
	}

	.ta-pb-price-table td.ta-pb-col-current {
		border-left: 0;
	}

	.ta-pb-price-table td.ta-pb-col-current:first-of-type {
		border-top: 1px dashed var(--ta-line);
	}
}

/* ======================================================================
 * STG UX（PR #101 レビュー対応）：大分類の折りたたみ・その場ヘルプ・差分行の強調
 *
 * JavaScript は使わない。開閉はネイティブ details / summary で行い、マウス・キーボード
 * （Enter / Space）・タッチのいずれでも操作できる状態を保つ。
 * ==================================================================== */

/* 大分類セクション。既存のパネル（.takearest-portal__panel / .ta-q-panel）の見た目を保ったまま
 * details 化する。パネル側の padding は活かし、summary だけを行として扱う。 */
.ta-pb-section > .ta-pb-section__summary {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	list-style: none;
	/* summary は既定でクリック可能。フォーカス可視化は下でまとめて指定する。 */
}

/* 既定の三角マーカーを消し、自前のマーカーへ置き換える（Safari 対応を含む）。 */
.ta-pb-section > .ta-pb-section__summary::-webkit-details-marker {
	display: none;
}

.ta-pb-section > .ta-pb-section__summary::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--ta-accent);
	border-bottom: 2px solid var(--ta-accent);
	transform: rotate(-45deg);
	transition: transform 0.15s ease-out;
}

.ta-pb-section[open] > .ta-pb-section__summary::before {
	transform: rotate(45deg);
}

/* 見出しは既存のパネル見出しの見た目を流用する（h2 ではなく span なので margin を打ち消す）。 */
.ta-pb-section__title {
	margin: 0;
	flex: 1 1 auto;
}

/* 見出し右の件数など。数値は数字だけで判別できるよう、色に依存しない。 */
.ta-pb-section__badge {
	flex: 0 0 auto;
	font-size: 12.5px;
	color: var(--ta-ink-soft);
	background: var(--ta-bg-soft);
	border: 1px solid var(--ta-line);
	border-radius: 999px;
	padding: 2px 10px;
}

.ta-pb-section__body {
	margin-top: 14px;
}

/* 内部寄りの項目をさらに畳む「詳細情報」。 */
.ta-pb-subsection {
	margin-top: 14px;
	border-top: 1px solid var(--ta-line-soft);
	padding-top: 10px;
}

.ta-pb-subsection__summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--ta-ink-soft);
}

.ta-pb-subsection__body {
	margin-top: 10px;
}

/* その場ヘルプ（丸い ? のツールチップ）。
 * 通常のツールチップとして、マウスオーバーで出て、ポインタが外れたら閉じる（クリックを要求しない）。
 * キーボードはフォーカスで表示・blur で非表示、タッチはタップでフォーカスが当たるため確認できる。
 * 構造は span + button + span（phrasing content）で、JavaScript は使わない。 */
.ta-help {
	display: inline-block;
	position: relative;
	margin-left: 6px;
	vertical-align: baseline;
	/* ツールチップを親側でクリップしない。 */
	overflow: visible;
}

.ta-help__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--ta-line);
	background: var(--ta-bg-soft);
	color: var(--ta-ink-soft);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
}

.ta-help__text {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	display: block;
	width: max-content;
	/* 全文が読めるように、画面幅に合わせて縮める。 */
	max-width: min(320px, calc(100vw - 32px));
	padding: 9px 11px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ta-ink);
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(35, 48, 56, 0.12);
	/* 長い説明文でも1行に押し込めず、折り返して全文を見せる。 */
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: left;
	/* 既定は非表示。visibility を使い、読み上げ順序を保ったまま隠す。 */
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.12s ease-out;
}

/* マウスオーバー、およびキーボード・タッチのフォーカスで表示する。 */
.ta-help:hover > .ta-help__text,
.ta-help:focus-within > .ta-help__text {
	visibility: visible;
	opacity: 1;
}

/* 折りたたみ・ヘルプのキーボードフォーカスを必ず見えるようにする。 */
.ta-pb-section__summary:focus-visible,
.ta-pb-subsection__summary:focus-visible,
.ta-help__toggle:focus-visible {
	outline: 2px solid var(--ta-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* CSV差分：変更のある行を、色だけに頼らず左の太い線と太字でも示す。 */
.ta-pb-difftable tbody tr.ta-pb-diffrow--changed > td {
	background: #f2f7f0;
	font-weight: 600;
}

.ta-pb-difftable tbody tr.ta-pb-diffrow--changed > td:first-child {
	box-shadow: inset 4px 0 0 0 var(--ta-accent);
}

/* 検証エラー行は変更行より強く、赤系＋左線で別扱いにする。 */
.ta-pb-difftable tbody tr.ta-pb-diffrow--invalid > td {
	background: #fdf1ef;
	font-weight: 600;
}

.ta-pb-difftable tbody tr.ta-pb-diffrow--invalid > td:first-child {
	box-shadow: inset 4px 0 0 0 #b3392c;
}

/* 差分種別セルは、変更行では強調表示にそろえる（変更なしはニュートラルのまま）。 */
.ta-pb-difftable tbody tr.ta-pb-diffrow--changed .ta-pb-diffkind {
	color: var(--ta-accent-dark);
}

/* スマートフォンではテーブルがカード型に積み替わるため、左線を行の左端へ付け替える。 */
@media (max-width: 782px) {
	.ta-pb-difftable tbody tr.ta-pb-diffrow--changed {
		border-left: 4px solid var(--ta-accent);
	}

	.ta-pb-difftable tbody tr.ta-pb-diffrow--invalid {
		border-left: 4px solid #b3392c;
	}

	.ta-pb-difftable tbody tr.ta-pb-diffrow--changed > td:first-child,
	.ta-pb-difftable tbody tr.ta-pb-diffrow--invalid > td:first-child {
		box-shadow: none;
	}

	/* 狭い画面では重ねて表示せず、項目の下へ通常配置で出す（画面端で切れない・全文が読める）。 */
	.ta-help {
		position: static;
	}

	.ta-help__text {
		position: static;
		max-width: 100%;
		margin-top: 6px;
		box-shadow: none;
	}
}

/* ラベルとその場ヘルプの横並び。
 * ヘルプ（details/summary）は label の**外側**へ隣接配置する（label 内へインタラクティブ要素を
 * 入れると内容モデルとして不正で、? の操作がラベル対象の入力欄と干渉しうるため）。
 * details は flow content なので、この行の外枠とフィールド外枠は div（p / span は phrasing content
 * しか許容せず、パーサーが暗黙に閉じてDOMが崩れる）。見た目は従来どおり同じ行に保つ。 */
.ta-pb-labelrow {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
}

.ta-pb-labelrow > .takearest-portal__label {
	margin-bottom: 0;
}

/* ======================================================================
 * 最終STG UX（PR #101 レビュー対応）：ツールチップのクリップ解消と商品編集の設定切替
 * ==================================================================== */

/* 共有の定義リスト（.ta-c-deflist）は角丸を保つため overflow: hidden で内容をクリップする。
 * その中の dt に置いたヘルプは、この祖先で切られてしまうため、**価格表画面の定義リストだけ**
 * オーバーフローを許可する（共有クラスの挙動は他画面で変えない）。
 * overflow を解除すると角丸のクリップも効かなくなるので、角丸は行側で補修する。 */
.ta-c-deflist.ta-pb-deflist {
	overflow: visible;
}

.ta-pb-deflist > .ta-c-defrow:first-child > dt {
	border-top-left-radius: 11px;
}

.ta-pb-deflist > .ta-c-defrow:first-child > dd {
	border-top-right-radius: 11px;
}

.ta-pb-deflist > .ta-c-defrow:last-child > dt {
	border-bottom-left-radius: 11px;
}

.ta-pb-deflist > .ta-c-defrow:last-child > dd {
	border-bottom-right-radius: 11px;
}

/* 定義リストの行自体もクリップしない（先頭・中間・末尾どの行でもツールチップが切れないように）。 */
.ta-pb-deflist > .ta-c-defrow,
.ta-pb-deflist > .ta-c-defrow > dt,
.ta-pb-deflist > .ta-c-defrow > dd {
	overflow: visible;
}

/* 商品編集：選んだ取扱いに応じて、入力すべきものだけを見せる。
 * ラジオの状態だけで切り替えるため JavaScript は使わない（:has 未対応の環境では
 * 価格ブロックが出たままになるだけで、保存の意味は変わらない）。 */
.ta-pb-priceblock {
	margin-top: 16px;
	padding: 14px 16px 2px;
	border: 1px solid var(--ta-line);
	border-radius: 10px;
	background: var(--ta-bg-soft);
}

.ta-pb-priceblock__title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ta-ink);
}

/* 取扱対象外の案内は、取扱対象外を選んだときだけ出す。 */
.ta-pb-unavailnote {
	display: none;
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px dashed var(--ta-line);
	border-radius: 10px;
	font-size: 13px;
	color: var(--ta-ink-soft);
	background: var(--ta-bg-soft);
}

.ta-pb-saleblock:has(#takearest-pb-method-unavailable:checked) .ta-pb-priceblock {
	display: none;
}

.ta-pb-saleblock:has(#takearest-pb-method-unavailable:checked) .ta-pb-unavailnote {
	display: block;
}

/* ======================================================================
 * Phase 3.5-E5：派生価格表の標準ルール／商品別ルール
 * ==================================================================== */

/* 一覧・商品一覧の操作セルは、共通ボタンの nowrap でセル外へはみ出さないよう価格表画面だけ折返しを許可する。 */
.ta-pb-actions-cell {
	white-space: normal;
	overflow: visible;
}

.ta-pb-actions-cell > a,
.ta-pb-actions-cell .ta-pb-inlineform > button {
	max-width: 100%;
	white-space: normal;
	line-height: 1.35;
	text-align: center;
}

.ta-pb-actions-cell .ta-pb-inlineform {
	max-width: 100%;
	vertical-align: top;
}

/* 派生価格表の基準設定。既存パネル内で視覚的に一段まとめるだけにし、固定幅は持たせない。 */
.ta-pb-derived-settings {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--ta-line);
}

.ta-pb-derived-summary {
	margin-bottom: 14px;
}

.ta-pb-parent-update {
	margin: 14px 0;
}

.ta-pb-parent-current {
	display: block;
	margin: 10px 0 14px;
}

.ta-pb-default-rule {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--ta-line);
	border-radius: 10px;
	background: var(--ta-bg-soft);
}

/* 「親価格をそのまま使用」では調整率は意味を持たないため隠す。 */
.ta-pb-default-rule:has(#takearest-pb-default-inherit:checked) .ta-pb-adjustment-field {
	display: none;
}

/* 商品個別の4モード。入力が必要なブロックだけを選択状態に応じて表示する。 */
.ta-pb-standardnote,
.ta-pb-adjustmentblock {
	display: none;
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px dashed var(--ta-line);
	border-radius: 10px;
	font-size: 13px;
	color: var(--ta-ink-soft);
	background: var(--ta-bg-soft);
}

.ta-pb-adjustmentblock {
	border-style: solid;
}

.ta-pb-saleblock:has(#takearest-pb-method-standard:checked) .ta-pb-priceblock,
.ta-pb-saleblock:has(#takearest-pb-method-standard:checked) .ta-pb-adjustmentblock,
.ta-pb-saleblock:has(#takearest-pb-method-standard:checked) .ta-pb-unavailnote {
	display: none;
}

.ta-pb-saleblock:has(#takearest-pb-method-standard:checked) .ta-pb-standardnote {
	display: block;
}

.ta-pb-saleblock:has(#takearest-pb-method-percentage:checked) .ta-pb-priceblock,
.ta-pb-saleblock:has(#takearest-pb-method-percentage:checked) .ta-pb-standardnote,
.ta-pb-saleblock:has(#takearest-pb-method-percentage:checked) .ta-pb-unavailnote {
	display: none;
}

.ta-pb-saleblock:has(#takearest-pb-method-percentage:checked) .ta-pb-adjustmentblock {
	display: block;
}

.ta-pb-saleblock:has(#takearest-pb-method-fixed:checked) .ta-pb-standardnote,
.ta-pb-saleblock:has(#takearest-pb-method-fixed:checked) .ta-pb-adjustmentblock,
.ta-pb-saleblock:has(#takearest-pb-method-fixed:checked) .ta-pb-unavailnote {
	display: none;
}

.ta-pb-saleblock:has(#takearest-pb-method-unavailable:checked) .ta-pb-standardnote,
.ta-pb-saleblock:has(#takearest-pb-method-unavailable:checked) .ta-pb-adjustmentblock,
.ta-pb-saleblock:has(#takearest-pb-method-unavailable:checked) .ta-pb-priceblock {
	display: none;
}

.ta-pb-saleblock:has(#takearest-pb-method-unavailable:checked) .ta-pb-unavailnote {
	display: block;
}

@media (max-width: 782px) {
	.ta-pb-actions-cell > a,
	.ta-pb-actions-cell .ta-pb-inlineform,
	.ta-pb-actions-cell .ta-pb-inlineform > button {
		width: 100%;
	}

	.ta-pb-actions-cell .ta-pb-inlineform {
		display: block;
		margin-top: 6px;
	}
}