/* =========================================================
   20260918 參考案例 / 暫存案例 視窗 (process_importajax.php / process_tmpcaseajax.php)
   卡片式清單 + 即時搜尋 + 結構化詳細頁
   前綴 casem_ 全部獨立，不影響其他頁面的 import_btn / caption_block
   ========================================================= */

.casem_wrap{
	padding:4px 4px 24px;
	font-family:Arial, "Microsoft JhengHei", sans-serif;
}

/* ---------- 人生區頁籤 ---------- */
.casem_tabs{
	display:flex;
	gap:4px;
	padding:4px;
	margin:0 0 14px;
	background:#eef1f5;
	border-radius:10px;
}
.casem_tab{
	flex:1 1 0;
	padding:9px 12px;
	border-radius:8px;
	text-align:center;
	font-size:15px;
	font-weight:600;
	color:#6b7280;
	cursor:pointer;
	user-select:none;
	transition:all .15s ease-in-out;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
}
.casem_tab:hover{ color:var(--main-color); }
.casem_tab.active{
	background:#fff;
	color:var(--main-color);
	box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.casem_tab_num{
	min-width:20px;
	height:20px;
	padding:0 6px;
	border-radius:999px;
	background:#dfe4ea;
	color:#5b6472;
	font-size:11.5px;
	line-height:20px;
	font-weight:700;
}
.casem_tab.active .casem_tab_num{
	background:var(--main-color);
	color:#fff;
}

/* ---------- 工具列：提示 / 搜尋 / 筆數 ---------- */
.casem_toolbar{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	margin:0 0 14px;
}
.casem_hint{
	flex:1 1 260px;
	display:flex;
	align-items:flex-start;
	gap:8px;
	padding:10px 14px;
	background:#fff8e1;
	border-left:3px solid #f5b400;
	border-radius:6px;
	color:#8a5a00;
	font-size:13.5px;
	line-height:1.65;
}
.casem_hint i{ margin-top:3px; flex:0 0 auto; }
.casem_hint a{ color:var(--main-color); text-decoration:underline; font-weight:600; }
.casem_search{
	position:relative;
	flex:0 1 280px;
	min-width:200px;
}
.casem_search input{
	width:100%;
	height:38px;
	padding:0 32px 0 34px;
	border:1px solid #d9dee5;
	border-radius:8px;
	font-size:14px;
	color:#1f2937;
	background:#fff;
	outline:none;
	transition:border-color .15s;
}
.casem_search input:focus{ border-color:var(--main-color); box-shadow:0 0 0 3px rgba(0,122,176,.12); }
.casem_search > i{
	position:absolute;
	left:11px;
	top:50%;
	transform:translateY(-50%);
	color:#9aa3af;
	font-size:15px;
	pointer-events:none;
}
.casem_search_clear{
	position:absolute;
	right:8px;
	top:50%;
	transform:translateY(-50%);
	width:22px;
	height:22px;
	border-radius:50%;
	display:none;
	align-items:center;
	justify-content:center;
	color:#9aa3af;
	cursor:pointer;
	font-size:13px;
}
.casem_search_clear:hover{ background:#eef1f5; color:#374151; }
.casem_search.has_text .casem_search_clear{ display:flex; }
.casem_count{
	font-size:13px;
	color:#6b7280;
	white-space:nowrap;
}
.casem_count b{ color:var(--main-color); font-size:15px; }

/* ---------- 暫存案例額度 ---------- */
.casem_quota{
	flex:1 1 260px;
	padding:10px 14px;
	background:#f6f8fa;
	border:1px solid #e5e8ee;
	border-radius:8px;
	font-size:13.5px;
	color:#4b5563;
	line-height:1.6;
}
.casem_quota_row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	flex-wrap:wrap;
}
.casem_quota_row b{ color:#1f2937; }
.casem_quota_bar{
	height:6px;
	margin-top:8px;
	border-radius:999px;
	background:#e3e7ec;
	overflow:hidden;
}
.casem_quota_bar > span{
	display:block;
	height:100%;
	border-radius:999px;
	background:var(--main-color);
	transition:width .3s;
}
.casem_quota_bar > span.is_full{ background:#e1264a; }
.casem_quota a{ color:var(--main-color); text-decoration:underline; font-weight:600; }

/* ---------- 卡片格線 ---------- */
.casem_grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
	gap:14px;
}
.casem_card{
	position:relative;
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid #e5e8ee;
	border-radius:12px;
	overflow:hidden;
	transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.casem_card:hover{
	border-color:#b9d9ea;
	box-shadow:0 8px 22px rgba(0,122,176,.12);
	transform:translateY(-2px);
}
.casem_card.is_hidden{ display:none; }
.casem_card_body{
	flex:1 1 auto;
	padding:16px 16px 12px;
	cursor:pointer;
}
.casem_card_body.no_click{ cursor:default; }

.casem_tags{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-bottom:9px;
}
.casem_tag{
	display:inline-flex;
	align-items:center;
	gap:4px;
	padding:2px 9px;
	border-radius:999px;
	font-size:11.5px;
	font-weight:600;
	letter-spacing:.3px;
	line-height:1.6;
}
.casem_tag--area{ background:#e8f4fa; color:var(--main-color); }
.casem_tag--simple{ background:#f1f3f6; color:#6b7280; }
.casem_tag--complex{ background:#e6f6ee; color:var(--green-color); }
.casem_tag--video{ background:#fdecec; color:#d33; }
.casem_tag--tmp{ background:#fff3e0; color:#b26a00; }

.casem_title{
	margin:0 0 8px;
	font-size:16px;
	font-weight:700;
	line-height:1.45;
	color:#1f2937;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	word-break:break-word;
}
.casem_card_body:hover .casem_title{ color:var(--main-color); }
.casem_desc{
	margin:0;
	font-size:13.5px;
	line-height:1.7;
	color:#5b6472;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
	word-break:break-word;
}
.casem_desc.is_empty{ color:#a7adb6; font-style:italic; }
.casem_meta{
	display:flex;
	flex-wrap:wrap;
	gap:6px 14px;
	margin-top:12px;
	font-size:12px;
	color:#8b93a1;
}
.casem_meta span{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.casem_meta i{ font-size:12px; }

/* 暫存案例卡片：規劃人 + 數據磚 */
.casem_person{
	display:flex;
	align-items:center;
	gap:10px;
	margin:2px 0 10px;
}
.casem_avatar{
	flex:0 0 auto;
	width:38px;
	height:38px;
	border-radius:50%;
	background:#e8f4fa;
	color:var(--main-color);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:15px;
	font-weight:700;
}
.casem_person_name{
	font-size:14.5px;
	font-weight:600;
	color:#1f2937;
	line-height:1.3;
}
.casem_person_sub{
	font-size:12px;
	color:#8b93a1;
	line-height:1.5;
	margin-top:2px;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.casem_stats{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:6px;
}
.casem_stat{
	padding:8px 10px;
	background:#f6f8fa;
	border-radius:8px;
	min-width:0;
}
.casem_stat_l{
	font-size:11px;
	color:#8b93a1;
	line-height:1.4;
}
.casem_stat_v{
	font-size:14px;
	font-weight:700;
	color:#1f2937;
	line-height:1.4;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.casem_stat_v.is_debt{ color:#d64545; }
.casem_stat_v.is_zero{ color:#a7adb6; font-weight:600; }

/* ---------- 卡片操作列 ---------- */
.casem_actions{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	padding:12px 16px;
	border-top:1px solid #eef0f4;
	background:#fafbfc;
}
.casem_btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	height:36px;
	padding:0 14px;
	border-radius:8px;
	border:1px solid transparent;
	font-size:13.5px;
	font-weight:600;
	line-height:1;
	cursor:pointer;
	user-select:none;
	white-space:nowrap;
	transition:all .15s ease-in-out;
}
.casem_btn i{ font-size:14px; }
.casem_btn--primary{
	flex:1 1 auto;
	background:var(--main-color);
	color:#fff;
}
.casem_btn--primary:hover{ background:var(--sub-color); color:#fff; }
.casem_btn--ghost{
	background:#fff;
	color:#374151;
	border-color:#d9dee5;
}
.casem_btn--ghost:hover{ border-color:var(--main-color); color:var(--main-color); }
.casem_btn--danger{
	background:#fff;
	color:#d64545;
	border-color:#f0c9c9;
}
.casem_btn--danger:hover{ background:#fdecec; border-color:#e5a3a3; }
.casem_btn--icononly{ width:38px; padding:0; }
.casem_btn--icononly i{ font-size:15px; }

/* 搜尋無結果 */
.casem_nomatch{
	display:none;
	text-align:center;
	padding:36px 10px;
	color:#8b93a1;
	font-size:14px;
}
.casem_nomatch i{ font-size:28px; display:block; margin-bottom:8px; color:#c3c9d1; }
.casem_grid.is_empty + .casem_nomatch{ display:block; }

/* ---------- 詳細頁 ---------- */
.casem_detail{
	max-width:980px;
	margin:0 auto;
	padding:4px 4px 20px;
	font-family:Arial, "Microsoft JhengHei", sans-serif;
}
.casem_detail_head{
	padding:22px 24px;
	margin-bottom:16px;
	border:1px solid #d9eaf3;
	border-radius:12px;
	background:linear-gradient(135deg, #eaf5fb 0%, #f8fbfd 100%);
}
.casem_detail_title{
	margin:8px 0 10px;
	font-size:22px;
	font-weight:700;
	line-height:1.4;
	color:#1f2937;
	word-break:break-word;
}
.casem_detail_desc{
	margin:0;
	font-size:14.5px;
	line-height:1.85;
	color:#4b5563;
	word-break:break-word;
}
.casem_detail_desc + .casem_detail_desc{
	margin-top:12px;
	padding-top:12px;
	border-top:1px dashed #cfe0ea;
}
.casem_detail_meta{
	display:flex;
	flex-wrap:wrap;
	gap:6px 18px;
	margin-top:14px;
	font-size:12.5px;
	color:#6b7280;
}
.casem_detail_meta span{ display:inline-flex; align-items:center; gap:5px; }

.casem_section_title{
	margin:22px 0 12px;
	font-size:15px;
	font-weight:700;
	color:#6b7280;
	letter-spacing:1px;
	display:flex;
	align-items:center;
	gap:10px;
}
.casem_section_title:after{
	content:"";
	flex:1;
	height:1px;
	background:#e5e8ee;
}
.casem_section{
	margin-bottom:14px;
	border:1px solid #e5e8ee;
	border-radius:12px;
	background:#fff;
	overflow:hidden;
}
.casem_section_h{
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px 18px;
	border-bottom:1px solid #eef0f4;
	font-size:15px;
	font-weight:700;
	color:#1f2937;
	background:#fafbfc;
}
.casem_section_no{
	flex:0 0 auto;
	width:26px;
	height:26px;
	border-radius:8px;
	background:var(--main-color);
	color:#fff;
	font-size:12.5px;
	font-weight:700;
	display:flex;
	align-items:center;
	justify-content:center;
}
.casem_section_sub{
	padding:12px 18px 0;
	font-size:13px;
	font-weight:700;
	color:#6b7280;
}
.casem_dl{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
	gap:0 24px;
	padding:6px 18px 12px;
}
.casem_dl_item{
	padding:10px 0;
	border-bottom:1px dashed #eef0f4;
	min-width:0;
}
.casem_dl_l{
	font-size:12px;
	color:#8b93a1;
	line-height:1.4;
	margin-bottom:3px;
}
.casem_dl_v{
	font-size:15px;
	font-weight:600;
	color:#1f2937;
	line-height:1.4;
	font-variant-numeric:tabular-nums;
	word-break:break-word;
}
.casem_dl_v.is_zero{ color:#a7adb6; }
.casem_dl_v.is_sum{ color:var(--main-color); }
.casem_dl_v.is_debt{ color:#d64545; }
.casem_empty_line{
	padding:14px 18px;
	font-size:13.5px;
	color:#a7adb6;
	font-style:italic;
}

/* 家庭成員 chip */
.casem_members{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	padding:10px 18px 16px;
}
.casem_member{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:6px 12px 6px 6px;
	border:1px solid #e5e8ee;
	border-radius:999px;
	background:#f9fafb;
	font-size:13px;
	color:#374151;
}
.casem_member .casem_avatar{ width:26px; height:26px; font-size:12px; }
.casem_member small{ color:#8b93a1; font-size:12px; }

/* 目標清單 */
.casem_goals{ padding:6px 18px 14px; }
.casem_goal{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px 0;
	border-bottom:1px dashed #eef0f4;
	font-size:14px;
	color:#1f2937;
}
.casem_goal:last-child{ border-bottom:0; }
.casem_goal_no{
	flex:0 0 auto;
	width:24px;
	height:24px;
	border-radius:50%;
	background:#e8f4fa;
	color:var(--main-color);
	font-size:12px;
	font-weight:700;
	display:flex;
	align-items:center;
	justify-content:center;
}
.casem_goal_name{ flex:1 1 auto; font-weight:600; min-width:0; word-break:break-word; }
.casem_goal_age{ font-size:12.5px; color:#8b93a1; white-space:nowrap; }
.casem_goal_amt{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- RWD ---------- */
@media (max-width: 767px){
	.casem_tab{ font-size:13.5px; padding:8px 6px; gap:4px; }
	.casem_tab_num{ display:none; }
	.casem_grid{ grid-template-columns:1fr; }
	.casem_search{ flex:1 1 100%; }
	.casem_count{ flex:1 1 100%; text-align:right; }
	.casem_stats{ grid-template-columns:repeat(2, 1fr); }
	.casem_btn--primary{ flex:1 1 100%; }
	.casem_detail_head{ padding:16px; }
	.casem_detail_title{ font-size:19px; }
	.casem_dl{ grid-template-columns:1fr; }
}