/**
 * テイカレスト 見積・請求管理 - 顧客マスター・代理店関係管理画面（/staff/customers）スタイル（Phase 3.0）
 *
 * スタッフポータルの落ち着いたトーン（assets/staff-portal.css）と、見積画面の標準部品
 * （assets/staff-quotes.css の ta-q-table / ta-q-field / ta-q-empty / ta-q-status など）を
 * 共有して読み込む前提。本ファイルは顧客画面に固有の部分（モジュールナビ・役割／状態バッジ・
 * 絞り込みバー・詳細の定義リスト・主担当代理店パネルなど）だけを定義する。
 *
 * ボタン・アクションバー・フォーム・カード・テーブルの寸法は上書きしない（UI標準に従う）。
 */

/* ---- 見出し領域（ページタイトル＋主要操作） ---- */
/* 一覧・詳細とも、ページタイトル（や顧客名）の主要操作を見出し領域の右側へ置く。
   案件が未実装のため、顧客／案件／準備中のタブ帯（モジュールナビ）は今は表示しない。 */

.ta-c-listhero__head,
.ta-c-viewhero__head {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	align-items: flex-start;
	justify-content: space-between;
}

.ta-c-listhero__heading,
.ta-c-viewhero__heading {
	min-width: 0;
}

.ta-c-listhero__actions,
.ta-c-viewhero__actions {
	flex-shrink: 0;
}

/* 詳細見出しの補助情報（顧客ID・役割・状態）を顧客名の下へ横並びで置く。 */
.ta-c-viewhero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 10px;
}

/* ---- パンくず（顧客一覧 ＞ 顧客名） ---- */

.ta-c-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--ta-ink-soft);
}

.ta-c-crumbs__link {
	color: var(--ta-accent-dark);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.ta-c-crumbs__link:hover,
.ta-c-crumbs__link:focus {
	border-bottom-color: var(--ta-accent);
}

.ta-c-crumbs__sep {
	color: var(--ta-ink-mute);
}

.ta-c-crumbs__current {
	color: var(--ta-ink);
	font-weight: 600;
}

/* ---- 絞り込みバー ---- */

.ta-c-filters {
	margin: 0 0 14px;
	padding: 14px 16px;
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	border-radius: 12px;
}

.ta-c-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.ta-c-filters__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 140px;
	min-width: 0;
}

.ta-c-filters__field--search {
	flex: 2 1 220px;
}

.ta-c-filters__field .takearest-portal__label {
	margin: 0;
	font-size: 12.5px;
}

.ta-c-filters__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.ta-c-resultcount {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--ta-ink-soft);
}

/* ---- 共通バッジ（役割・状態・主担当マーク） ---- */
/* 役割・状態は同じ基礎バッジ部品を共有する。狭い列でも「有効」などが1文字ずつ縦に
   折り返さないよう、inline-flex ＋ white-space:nowrap を基礎に持たせる。色（意味）は
   modifier class（--customer / --agency / --active / --inactive）で分ける。
   ta-c-badge は今後の一覧画面でも再利用できる基礎クラスとして用意する。 */
.ta-c-badge,
.ta-c-role,
.ta-c-status,
.ta-c-primary-mark {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 2px 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	border-radius: 999px;
}

