/* =======================================================================
 * bs5-compat.css
 * ---------------------------------------------------------------------
 * Bootstrap 4 → 5 升級相容性 shim
 * Target: Bootstrap 5.3.8
 * 來源：letsgo-madm 模組 upd_bootstrap 分支 M1 pilot + Task 2.1/2.2 積累
 * 用途：修 BS5 改變的預設行為（variable 系統繞過 !important、
 *       utility class rename、component 結構改寫、<a> underline 預設等）
 * 依賴：project.css 的 :root { --brand-teal, --brand-teal-hover } 品牌色變數
 * 載入順序：adminlte.css → adminlte4-compat.css → **本檔** →
 *          form-group-compat.css → project.css（最後 override 前一切）
 * 與本檔成對的是 adminlte4-compat.css（處理 AdminLTE v3 → v4 變更）
 * ======================================================================= */

/* --- Input Group prepend（對齊舊版 BS4 預設淡灰底深字 icon，源自舊 adminlte.css:3701）
 * BS5 改了 variable 系統 + 原 BS4 default 色失效；AdminLTE v3 原本靠 BS4 default cover，
 * 現在 BS4 → BS5 後需直接指定 --- */
.input-group > .input-group-text {
	background-color: #e9ecef;
	color: #495057;
	border-color: #ced4da;
}

/* --- Button：bg-olive 套色（BS5 .btn 以 var(--bs-btn-bg) 套背景，.bg-olive !important 會被繞過）
 * 用 .btn.bg-olive 複合 selector 提升特異性，並把色改回舊版 teal --- */
.btn.bg-olive {
	background-color: var(--brand-teal) !important;
	color: #fff;
	border-color: var(--brand-teal);
}
.btn.bg-olive:hover,
.btn.bg-olive:focus {
	background-color: var(--brand-teal-hover) !important;
	color: #fff;
	border-color: var(--brand-teal-hover);
}

/* BS5 移除 .btn-block，補 shim */
.btn.btn-block {
	display: block;
	width: 100%;
}

/* BS4 .pull-left/.pull-right 防禦性 shim（BS5 已 rename 為 .float-start/.float-end） */
.pull-left { float: left !important; }
.pull-right { float: right !important; }

