/* =========================================================
   20260919 交易績效（process_trade.php getToolTrading）
   前綴 trd_；表格沿用 rwdv1_table，外層加 trd_card，列加 trd_item/region/total
   ========================================================= */

.trd_wrap{ padding:10px 8px 16px; font-family:Arial, "Microsoft JhengHei", sans-serif; color:#1f2937; }

/* 整戶摘要 */
.trd_kpis{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; margin:0 0 12px; }
.trd_kpi{
	padding:10px 14px; border-radius:10px;
	background:#fff; border:1px solid #e3e8ee; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.trd_kpi span{ display:block; font-size:11.5px; color:#6b7280; margin-bottom:4px; white-space:nowrap; }
.trd_kpi b{ display:block; font-size:17px; font-weight:700; color:#111827; font-variant-numeric:tabular-nums; white-space:nowrap; }
.trd_kpi.accent b{ color:var(--main-color); }
.trd_kpi.pos{ background:#f0faf6; border-color:#c6ebdb; }
.trd_kpi.pos b{ color:#0f766e; }
.trd_kpi.neg{ background:#fff5f5; border-color:#f5c6c6; }
.trd_kpi.neg b{ color:#dc2626; }

/* 頁籤（百寶盒模式） */
.trd_wrap .trd_tabs{
	display:flex; gap:4px; padding:4px; margin:0 0 12px;
	background:#eef1f5; border-radius:10px;
}
.trd_wrap .trd_tabs .login_tab1{
	float:none; width:auto !important; flex:1 1 auto;
	padding:9px 12px; border:0 !important; border-radius:8px;
	font-size:13.5px; font-weight:600; color:#6b7280; text-align:center;
}
.trd_wrap .trd_tabs .login_tab1:hover{ color:var(--main-color); }
.trd_wrap .trd_tabs .login_tab1.active{ background:#fff; color:var(--main-color); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.trd_wrap .trd_tabs > div[style*='clear']{ display:none; }

/* 說明 */
.trd_intro{
	display:flex; align-items:flex-start; gap:10px;
	margin:0 0 12px; padding:12px 16px;
	border-radius:10px; background:#e6f4fa; color:#0b5d84;
	font-size:13.5px; line-height:1.75; letter-spacing:.3px;
}
.trd_intro > i{ flex:0 0 auto; margin-top:3px; font-size:16px; color:var(--main-color); }

/* 操作列 */
.trd_wrap .trd_actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; padding:0; }
.trd_wrap .trd_actions .sendv2_btn,
.trd_wrap .trd_actions .defaultv2_btn{
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	min-width:0; height:36px; padding:0 16px; margin:0; border-radius:8px;
	border:1px solid transparent; font-size:13.5px; font-weight:600; line-height:1; letter-spacing:0; box-shadow:none;
}
.trd_wrap .trd_actions .sendv2_btn{ background:var(--main-color); color:#fff; box-shadow:0 2px 6px rgba(0,122,176,.25); }
.trd_wrap .trd_actions .sendv2_btn:hover{ background:#00699a; transform:translateY(-1px); }
.trd_wrap .trd_actions .defaultv2_btn{ background:#fff; color:#374151; border-color:#d9dee5; }
.trd_wrap .trd_actions .defaultv2_btn:hover{ border-color:var(--main-color); color:var(--main-color); background:#f4fafd; }
.trd_legend{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#6b7280; }
.trd_legend i.sw{ width:12px; height:12px; border-radius:3px; display:inline-block; margin-left:8px; }
.trd_legend i.sw:first-child{ margin-left:0; }
.trd_legend i.sw.item{ background:#fff; border:1px solid #d9dee5; }
.trd_legend i.sw.region{ background:#eef7fb; border:1px solid #bfdff0; }
.trd_legend i.sw.total{ background:#fff7ea; border:1px solid #f3c48a; }

/* 卡片 */
.trd_card{
	margin:0 0 14px; background:#fff;
	border:1px solid #e3e8ee; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.04);
	overflow:hidden;
}
.trd_card_head{
	display:flex; align-items:center; gap:8px;
	padding:11px 16px; border-bottom:1px solid #eef1f5;
	font-size:15px; font-weight:700; color:#111827;
}
.trd_card_head > i{
	width:26px; height:26px; border-radius:8px;
	background:#e6f4fa; color:var(--main-color);
	display:inline-flex; align-items:center; justify-content:center; font-size:13px;
}
.trd_card .table_blcok{ margin:0; border:0; border-radius:0; max-height:none; }
.trd_card .rwdv1_table{ border:0; margin:0; min-width:100%; }
.trd_card .tablev1_thead{ background:#f7f9fb; color:#6b7280; font-size:12px; font-weight:700; }
.trd_card .tablev1_th{ padding:9px 8px; line-height:1.35; border-right:1px solid #eceff3; border-bottom:1px solid #e3e8ee; letter-spacing:.2px; }
.trd_card .tablev1_th.trd_th_first{ color:#111827; }
.trd_card .tablev1_tr{ border-top:1px solid #f1f4f8; transition:background .12s; }
.trd_card .tablev1_tr:nth-child(even){ background:#fff; }
.trd_card .tablev1_tr:hover{ background:#f4fafd; }
.trd_card .tablev1_td{
	padding:8px; border-right:1px solid #f1f4f8;
	font-size:13.5px; font-variant-numeric:tabular-nums;
	display:flex; flex-direction:column; justify-content:center;
}
.trd_card .tablev1_td .mob_r{ text-align:right; line-height:1.5; }
.trd_card .tablev1_td:nth-child(-n+6) .mob_r{ text-align:left; }
.trd_card .tablev1_td:first-child .mob_r{ text-align:left; }
.trd_card .tablev1_td .mob_r:empty:before{ content:'—'; color:#d5dae1; }

/* 列類型 */
.trd_tag{
	display:inline-block; padding:2px 8px; border-radius:999px;
	font-size:11.5px; font-weight:600; white-space:nowrap;
}
.trd_tag.item{ background:#f1f4f8; color:#4b5563; }
.trd_tag.region{ background:#e6f4fa; color:#006b9a; }
.trd_tag.total{ background:#e07b00; color:#fff; }
.trd_card .tablev1_tr.trd_region{ background:#f6fbfe; }
.trd_card .tablev1_tr.trd_region:hover{ background:#eef7fb; }
.trd_card .tablev1_tr.trd_total{ background:#fff9ef; font-weight:700; }
.trd_card .tablev1_tr.trd_total:hover{ background:#fff3e0; }
.trd_card .tablev1_tr.trd_total .tablev1_td{ border-top:2px solid #f3c48a; }
.trd_card .tablev1_tr.trd_spacer{ display:none; }

/* 獲利正負 */
.trd_pl{ font-weight:700; }
.trd_pl.pos{ color:#0f766e; }
.trd_pl.neg{ color:#dc2626; }
.trd_pl.zero{ color:#9aa3af; font-weight:500; }

/* 空狀態 */
.trd_empty{
	padding:44px 20px; text-align:center;
	border:1px dashed #cfd6de; border-radius:12px; background:#fbfcfd; color:#6b7280;
}
.trd_empty i{ font-size:34px; color:#c4ccd6; display:block; margin-bottom:10px; }
.trd_empty h4{ margin:0 0 6px; font-size:16px; font-weight:700; color:#374151; }
.trd_empty p{ margin:0; font-size:13.5px; line-height:1.7; }

@media screen and (max-width: 1100px){ .trd_kpis{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media screen and (max-width: 640px)
{
	.trd_kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
	.trd_legend{ margin-left:0; width:100%; }
	.trd_wrap .trd_tabs{ flex-direction:column; }
}
/* 凍結第一欄（列類型），橫向捲動時仍看得到 */
.trd_card .tablev1_th.fixed_precolumn{ background:#f7f9fb; z-index:3; box-shadow:4px 0 8px -4px rgba(0,0,0,.12); }
.trd_card .tablev1_td.fixed_precolumn{ box-shadow:4px 0 8px -4px rgba(0,0,0,.12); border-right:1px solid #e3e8ee; }
.trd_card .tablev1_tr.trd_region .tablev1_td.fixed_precolumn{ background:#f6fbfe; }
.trd_card .tablev1_tr.trd_total .tablev1_td.fixed_precolumn{ background:#fff9ef; }
.trd_card .tablev1_tr:hover .tablev1_td.fixed_precolumn{ background:#f4fafd; }

/* =========================================================
   交易紀錄（open_trading_record / trade_change_datacon）
   ========================================================= */
.trr_filter{
	display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
	margin:0 0 12px; padding:14px 16px;
	background:#fff; border:1px solid #e3e8ee; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.trr_filter_item{ display:flex; flex-direction:column; gap:6px; flex:0 1 260px; min-width:200px; }
.trr_filter_item label{ display:flex; align-items:center; gap:5px; margin:0; font-size:12.5px; font-weight:600; color:#374151; }
.trr_filter_item label i{ color:var(--main-color); font-size:13px; }
.trr_filter_item .form_input_v1{
	height:38px; padding:0 12px; border:1px solid #d9dee5; border-radius:8px;
	background:#fff; font-size:14px; color:#1f2937; box-shadow:none; max-width:none;
}
.trr_filter_item select.form_input_v1{ padding:0 10px !important; }
.trr_filter_item .form_input_v1:focus{ border-color:var(--main-color); box-shadow:0 0 0 3px rgba(0,122,176,.12); }
.trr_filter_act{ flex:0 0 auto; flex-direction:row; align-items:center; min-width:0; }
.trr_chip{
	display:inline-flex; align-items:center; gap:6px;
	height:38px; padding:0 16px; border-radius:8px;
	background:var(--main-color); color:#fff; font-size:13.5px; font-weight:600;
	cursor:pointer; white-space:nowrap; box-shadow:0 2px 6px rgba(0,122,176,.25); transition:all .15s;
}
.trr_chip:hover{ background:#00699a; }
.trr_chip.ghost{ background:#fff; color:#374151; border:1px solid #d9dee5; box-shadow:none; }
.trr_chip.ghost:hover{ border-color:var(--main-color); color:var(--main-color); background:#f4fafd; }
.trr_filter_hint{
	flex:1 1 100%; display:flex; align-items:center; gap:6px;
	margin-top:2px; font-size:12.5px; color:#6b7280;
}
.trr_filter_hint i{ color:#9aa3af; }

.trr_toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; }
.trr_toolbar .i-checks{ margin:0; }
.trr_toolbar .i-checks label{ margin:0; font-weight:600; font-size:14px; color:#374151; cursor:pointer; display:flex; align-items:center; gap:6px; }
.trr_selected{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; background:#eef1f5; color:#6b7280; font-size:12.5px; font-weight:600; }
.trr_selected b{ color:var(--main-color); }
.trr_toolbar_r{ margin-left:auto; }
.trr_toolbar .trr_delbtn{
	display:inline-flex; align-items:center; gap:6px;
	min-width:0; height:34px; padding:0 14px; margin:0; border-radius:8px;
	background:#fff; color:#b91c1c; border:1px solid #f3c5c5;
	font-size:13.5px; font-weight:600; line-height:1; letter-spacing:0; box-shadow:none;
}
.trr_toolbar .trr_delbtn:hover{ background:#fef2f2; border-color:#dc2626; }

.trr_tablewrap{
	background:#fff; border:1px solid #e3e8ee; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.04); overflow:hidden;
}
.trr_tablewrap .table_blcok{ margin:0; border:0; border-radius:0; max-height:calc(100vh - 360px); }
.trr_tablewrap .rwdv1_table{ border:0; margin:0; min-width:100%; }
.trr_tablewrap .tablev1_thead{ background:#f7f9fb; color:#6b7280; font-size:12px; font-weight:700; }
.trr_tablewrap .tablev1_th{ padding:9px 8px; line-height:1.35; border-right:1px solid #eceff3; border-bottom:1px solid #e3e8ee; background:#f7f9fb; }
.trr_tablewrap .tablev1_th.fixed_precolumn{ z-index:3; }
.trr_tablewrap .tablev1_tr{ border-top:1px solid #f1f4f8; transition:background .12s; }
.trr_tablewrap .tablev1_tr:nth-child(even){ background:#fff; }
.trr_tablewrap .tablev1_tr:nth-child(even) .tablev1_td.fixed_precolumn{ background:#fff; }
.trr_tablewrap .tablev1_tr:hover, .trr_tablewrap .tablev1_tr:hover .tablev1_td.fixed_precolumn{ background:#f4fafd; }
.trr_tablewrap .tablev1_td{ padding:7px 8px; border-right:1px solid #f1f4f8; font-size:13.5px; display:flex; flex-direction:column; justify-content:center; }
.trr_tablewrap .tablev1_td .i-checks{ margin:0; }
.trr_tablewrap .tablev1_td .i-checks label{ margin:0; }
.trr_tablewrap .tablev1_td.fixed_precolumn[style*='left:48px']{ box-shadow:4px 0 8px -4px rgba(0,0,0,.12); border-right:1px solid #e3e8ee; }
.trr_tablewrap .tablev1_th.fixed_precolumn[style*='left:48px']{ box-shadow:4px 0 8px -4px rgba(0,0,0,.12); }
.trr_date{ font-weight:600; color:#374151; font-variant-numeric:tabular-nums; }
.trr_code{ font-weight:700; color:#111827; }
.trr_num{ text-align:right; font-variant-numeric:tabular-nums; }
.trr_num.strong{ font-weight:700; color:#111827; }
.trr_tablewrap .tablev1_td .mob_r:empty:before{ content:'\2014'; color:#d5dae1; }
.trr_type{ display:inline-block; padding:2px 8px; border-radius:999px; background:#f1f4f8; color:#4b5563; font-size:12px; font-weight:600; white-space:nowrap; }
.trr_tn{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; background:#eef1f5; color:#4b5563; }
.trr_tn.buy{ background:#e6f7f1; color:#0f766e; }
.trr_tn.sell{ background:#fef2f2; color:#b91c1c; }
.trr_tn.div{ background:#e6f4fa; color:#006b9a; }

.trr_empty{
	padding:44px 20px; text-align:center;
	border:1px dashed #cfd6de; border-radius:12px; background:#fbfcfd; color:#6b7280;
}
.trr_empty i{ font-size:34px; color:#c4ccd6; display:block; margin-bottom:10px; }
.trr_empty h4{ margin:0 0 6px; font-size:16px; font-weight:700; color:#374151; }
.trr_empty p{ margin:0; font-size:13.5px; line-height:1.7; }

/* 底部按鈕（交易紀錄／新增資料 共用 #show_btngroups） */
#show_btngroups{ display:inline-flex !important; align-items:center; gap:10px; }
#show_btngroups .sendv2_btn{
	display:inline-flex !important; align-items:center; gap:6px;
	min-width:0; height:40px; padding:0 18px; margin:0; border-radius:8px;
	border:1px solid transparent; font-size:14.5px; font-weight:600; line-height:1; letter-spacing:0; box-shadow:none;
	background:var(--main-color); color:#fff;
}
#show_btngroups .sendv2_btn:hover{ background:#00699a; }
#show_btngroups #ptrade_bakbtn{ background:#fff; color:#6b7280; border-color:#d9dee5; }
#show_btngroups #ptrade_bakbtn:hover{ color:#111827; border-color:#9aa3af; background:#fff; }
#show_btngroups #ptrade_calcbtn, #show_btngroups #ptrade_selfcalcbtn{ background:#fff; color:var(--main-color); border-color:#bfdff0; }
#show_btngroups #ptrade_calcbtn:hover, #show_btngroups #ptrade_selfcalcbtn:hover{ background:#e6f4fa; border-color:var(--main-color); }
/* 20261003 交易績效底部：按鈕群組(inline-flex)與旁邊的「關閉我的理財百寶盒」(inline-block)預設以 baseline 對齊會一高一低，改成垂直置中 */
/* 20261008 這條只對 .sendv2_btn 置中，同一列的「下載報告書」(.defaultv2_btn) 仍在 baseline → 高低差 15px；改為底部所有按鈕一起置中 */
#footer_btn > *,
#footerv2_btn > *{ vertical-align:middle; }
#show_btngroups #ptrade_savebtn{ background:var(--main-color); color:#fff; box-shadow:0 2px 6px rgba(0,122,176,.25); }

/* 新增資料表單：沿用 ainv_editor 的三欄格線，這裡只補差異 */
.trr_form.ainv_editor{ padding:0 !important; }
.trr_form .con_full{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.trr_form .con_full > .input_blcok:first-child{ grid-column:auto; }
.trr_form .input_blcok > #show_tacc,
.trr_form .input_blcok > #show_mny1,
.trr_form .input_blcok > #show_mny2{
	display:flex; align-items:center; min-height:38px; padding:0 12px; border-radius:8px;
	background:#f7f9fb; border:1px dashed #e3e8ee; color:#374151; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
}
.trr_form .input_blcok > #show_mny1, .trr_form .input_blcok > #show_mny2{ color:var(--main-color); font-size:15px; }
.trr_form .input_label{ line-height:1.4; }
.trr_form .chosen-container{ width:100% !important; }
.trr_form .chosen-container-single .chosen-single{
	height:38px; line-height:36px; padding:0 12px; border:1px solid #d9dee5; border-radius:8px; background:#fff; box-shadow:none; font-size:14px;
}
.trr_form .chosen-container-single .chosen-single div b{ background-position:0 7px; }
.trr_form .chosen-container-active .chosen-single{ border-color:var(--main-color); box-shadow:0 0 0 3px rgba(0,122,176,.12); }

@media screen and (max-width: 1100px){ .trr_form .con_full{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media screen and (max-width: 640px){ .trr_form .con_full{ grid-template-columns:minmax(0,1fr); } .trr_filter_item{ flex:1 1 100%; } }

/* 新增資料表單：三欄整齊排列（form_flex 右側是空的，當一般欄位處理） */
.trr_form .con_full > .input_blcok:has(.form_flex){ grid-column:auto; }
.trr_form .con_full > .input_blcok:first-child{ grid-column:auto; }
.trr_form .form_flex{ display:block; }
.trr_form .ff_l{ width:100%; max-width:none; flex:none; }
.trr_form .ff_r{ display:none; }
.trr_form .input_label{ min-height:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trr_form .input_blcok{ min-width:0; }
.trr_help{ margin-top:5px; font-size:12px; color:#9aa3af; line-height:1.5; }
.trr_form .form_input_v1[type='date']{ padding-right:10px; }

/* 20261003(二) 投資績效上方「自建資產價格」面板 + 表格內「自填」唯讀顯示 */
.trd_sppanel{ border-color:#f5c27a; }
.trd_sppanel .trd_card_head{ background:#fff7ea; flex-wrap:wrap; gap:6px 10px; }
.trd_sppanel .trd_sphead_note{ font-size:12.5px; font-weight:400; color:#8a6d3b; }
.trd_spwarn{ margin:10px 14px 0; padding:8px 12px; border-radius:6px; background:#fdecea; color:#b42318; font-size:13.5px; }
.trd_sptable th, .trd_sptable td{ padding:8px 10px !important; vertical-align:middle !important; white-space:nowrap; }
.trd_sptable .trd_selfin{ width:130px; height:34px; padding:4px 8px; text-align:right; font-size:14px; border:1px solid #f0ad4e; background:#fffaf0; border-radius:4px; }
.trd_sptable .trd_selfin:focus{ border-color:#0077b6; background:#fff; outline:none; }
.trd_spcfex small{ display:block; margin-top:3px; font-size:11.5px; color:#8a94a3; }
.trd_spfix{ display:inline-block; min-width:60px; padding:6px 8px; text-align:right; background:#f3f4f6; border-radius:4px; color:#6b7280; }
.trd_selfnone{ color:#d92d20; font-style:normal; font-weight:600; }
.trd_spchg{ color:#b54708; font-weight:600; }
.trd_spfoot{ display:flex; justify-content:flex-end; align-items:center; gap:12px; padding:8px 14px 12px; font-size:13px; color:#6b7280; }
.trd_spdirty{ color:#b54708; font-weight:600; }
.trd_sprow{ transition:background-color .3s; }
.trd_sprow.trd_spflash{ background:#fff3cd !important; }
/* 表格內：唯讀 + 「自填」標籤，點了捲到上方面板 */
.trd_selfshow{ cursor:pointer; display:inline-flex; align-items:center; gap:6px; border-bottom:1px dashed #f0ad4e; }
.trd_selftag{ font-size:11px; padding:1px 6px; border-radius:10px; background:#fff1d6; color:#b54708; font-weight:600; }
/* 有變更尚未計算：按鈕醒目 */
#show_btngroups #ptrade_selfcalcbtn.trd_spneed{ background:var(--main-color); color:#fff; border-color:var(--main-color); box-shadow:0 0 0 3px rgba(0,122,176,.2); }
/* 輸入工具：自建資產提示 */
.trd_acod_hint{ margin-top:6px; padding:6px 10px; border-radius:6px; background:#eef6fb; color:#0b5d8a !important; line-height:1.6; }
@media (max-width:768px){
	.trd_sptable th, .trd_sptable td{ white-space:normal; }
	.trd_sptable .trd_selfin{ width:100%; }
}
/* 20261003(三) 自建資產價格面板分頁(頁碼在表格上方) */
.trd_sppager{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 14px 6px; font-size:13px; color:#6b7280; }
.trd_sppg_btns{ display:inline-flex; align-items:center; gap:4px; }
.trd_sppg_btn{ min-width:32px; height:30px; padding:0 8px; border:1px solid #d9dee5; border-radius:6px; background:#fff; color:#374151; font-size:13px; cursor:pointer; position:relative; }
.trd_sppg_btn:hover:not([disabled]){ border-color:var(--main-color); color:var(--main-color); }
.trd_sppg_btn.active{ background:var(--main-color); border-color:var(--main-color); color:#fff; font-weight:600; }
.trd_sppg_btn[disabled]{ opacity:.4; cursor:default; }
.trd_sppg_btn.dirty::after{ content:''; position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#f79009; }
.trd_sppg_gap{ padding:0 2px; color:#9aa3af; }
.trd_sptablewrap{ box-sizing:border-box; }
.trd_sptable tr.trd_sprow.trd_sphide{ display:none !important; }
/* 20261004 自建資產價格：「原幣價格＋匯率」與「新台幣價格」擇一，以最後填入的為準 */
.trd_sphint{ margin:10px 14px 0; padding:8px 12px; border-radius:6px; background:#eef6fb; color:#245b7a; font-size:13px; }
.trd_sptable .trd_spor{ text-align:center; color:#9aa3af; font-size:12.5px; padding-left:0 !important; padding-right:0 !important; }
.trd_sptable td.trd_spoff .trd_selfin{ background:#f3f4f6; border-color:#d9dee5; color:#9aa3af; }
.trd_sptable td.trd_spoff .trd_spcfex small{ color:#c0c6cf; }
.trd_spuse{ display:block; margin-top:3px; font-size:11.5px; color:#0077b6; }
@media screen and (max-width: 768px){
	.trd_sptable .trd_spor .mob_r{ width:100%; }
}