/* 役割バッジ（複数を横並び） */
.ta-c-roles {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ta-c-role--customer {
	background: #e7efe9;
	color: var(--ta-accent-dark);
}

.ta-c-role--agency {
	background: #f1e7d6;
	color: #8a6d1f;
}

/* 状態バッジ（有効／無効） */
.ta-c-status {
	background: #ece5d8;
	color: var(--ta-ink-mute);
}

.ta-c-status--active {
	background: #d8ece0;
	color: #1f5e3f;
}

.ta-c-status--inactive {
	background: #e7e3da;
	color: var(--ta-ink-mute);
}

/* 主担当マーク */
.ta-c-primary-mark {
	background: #e7efe9;
	color: var(--ta-accent-dark);
}

/* ---- 一覧テーブルの顧客ID・顧客名セル ---- */

.ta-c-table .ta-c-cell-code {
	white-space: nowrap;
}

.ta-c-table .ta-c-cell-name {
	font-weight: 600;
}

/* ---- 電話番号セル ---- */
/* 一覧では電話番号だけを表示する。1文字ずつ折り返さないよう nowrap にし、桁を揃える。 */

.ta-c-table .ta-c-cell-phone {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ---- 列見出しソート（一覧UI標準） ---- */

.ta-c-table th.ta-c-sortable {
	padding: 0;
}

.ta-c-sort {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 12px 14px;
	color: var(--ta-ink-soft);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.ta-c-sort:hover,
.ta-c-sort:focus {
	background: var(--ta-line-soft);
	color: var(--ta-ink);
}

.ta-c-sort.is-active {
	color: var(--ta-ink);
}

.ta-c-sort__arrow {
	font-size: 10px;
	line-height: 1;
	color: var(--ta-ink-mute);
}

.ta-c-sort.is-active .ta-c-sort__arrow {
	color: var(--ta-accent);
}

.ta-c-sort__arrow--none {
	opacity: 0.55;
}

/* 現在の並び順（スマートフォンで thead が隠れても分かるようにする補助表示）。 */
.ta-c-sortstate {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--ta-ink-soft);
}

/* ---- 顧客ID（顧客コード）の表示 ---- */

.ta-c-code {
	font-weight: 700;
	color: var(--ta-accent-dark);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* ---- フォーム：個人／法人・役割の選択（ラジオ・チェック） ---- */

.ta-c-radiofield {
	margin: 0 0 16px;
}

.ta-c-radiofield > .takearest-portal__label {
	display: block;
	margin-bottom: 8px;
}

.ta-c-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}

.ta-c-choice {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	color: var(--ta-ink);
	cursor: pointer;
}

.ta-c-choice input {
	width: 18px;
	height: 18px;
	margin: 0;
}

/* ---- 主担当代理店パネル ---- */

.ta-c-agencypanel {
	margin-top: 4px;
}

/* ---- 詳細：定義リスト ---- */

.ta-c-deflist {
	margin: 6px 0 0;
	border: 1px solid var(--ta-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--ta-surface);
}

.ta-c-defrow {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 0;
	border-bottom: 1px solid var(--ta-line-soft);
}

.ta-c-defrow:last-child {
	border-bottom: none;
}

.ta-c-defrow dt {
	margin: 0;
	padding: 12px 16px;
	background: var(--ta-bg-soft);
	font-size: 13px;
	font-weight: 700;
	color: var(--ta-ink-soft);
}

.ta-c-defrow dd {
	margin: 0;
	padding: 12px 16px;
	font-size: 14px;
	color: var(--ta-ink);
	word-break: break-word;
}

/* ---- 詳細パネルの間隔 ---- */

.ta-c-viewpanel {
	margin: 0 0 18px;
}

/* 関連案件パネルの見出し行（パネルタイトル＋「この顧客で新規案件」ボタン）を横並びにする（Phase 3.3-D2）。 */
.ta-c-viewpanel__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	justify-content: space-between;
}

.ta-c-viewpanel__head .takearest-portal__panel-title {
	margin: 0;
}

.ta-c-formactions {
	margin-bottom: 18px;
}

/* ---- レスポンシブ ---- */

@media (max-width: 600px) {
	/* 見出し領域は縦積み。主要操作（新規顧客登録・編集）は押しやすいよう横幅いっぱいにする。 */
	.ta-c-listhero__head,
	.ta-c-viewhero__head {
		flex-direction: column;
		align-items: stretch;
	}

	.ta-c-listhero__actions,
	.ta-c-viewhero__actions {
		width: 100%;
	}

	.ta-c-listhero__actions .ta-button,
	.ta-c-viewhero__actions .ta-button {
		width: 100%;
	}

	.ta-c-filters__field {
		flex-basis: 100%;
	}

	/* 定義リストは縦積み（ラベル → 値）。 */
	.ta-c-defrow {
		grid-template-columns: 1fr;
	}

	.ta-c-defrow dt {
		padding-bottom: 4px;
	}

	.ta-c-defrow dd {
		padding-top: 4px;
	}
}

/* ------------------------------------------------------------------ *
 * Phase 3.0.4：氏名・フリガナ構造化／法人の部署・拠点・先方窓口
 * ------------------------------------------------------------------ */

/* 編集時の個人／法人（読み取り専用）表示。 */
.ta-c-readonly-value {
	margin: 2px 0 0;
	font-weight: 600;
	color: var(--ta-ink);
}

/* 「条件により必須」バッジ（必須バッジより控えめ）。 */
.takearest-portal__req--cond {
	color: var(--ta-ink-mute);
	background: var(--ta-bg-soft);
}

/* 既存の未構造化顧客への案内ブロック。 */
.ta-c-legacy-note {
	margin-top: 4px;
}

/* フォーム下部の補足（部署・窓口は保存後に追加する等）。 */
.ta-c-form-hint {
	margin-top: 12px;
}

/* 一覧・詳細のインライン操作フォーム（無効化・有効化）をリンク群と横並びにする。 */
.ta-c-inlineform {
	display: inline;
	margin: 0 0 0 4px;
}

/* リンク見た目のボタン（GETで状態変更しないための小さなPOSTボタン）。 */
.ta-q-link--button {
	display: inline;
	padding: 0;
	margin-right: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ta-accent-dark);
	background: none;
	border: none;
	border-bottom: 1px solid transparent;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.ta-q-link--button:hover,
.ta-q-link--button:focus {
	border-bottom-color: var(--ta-accent);
}

/* 重複候補の警告ボックス（新規登録で似た顧客が見つかったとき）（Phase 3.2-C1e）。 */
.ta-c-dupwarn {
	border-color: #e6c9a8;
	background: #fbf3e6;
}

.ta-c-dupwarn__title {
	color: #8a5a1f;
}

/* 確認チェックは操作対象として目立たせ、押しやすい大きさにする。 */
.ta-c-dupwarn__confirm {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ta-ink);
	background: #fff;
	border: 1px solid #e6c9a8;
	border-radius: 8px;
	cursor: pointer;
}

.ta-c-dupwarn__confirm input[type="checkbox"] {
	margin-top: 2px;
	flex: 0 0 auto;
}