/* --- 登入頁 card 陰影：BS5 card box-shadow 預設較弱，補強以對齊 BS4 視覺 --- */
.page-login .card {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* --- 全站 <a> 預設無底線：BS5 reboot 把 <a> 預設改為 text-decoration: underline
 * （BS4 原本是 none、:hover 才 underline）；AdminLTE v4 未補此 reset。
 * letsgo 整套設計依 BS4 預設「平時無底線、hover 才有底線」進行，恢復該行為以對齊 production 視覺。
 * 適用範圍：letsgo 站內所有 <a>，包含 login 頁 footer / form body 連結、welcome 頁 footer
 * Bank Of Panhsin 連結、navi 連結、modal 連結等。 --- */
a {
	text-decoration: none;
}


/* --- BS5 移除 .form-control[readonly] 灰底
 * BS4 原 rule（alt/adminlte.core.css:2084）：
 *   .form-control:disabled, .form-control[readonly] { background-color:#e9ecef }
 * BS5 form-control.css 只留 :disabled 灰底，readonly 改白底以支援官方新
 * .form-control-plaintext 模式（見 getbootstrap.com/docs/5.3/forms/form-control）。
 * 本專案 modal 內 5 處靜態顯示欄位（productData / opData）仍用
 * .form-control-border + readonly 組合，失去灰底視覺。
 * Scope 縮到 .form-control-border[readonly] 避開 login.html autofill-trick
 * 的暫時 readonly（無 form-control-border）。 --- */
.form-control.form-control-border[readonly]:not(:disabled),
.form-select.form-control-border[readonly]:not(:disabled) {
	background-color: #e9ecef;
}

/* --- Grid gutter 還原：AdminLTE v3 用 $grid-gutter-width: 15px（col padding 7.5px /
 * row margin -7.5px），BS5 預設 1.5rem = 24px（col padding 12px / row margin -12px），
 * 欄位間距差 9px 在多欄表單明顯可見。用 BS5 variable 全域還原。 --- */
.row {
	--bs-gutter-x: 15px;
}

/* --- .container max-width 還原 BS4 上限：BS5 新增 xxl(≥1400px) 容器層 max-width 1320px，
 * BS4 最大斷點為 xl(≥1200px)→1140px（無 xxl）。base_guest / base_member 殼內容用 .container，
 * 在 ≥1400px 寬螢幕下 BS5 給 1320 → 卡片比舊版（1140，card ~1110px）寬約 180px。
 * 還原 BS4 行為：≥1400px 仍封頂 1140，對齊舊版置中寬度（1200~1399 兩版本即一致，故只蓋 ≥1400）。
 * 不含 .container-xxl（若日後刻意要 xxl 寬度時不被此 shim 綁住）。
 * broken-by: BS5 新增 BS4 沒有的 xxl 容器斷點。 --- */
@media (min-width: 1400px) {
	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl {
		max-width: 1140px;
	}
}

/* --- BS4 全域 [class*="col-"]{width:100%} 還原（限帶 col-sm-* 的 .btn，僅 xs 斷點）：
 * BS4 grid base rule 給所有 .col-* 元素 width:100%（作為其斷點規則未生效時的 fallback）；
 * BS5 移除此全域規則改純 flex。導致 card-footer / modal-footer 內掛響應式 col-* 的 .btn
 * （非 .row 子元素、無 base .col），其最小斷點為 col-sm-* 者，在 <576px（xs）失去滿版
 * → 縮成內容寬（量測僅 61px）。全站 15 個「btn ... col-lg-3 col-md-6 col-sm-12」送出鈕
 * 受影響（桌機/平板正常，僅 xs 破）：resendEmailConfirm / login / register /
 * resetLoginPin(AndPrivQuestion) / changePrivQuestion / changeTxnPin / changeUserInfo 等。
 * gap 僅在 <576（≥576 時 BS5 的 col-sm-12 仍給 width:100%），故只還原 xs。
 * ⚠️ selector 限 col-sm-*（非寬鬆 col-*）：排除裸 col-N 按鈕（applyStatus col-2 /
 *    help col-3 / privateData col-1），那些 BS4/BS5 在 xs 都非滿版，誤套 100% 反成新 regression。
 * broken-by: BS5 移除 BS4 [class*="col-"] 全域 width:100%。 --- */
@media (max-width: 575.98px) {
	.btn[class*="col-sm-"] {
		width: 100%;
	}
}

/* --- .btn-primary 色還原：BS4 primary = #007bff，BS5 改 #0d6efd（ΔE≈4.73）。
 * BS5 .btn 用 --bs-btn-* variable 套色，直接 override background-color 無效。
 * 同步移除 BS5 新增的 inset box-shadow（BS4 .btn 無此效果）。 --- */
/* --- .bg-info 色還原：BS5 改 --bs-info 從 #17a2b8 → #0dcaf0（亮青），
 * 且不再自動設白字。modal 區段標題 <h5 class="bg-info"> 從深青藍白字
 * 變成亮青深字，視覺差異顯著。還原 BS4 值。 --- */
.bg-info {
	background-color: #17a2b8 !important;
	color: #fff !important;
}

/* --- Modal shadow 還原：BS5 把 --bs-modal-box-shadow 從 rgba(0,0,0,0.5) 改成
 * var(--bs-box-shadow) = rgba(var(--bs-body-color-rgb),0.15)，alpha 0.5→0.15
 * 導致 modal 背景陰影從深色變近乎透明，視覺上 modal 浮起感消失。還原 BS4 原值。 --- */
.modal {
	--bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

/* --- BS5 .btn 預設 inset box-shadow 移除：BS5 新增
 * var(--bs-btn-box-shadow): inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075)
 * BS4 按鈕無此效果。全域移除對齊舊版視覺。 --- */
.btn {
	--bs-btn-box-shadow: none;
}

.btn-primary {
	--bs-btn-bg: #007bff;
	--bs-btn-border-color: #007bff;
	--bs-btn-hover-bg: #0069d9;
	--bs-btn-hover-border-color: #0062cc;
	--bs-btn-active-bg: #0062cc;
	--bs-btn-active-border-color: #005cbf;
	--bs-btn-disabled-bg: #007bff;
	--bs-btn-disabled-border-color: #007bff;
	--bs-btn-focus-shadow-rgb: 38, 143, 255;
	--bs-btn-box-shadow: none;
}

/* --- .btn-success 色票還原：BS4 success = #28a745，BS5 改 #198754。
 * opData DataTable 內「修改」按鈕視覺偏深，回退 BS4 變數。 --- */
.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-bg: #28a745;
	--bs-btn-border-color: #28a745;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #218838;
	--bs-btn-hover-border-color: #1e7e34;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #1e7e34;
	--bs-btn-active-border-color: #1c7430;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #28a745;
	--bs-btn-disabled-border-color: #28a745;
	--bs-btn-focus-shadow-rgb: 72, 180, 97;
}

/* --- .btn-warning 文字色還原：BS5 warning 文字預設趨近純黑，
 * 舊版 AdminLTE/BS4 實際呈現為較深藍黑（#1f2d3d）。 --- */
.btn-warning {
	--bs-btn-color: #1f2d3d;
	--bs-btn-hover-color: #1f2d3d;
	--bs-btn-active-color: #1f2d3d;
	--bs-btn-disabled-color: #1f2d3d;
}

/* ============================================================
 * === icheck-bootstrap 替換方案：.form-check-letsgo ===
 *
 * BS5 native .form-check + accent-color + @supports not (accent-color)
 * fallback（iOS 10 / Android 7）。2026-06-01 起全站 icheck 已全數改寫為
 * .form-check-letsgo（customer / help / calculator / messages / payments /
 * register / agreementModal），icheck-bootstrap 套件/link 已移除。
 * radio 用實心圓點 fallback（見下方 [type=radio] 規則），checkbox 用勾。
 *
 * 設計重點：BS5 .form-check-input 預設 appearance:none，accent-color 對
 * 現代瀏覽器渲染無直接作用，因此 :checked 覆寫 background-color /
 * border-color 為品牌青藍才是真正生效路徑；accent-color 作為 spec 兜底
 * 與焦點環色調對齊用。
 * ============================================================ */

/* 現代瀏覽器 — BS5 form-check 走 appearance:none + SVG background-image，
 * 真正生效路徑是 :checked 的 background-color / border-color 覆寫；
 * accent-color 作為 spec 兜底 + 焦點環色調對齊。 */
.form-check-letsgo {
	accent-color: var(--brand-teal);
}
.form-check-letsgo:checked {
	background-color: var(--brand-teal);
	border-color: var(--brand-teal);
}
.form-check-letsgo:focus {
	border-color: var(--brand-teal);
	box-shadow: 0 0 0 0.25rem rgba(var(--brand-teal-rgb), 0.25);
}

/* Fallback — iOS 10 / Android 7 不支援 accent-color；
 * 這些舊瀏覽器同時可能不完整支援 BS5 form-check 的 appearance:none，
 * 因此這裡用較保守的色彩 + 內嵌 BS5 預設勾勾 SVG，確保視覺一致。 */
@supports not (accent-color: auto) {
	.form-check-letsgo:not(:checked) {
		border: 1px solid #6c757d;
		background-color: #fff;
	}
	.form-check-letsgo:checked {
		background-color: var(--brand-teal);
		border-color: var(--brand-teal);
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
	}
	/* radio 專屬：checkbox 用勾、radio 應為實心圓點。覆蓋上面繼承來的勾勾 SVG。
	 * （[type=radio] + 雙 class specificity 高於上面 .form-check-letsgo:checked） */
	.form-check-input[type="radio"].form-check-letsgo:checked {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
	}
}
/* === END .form-check-letsgo === */

/* --- payments 待繳帳單 checkbox */
.list_payment input[name="checkPayment"] {
	pointer-events: none;
}

/* --- messages 訊息列表（編輯模式）checkbox */
.list_message input[name="checkItem"] {
	pointer-events: none;
}

/* --- list-group-item padding：BS5 縮為 .5rem 1rem，還原 BS4 的 .75rem 1.25rem（列高對齊舊版） --- */
.list-group-item {
	padding: 0.75rem 1.25rem;
}

/* --- list-group 變數作用域：BS5 把 .list-group-item 的 border 改吃 .list-group 提供的
 * --bs-list-group-* 變數（BS4 為硬編碼）。modal 版的 #detail 宿主沒有 .list-group
 * （webview 版的 #detail 才有），變數缺失使 border shorthand 失效、border-style 變 none，
 * 分期清單的分隔線因此消失。此處補回 border 兩個變數，讓 project.css 的
 * .list-group-item-noborder 仍能如舊版只留 border-bottom。--- */
#detail[data-webview="false"] {
	--bs-list-group-border-width: var(--bs-border-width);
	--bs-list-group-border-color: var(--bs-border-color);
}