/*
 * Bootstrap 3 markup compatibility when using Bootstrap 5 core CSS.
 * Keeps legacy class names working until markup is migrated to cards / btn-secondary / btn-close.
 */

/* --- Collapse: BS3 used .in, BS5 uses .show --- */
.collapse.in:not(.show) {
	display: block;
	height: auto;
	overflow: visible;
}

/* --- Panels (removed from BS5 core) --- */
.panel {
	margin-bottom: 1rem;
	background-color: var(--bs-body-bg, #fff);
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: var(--bs-border-radius, 0.375rem);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
	padding: 1rem 1.25rem;
}
.panel-heading {
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid transparent;
	border-top-left-radius: calc(var(--bs-border-radius, 0.375rem) - 1px);
	border-top-right-radius: calc(var(--bs-border-radius, 0.375rem) - 1px);
	font-weight: 600;
}
.panel-footer {
	padding: 0.75rem 1.25rem;
	border-top: 1px solid rgba(0, 0, 0, 0.125);
	background-color: rgba(0, 0, 0, 0.03);
	border-bottom-right-radius: var(--bs-border-radius, 0.375rem);
	border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
}
.panel-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1rem;
}

.panel-default {
	border-color: var(--bs-border-color, #dee2e6);
}
.panel-default > .panel-heading {
	color: var(--bs-body-color, #333);
	background-color: var(--bs-tertiary-bg, #f8f9fa);
	border-color: var(--bs-border-color, #dee2e6);
}

.panel-primary > .panel-heading {
	color: #fff;
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

.panel-success > .panel-heading {
	color: #fff;
	background-color: var(--bs-success);
	border-color: var(--bs-success);
}
.panel-info > .panel-heading {
	color: #fff;
	background-color: var(--bs-info);
	border-color: var(--bs-info);
}
.panel-warning > .panel-heading {
	color: var(--bs-body-color, #333);
	background-color: var(--bs-warning);
	border-color: var(--bs-warning);
}
.panel-danger > .panel-heading {
	color: #fff;
	background-color: var(--bs-danger);
	border-color: var(--bs-danger);
}

.panel-group {
	margin-bottom: 1rem;
}
.panel-group .panel {
	margin-bottom: 0;
	border-radius: 0;
}
.panel-group .panel + .panel {
	margin-top: 5px;
}
.panel-group .panel:first-child {
	border-top-left-radius: var(--bs-border-radius, 0.375rem);
	border-top-right-radius: var(--bs-border-radius, 0.375rem);
}
.panel-group .panel:last-child {
	border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
	border-bottom-right-radius: var(--bs-border-radius, 0.375rem);
}

.panel-collapse {
	width: 100%;
}

/* --- Buttons: .btn-default removed in BS5 --- */
.btn.btn-default {
	--bs-btn-color: #333;
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #ccc;
	--bs-btn-hover-color: #333;
	--bs-btn-hover-bg: #e6e6e6;
	--bs-btn-hover-border-color: #adadad;
	--bs-btn-focus-shadow-rgb: 130, 138, 145;
	--bs-btn-active-color: #333;
	--bs-btn-active-bg: #e6e6e6;
	--bs-btn-active-border-color: #adadad;
}

/* --- Modal header legacy .close (BS5 prefers .btn-close) ---
   BS3 常見 DOM：先 button.close、後 .modal-title（靠 float:right 視覺上關閉在右）。
   BS5 的 .modal-header 為 flex，float 無效；若 .close 含 margin-left:auto 且為第一個子元素，會把關閉鈕與標題整段擠到右側。
   以下用 :has() 僅針對仍使用 .close（非 .btn-close）的 header 校正 order 與 margin。 */
.modal-header:has(> .close:not(.btn-close)) {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}
.modal-header:has(> .close:not(.btn-close)) .modal-title {
	order: 1;
	margin-bottom: 0;
	margin-right: auto;
}
/* 標題在左；若有縮小鈕 (.modalMinimize) 則順序為「縮小」在左、「關閉 X」在最右 */
.modal-header .close:not(.btn-close).modalMinimize {
	float: none !important;
	order: 3;
	padding: 0.5rem;
	margin: -0.5rem 0 -0.5rem 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--bs-body-color, #000);
	text-shadow: 0 1px 0 #fff;
	opacity: 0.5;
	background-color: transparent;
	border: 0;
	cursor: pointer;
}
.modal-header .close:not(.btn-close):not(.modalMinimize) {
	float: none !important;
	order: 4;
	padding: 0.5rem;
	margin: -0.5rem -0.5rem -0.5rem 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--bs-body-color, #000);
	text-shadow: 0 1px 0 #fff;
	opacity: 0.5;
	background-color: transparent;
	border: 0;
	cursor: pointer;
}
.modal-header .close:not(.btn-close):hover,
.modal-header .close:not(.btn-close):focus {
	opacity: 0.75;
	text-decoration: none;
}
.modal-header .close:not(.btn-close):not(:disabled):not(.disabled):hover,
.modal-header .close:not(.btn-close):not(:disabled):not(.disabled):focus {
	opacity: 0.75;
}

/* --- Float helpers removed in BS5 --- */
.pull-left {
	float: left !important;
}
.pull-right {
	float: right !important;
}

/* --- Tab panes: BS3 used .fade.in, BS5 uses .fade.show — fallback if legacy markup remains --- */
.tab-pane.fade.in:not(.show) {
	opacity: 1;
}

/* --- Forms: BS3 .form-group / .form-horizontal (dropped in BS5) — restore horizontal表單排版 --- */
.form-group {
	margin-bottom: 1rem;
}

@media (min-width: 576px) {
	.form-horizontal .form-group {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		--bs-gutter-x: 0.75rem;
	}
	.form-horizontal .form-group .control-label {
		padding-top: calc(0.375rem + 1px);
		margin-bottom: 0;
	}
	.form-horizontal .form-group > [class*="col-"] {
		padding-left: calc(var(--bs-gutter-x) * 0.5);
		padding-right: calc(var(--bs-gutter-x) * 0.5);
	}
	.form-horizontal .form-group .control-label.text-start,
	.form-horizontal .form-group .control-label.text-left {
		text-align: left !important;
	}
	.form-horizontal .form-group .control-label:not(.text-start):not(.text-left) {
		text-align: right;
	}
}

/* BS3 .input-group-addon：BS5 已改為 .input-group-text，舊 markup 補上外觀與 flex 才不會與輸入框重疊 */
.input-group > .input-group-addon {
	display: flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color, #212529);
	text-align: center;
	white-space: nowrap;
	background-color: var(--bs-tertiary-bg, #f8f9fa);
	border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
	border-radius: var(--bs-border-radius, 0.375rem);
	flex-shrink: 0;
}
.input-group > .input-group-addon:first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.input-group > .input-group-addon + .form-control,
.input-group > .input-group-addon + .form-select {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
}

/* --- Nav tabs: 舊版 <ul class="nav nav-tabs"><li class="active"><a>（無 .nav-item / .nav-link）--- */
.nav.nav-tabs {
	border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}
.nav.nav-tabs > li {
	margin-bottom: calc(-1 * var(--bs-border-width));
}
.nav.nav-tabs > li > a {
	display: block;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-nav-link-color, var(--bs-primary));
	text-decoration: none;
	background: none;
	border: var(--bs-border-width) solid transparent;
	border-top-left-radius: var(--bs-border-radius);
	border-top-right-radius: var(--bs-border-radius);
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.nav.nav-tabs > li > a:hover,
.nav.nav-tabs > li > a:focus {
	color: var(--bs-link-hover-color, var(--bs-primary));
	border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
	isolation: isolate;
}
.nav.nav-tabs > li.active > a,
.nav.nav-tabs > li > a.active,
.nav.nav-tabs > li.show > a {
	color: var(--bs-nav-tabs-link-active-color, var(--bs-body-color));
	background-color: var(--bs-nav-tabs-link-active-bg, var(--bs-body-bg));
	border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg, #fff);
}

/* --- Radio / checkbox 外層 .radio / .checkbox（BS3）--- */
.radio,
.checkbox {
	position: relative;
	display: block;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
.radio:first-child,
.checkbox:first-child {
	margin-top: 0;
}
.radio label,
.checkbox label {
	min-height: 1.25rem;
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}