/**
 * テイカレスト 見積・請求管理 - 再利用可能な顧客選択コンポーネント（Phase 3.0.1）スタイル
 *
 * スタッフポータルの落ち着いたトーン（assets/staff-portal.css の CSS 変数・標準ボタン
 * ta-button / ta-action-bar）と、顧客画面の状態バッジ（assets/staff-customers.css の
 * ta-c-status）を共有して読み込む前提。本ファイルは顧客選択UI固有の部分（検索結果リスト・
 * 選択済み確認カード）だけを定義する。
 *
 * 標準ボタン・アクションバーの寸法は上書きしない（UI標準に従う）。!important も使わない。
 */

.ta-cas {
	margin: 6px 0 0;
}

/* 選択済みのときは検索セクションを隠す。未選択のときは検索を表示する。 */
.ta-cas.is-selected .ta-cas__search {
	display: none;
}

.ta-cas:not(.is-selected) .ta-cas__selected:empty {
	display: none;
}

/* JavaScript が有効なら、no-JS 案内は隠す（既定は表示）。 */
.ta-cas__nojs {
	display: none;
}

/* ---- 検索入力 ---- */

.ta-cas__input {
	margin-top: 2px;
}

.ta-cas__feedback {
	margin: 8px 0 0;
	min-height: 1em;
	font-size: 13px;
	color: var(--ta-ink-soft);
}

.ta-cas__feedback:empty {
	margin: 0;
	min-height: 0;
}

/* ---- 検索結果リスト ---- */

.ta-cas__results {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.ta-cas__results:empty {
	margin-top: 0;
}

/* 1件の検索結果（押せるカード）。標準ボタンの寸法には関与しない独立要素。 */
.ta-cas__result {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	text-align: left;
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.ta-cas__result:hover,
.ta-cas__result:focus-visible {
	border-color: var(--ta-accent);
	background: var(--ta-bg-soft);
	outline: none;
	box-shadow: 0 0 0 2px rgba(47, 93, 87, 0.18);
}

.ta-cas__result-head {
	font-size: 15px;
	font-weight: 600;
	color: var(--ta-ink);
}

.ta-cas__result-meta {
	font-size: 13px;
	color: var(--ta-ink-soft);
	word-break: break-word;
}

.ta-cas__result-pick {
	align-self: flex-start;
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ta-accent);
}

/* 顧客IDの強調（等幅で読みやすく）。 */
.ta-cas__code {
	font-weight: 700;
	color: var(--ta-accent-dark);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* ---- 選択済み確認カード ---- */

.ta-cas__card {
	margin-top: 4px;
	padding: 14px 16px;
	background: var(--ta-surface);
	border: 1px solid var(--ta-accent);
	border-radius: 12px;
	box-shadow: 0 0 0 2px rgba(47, 93, 87, 0.08);
}

.ta-cas__card-eyebrow {
	display: inline-block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ta-accent);
}

.ta-cas__card-name {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ta-ink);
	word-break: break-word;
}

.ta-cas__card-meta {
	margin: 0 0 2px;
	font-size: 13.5px;
	color: var(--ta-ink-soft);
	word-break: break-word;
}

.ta-cas__card-actions {
	margin-top: 12px;
}

/* 名前行に添える小さな状態バッジ（無効顧客の注意喚起）。 */
.ta-cas__status-badge {
	margin-left: 6px;
	vertical-align: middle;
}

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

@media (max-width: 600px) {
	.ta-cas__result {
		padding: 12px;
	}

	.ta-cas__result-pick {
		align-self: stretch;
		text-align: right;
	}
}

/* ============================================================ *
 * Phase 3.1 STG UI修正：検索可能プルダウン（dropdown / combobox）
 *
 * 見積画面の顧客選択で使う。候補カードを大きく展開せず、入力欄直下へ
 * フローティングのプルダウンを開き、候補は1件1行・選択済みはコンパクト1行にする。
 * cards モード（主担当代理店選択など既存画面）には影響しない（.ta-cas--dropdown 限定）。
 * ============================================================ */

/* フローティング候補パネルの絶対配置の基準。 */
.ta-cas--dropdown .ta-cas__search {
	position: relative;
}

/* コンボボックス風の入力欄（右にキャレット）。 */
.ta-cas--dropdown .ta-cas__input {
	padding-right: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6a6a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

/* フローティング候補パネル：入力欄直下・最大高さ・内部スクロール。文書フローを押し下げない。 */
.ta-cas--dropdown .ta-cas__panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 40;
	margin-top: 4px;
	max-height: 320px;
	overflow-y: auto;
	padding: 6px;
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(31, 42, 48, 0.14);
}

.ta-cas--dropdown.is-open .ta-cas__panel {
	display: block;
}

.ta-cas--dropdown .ta-cas__panel .ta-cas__feedback {
	margin: 4px 6px;
}

/* dropdown の候補リストは縦積み（cards のカード間 gap は使わない）。 */
.ta-cas--dropdown .ta-cas__results {
	display: block;
	margin: 0;
}

/* 候補1件（PCは1行）。長い名称・メールは他の候補を押し広げず省略表示する。 */
.ta-cas__option {
	display: flex;
	align-items: baseline;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border-radius: 8px;
	cursor: pointer;
}

.ta-cas__option:hover,
.ta-cas__option.is-active {
	background: var(--ta-bg-soft);
}

/* 顧客ID＋顧客名（省略表示）。 */
.ta-cas__option-main {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ta-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 個人／法人＋識別補助1項目（省略表示）。 */
.ta-cas__option-sub {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12.5px;
	color: var(--ta-ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}

.ta-cas__option-sep {
	margin: 0 4px;
	color: var(--ta-line);
}

/* 上限件数に達したときの注記。 */
.ta-cas__limitnote {
	margin: 6px 6px 2px;
	font-size: 12px;
	color: var(--ta-ink-soft);
}

.ta-cas__limitnote:empty {
	display: none;
	margin: 0;
}

/* コンパクトな選択済みチップ（1行）。担当者・電話・メール・住所は出さない。 */
.ta-cas__chip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
	padding: 8px 12px;
	background: var(--ta-surface);
	border: 1px solid var(--ta-accent);
	border-radius: 10px;
	box-shadow: 0 0 0 2px rgba(47, 93, 87, 0.08);
}

.ta-cas__chip-eyebrow {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ta-accent);
}

.ta-cas__chip-main {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ta-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ta-cas__chip-entity {
	font-weight: 400;
	color: var(--ta-ink-soft);
}

.ta-cas__chip-actions {
	flex: 0 0 auto;
	margin-left: auto;
}

/* 狭い画面：候補は最大2行（顧客ID＋顧客名／個人・法人＋識別補助）。 */
@media (max-width: 600px) {
	.ta-cas__option {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.ta-cas--dropdown .ta-cas__panel {
		max-height: 280px;
	}
}