:root {
	--app-bg: #f4f6f8;
	--app-panel: #ffffff;
	--app-border: #e4e7ec;
	--app-border-soft: #edf0f4;

	--app-text-main: #1d2736;
	--app-text-strong: #101828;
	--app-text-sub: #657285;
	--app-text-muted: #8a94a4;

	--app-primary: #26304A;
	--app-primary-hover: #1f273d;
	--app-primary-active: #182033;

	--app-success: #2F7D57;
	--app-danger: #9B3A32;
	--app-warning: #B7791F;
	--app-info: #315f97;

	--app-radius-sm: 10px;
	--app-radius-md: 14px;
	--app-radius-lg: 18px;

	--app-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.04);
	--app-shadow-md: 0 14px 34px rgba(31, 42, 68, 0.08);

	--brand-primary: #E50014;
	--brand-primary-dark: #900000;
	--brand-accent: #EB6D56;
}

body {
	background: var(--app-surface);
}

html,
body,
.wrapper,
.main-header,
.main-header-logo,
.main-panel {
	background-color: #f4f6f8 !important;
}

html.nav_open,
html.nav_open body,
html.nav_open .wrapper {
	background-color: #f4f6f8 !important;
}

html.nav_open .main-header,
html.nav_open .main-header-logo,
html.nav_open .logo-header,
html.nav_open .navbar-header {
	background-color: #f4f6f8 !important;
}

@media screen and (max-width: 991.5px) {

	.main-header,
	.main-header .main-header-logo,
	.main-header .logo-header,
	.main-header .navbar-header {
		background-color: #f4f6f8 !important;
	}

	.nav_open .main-header,
	.nav_open .main-header-logo,
	.nav_open .logo-header,
	.nav_open .navbar-header {
		background-color: #f4f6f8 !important;
	}
}

.main-panel,
.container,
.page-inner {
	background: transparent;
}

.app-home-page {
	padding-top: 20px;
	padding-bottom: 24px;
}

.app-topbar {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
}

.topbar-title-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.topbar-caption {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--app-text-soft);
	font-weight: 700;
}

.topbar-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--app-text-main);
}

.app-avatar-circle,
.app-avatar-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #e9eff6;
	color: var(--app-primary);
	font-weight: 700;
	border-radius: 50%;
}

.app-avatar-box {
	width: 48px;
	height: 48px;
	font-size: 1.15rem;
	border-radius: 14px;
}

.app-user-box {
	align-items: center;
	gap: 14px;
}

.app-sidebar {
	background: linear-gradient(180deg, #1a2430 0%, #121a24 100%) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.app-sidebar .logo-header,
.app-sidebar-logo {
	background: transparent !important;
}

.app-sidebar .sidebar-content {
	padding: 12px 14px 20px;
}

.app-sidebar-section+.app-sidebar-section {
	margin-top: 18px;
}

.app-sidebar-label {
	padding: 6px 12px 10px;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(202, 215, 229, 0.58);
	font-weight: 700;
}

.app-sidebar .nav-item>a,
.app-sidebar .nav-collapse li a {
	border-radius: 12px;
}

.app-sidebar .nav-secondary>.nav-item>a {
	color: rgba(234, 241, 248, 0.84) !important;
	padding: 12px 14px;
}

.app-sidebar .nav-secondary>.nav-item>a i {
	color: rgba(173, 197, 221, 0.84) !important;
}

.app-sidebar .nav-secondary>.nav-item.active>a,
.app-sidebar .nav-secondary>.nav-item>a:hover {
	background: rgba(68, 108, 156, 0.18) !important;
	color: #ffffff !important;
}

.app-sidebar .nav-secondary>.nav-item.active>a i,
.app-sidebar .nav-secondary>.nav-item>a:hover i {
	color: #cfe0f3 !important;
}

.app-sidebar .nav-collapse li a .sub-item {
	color: rgba(225, 234, 244, 0.78);
}

.home-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.95fr);
	gap: 20px;
}

.home-hero-main,
.home-hero-side,
.info-card,
.shortcut-card {
	border: 1px solid var(--app-border);
	background: var(--app-panel);
	box-shadow: var(--app-shadow-sm);
}

.home-hero-main {
	border-radius: 22px;
	padding: 32px;
	background: linear-gradient(135deg, #ffffff 0%, #f6f9fc 100%);
}

.home-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: #edf3f9;
	color: var(--app-primary);
	font-size: 0.8rem;
	font-weight: 700;
	margin-bottom: 16px;
}

.home-title {
	margin: 0 0 14px;
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--app-text-main);
	max-width: 760px;
}

.home-desc {
	max-width: 760px;
	margin: 0;
	color: var(--app-text-sub);
	font-size: 1rem;
	line-height: 1.85;
}

.home-actions {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.app-home-btn,
.app-home-btn-secondary {
	min-height: 46px;
	padding: 0 18px;
	border-radius: 12px;
	font-weight: 600;
}

.home-hero-side {
	border-radius: 22px;
	padding: 24px;
}

.status-panel-head,
.info-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.status-panel-head h3,
.info-card-head h3 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--app-text-main);
}

.status-panel-head span,
.info-card-head span {
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--app-text-soft);
	font-weight: 700;
}

.status-list {
	display: grid;
	gap: 14px;
}

.status-item {
	border: 1px solid #e5ebf1;
	border-radius: 16px;
	padding: 14px 16px;
	background: #fbfcfd;
}

.status-label {
	display: block;
	font-size: 0.84rem;
	color: var(--app-text-soft);
	margin-bottom: 6px;
}

.status-item strong {
	display: block;
	color: var(--app-text-main);
	line-height: 1.55;
}

.home-shortcuts,
.home-support-grid {
	margin-top: 0;
}

.shortcut-card {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 150px;
	text-decoration: none;
	border-radius: 20px;
	padding: 22px 24px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.shortcut-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--app-shadow-md);
	border-color: var(--app-border-strong);
}

.shortcut-card-primary {
	background: linear-gradient(135deg, #315f97 0%, #274c79 100%);
	border-color: transparent;
}

.shortcut-card-primary .shortcut-body h3,
.shortcut-card-primary .shortcut-body p,
.shortcut-card-primary .shortcut-icon,
.shortcut-card-primary .shortcut-arrow {
	color: #ffffff;
}

.shortcut-card-light {
	color: inherit;
}

.shortcut-icon {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #eef3f8;
	color: var(--app-primary);
	font-size: 1.2rem;
}

.shortcut-card-primary .shortcut-icon {
	background: rgba(255, 255, 255, 0.18);
}

.shortcut-body {
	flex: 1;
}

.shortcut-body h3 {
	margin: 0 0 8px;
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--app-text-main);
}

.shortcut-body p {
	margin: 0;
	color: var(--app-text-sub);
	line-height: 1.75;
}

.shortcut-arrow {
	color: #7a8796;
	font-size: 1rem;
}

.info-card {
	border-radius: 20px;
	padding: 24px;
	min-height: 100%;
}

.support-link-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.guide-list {
	padding-left: 18px;
	color: var(--app-text-sub);
	line-height: 1.85;
}

.guide-list li+li {
	margin-top: 10px;
}

.footer {
	background: transparent;
}

.footer .container-fluid {
	border-top: 1px solid #e2e8ef;
	padding-top: 18px;
	padding-bottom: 10px;
}

@media (max-width: 1199.98px) {
	.home-hero {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767.98px) {

	.home-hero-main,
	.home-hero-side,
	.info-card,
	.shortcut-card {
		border-radius: 18px;
	}

	.home-hero-main,
	.home-hero-side,
	.info-card {
		padding: 22px;
	}

	.shortcut-card {
		padding: 18px 18px;
		min-height: auto;
	}

	.home-title {
		font-size: 1.75rem;
	}

	.home-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.app-home-btn,
	.app-home-btn-secondary {
		width: 100%;
	}
}

.logo-header .nav-toggle .btn-toggle.toggle-sidebar {
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	position: relative;
	border-radius: 10px;
}

.logo-header .nav-toggle .btn-toggle.toggle-sidebar i {
	pointer-events: none;
}

.logo-header .nav-toggle .btn-toggle.sidenav-toggler {
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	position: relative;
	border-radius: 10px;
}

.logo-header .nav-toggle .btn-toggle.sidenav-toggler i {
	pointer-events: none;
}

@media (min-width: 992px) {
	.logo-header .nav-toggle .btn-toggle.toggle-sidebar {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}

	.logo-header .nav-toggle .btn-toggle.sidenav-toggler {
		display: none !important;
	}
}

@media (max-width: 991.98px) {
	.logo-header .nav-toggle .btn-toggle.toggle-sidebar {
		display: none !important;
	}

	.logo-header .nav-toggle .btn-toggle.sidenav-toggler {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
}

.logo-header .nav-toggle .btn-toggle.toggle-sidebar .gg-menu-right {
	pointer-events: none;
}

.navbar .navbar-nav .topbar-icon .nav-link {
	width: 44px;
}

.animated {
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

body.page-loading {
	overflow: hidden;
}

#pageLoading {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(17, 25, 40, 0.45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease, visibility .25s ease;
}

#pageLoading.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.loading-card {
	padding: 20px 24px;
	border-radius: 16px;
	text-align: center;
}

.loading-text {
	margin-top: 12px;
	font-size: 14px;
	color: #495057;
	letter-spacing: .3px;
}

.app-footer {
	border-top: 1px solid #e5e9f0;
	background: #ffffff;
	margin-top: 24px;
	padding: 0 20px;
}

.app-footer-inner {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 0;
}

.app-footer-left {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.app-footer-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 0.92rem;
	color: #4b5563;
}

.app-footer-copy {
	color: #6b7280;
}

.app-footer-company {
	color: #374151;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.app-footer-company:hover {
	color: #315f97;
	text-decoration: none;
}

.app-footer-note {
	font-size: 0.82rem;
	color: #9aa4b2;
	letter-spacing: 0.01em;
}

.app-footer-right {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.app-footer-link {
	position: relative;
	color: #667085;
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.2s ease;
}

.app-footer-link:hover {
	color: #315f97;
	text-decoration: none;
}

.app-footer-link+.app-footer-link::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 12px;
	background: #d8dee8;
}

@media (max-width: 768px) {
	.app-footer {
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: max(12px, env(safe-area-inset-bottom));
		margin-top: 0;
	}

	.app-footer-inner {
		align-items: flex-start;
		flex-direction: column;
		padding: 16px 0;
	}

	.app-footer-right {
		gap: 14px;
	}
}

.home-ops-panel {
	padding-bottom: 28px;
}

.home-title {
	font-size: clamp(1.65rem, 2.4vw, 2.15rem);
	max-width: none;
}

.home-desc {
	max-width: none;
}

.home-stats {
	margin-top: 22px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.home-stat-card {
	border: 1px solid #e5ebf1;
	border-radius: 18px;
	padding: 18px 18px 16px;
	background: #fbfcfd;
}

.home-stat-card.is-positive {
	background: linear-gradient(180deg, #f7fbf8 0%, #ffffff 100%);
	border-color: #d9e9df;
}

.home-stat-card.is-pending {
	background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
	border-color: #ecdcca;
}

.home-stat-label {
	display: block;
	font-size: 0.84rem;
	color: var(--app-text-soft);
	margin-bottom: 10px;
}

.home-stat-value {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 8px;
	color: var(--app-text-main);
}

.home-stat-value strong {
	font-size: 2rem;
	line-height: 1;
	font-weight: 700;
	color: var(--app-text-main);
}

.home-stat-value span {
	font-size: 0.95rem;
	color: var(--app-text-sub);
}

.home-stat-note {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--app-text-sub);
}

.home-quick-grid .info-card,
.home-support-grid .info-card {
	min-height: 100%;
}

.quick-link-card {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.quick-link-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--app-shadow-md);
	border-color: var(--app-border-strong);
	text-decoration: none;
	color: inherit;
}

.info-card-body {
	color: var(--app-text-sub);
	line-height: 1.8;
}

.manual-actions {
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.manual-meta {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #e8edf3;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.manual-meta-item span {
	display: block;
	font-size: 0.82rem;
	color: var(--app-text-soft);
	margin-bottom: 6px;
}

.manual-meta-item strong {
	display: block;
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--app-text-main);
}

.support-qrcode-card {
	text-decoration: none;
	color: inherit;
}

.support-card-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 100%;
}

.support-card-text {
	flex: 1;
	min-width: 0;
}

.support-card-hint {
	margin-top: 10px;
	font-size: 0.85rem;
	color: var(--app-text-soft);
	line-height: 1.6;
}

.support-qrcode-wrap {
	flex: 0 0 112px;
	width: 112px;
	height: 112px;
	border-radius: 16px;
	background: #ffffff;
	border: 1px solid #e4eaf1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.support-qrcode-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 8px;
}

@media (max-width: 767.98px) {
	.support-card-content {
		flex-direction: column;
		align-items: flex-start;
	}

	.support-qrcode-wrap {
		width: 96px;
		height: 96px;
	}

	.home-sub-actions {
		gap: 12px;
		flex-direction: column;
		align-items: flex-start;
	}

	.home-stats {
		grid-template-columns: 1fr;
	}

	.manual-meta {
		grid-template-columns: 1fr;
	}
}

.home-sub-actions {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.home-text-action {
	display: inline-flex;
	align-items: center;
	color: var(--app-text-sub);
	font-size: 0.92rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.18s ease;
}

.home-text-action:hover {
	color: var(--app-primary);
	text-decoration: none;
}

.sidebar .nav-section-label {
	margin: 16px 18px 6px;
	padding-top: 12px;
	border-top: 1px solid #edf0f4;
	list-style: none;
}

.sidebar .nav-section-label:first-child {
	margin-top: 6px;
	padding-top: 0;
	border-top: 0;
}

.sidebar .nav-section-label span {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #9aa4b2;
}

.sidebar .nav-section-label.platform-section span {
	color: var(--brand-primary-dark) !important;
}

.sidebar .nav-primary-action>a {
	background: #f3f7fb;
	border: 1px solid #e4ebf3;
	border-radius: 8px;
}

.sidebar .nav-primary-action>a i {
	color: #315f97 !important;
}

.sidebar .nav-primary-action.active>a,
.sidebar .nav-primary-action>a:hover {
	background: #eaf2fb !important;
}

@media screen and (min-width: 992px) {
	.sidebar_minimize:not(.sidebar_minimize_hover) .sidebar .nav-section-label {
		display: none !important;
	}

	.sidebar_minimize.sidebar_minimize_hover .sidebar .nav-section-label {
		display: list-item !important;
	}
}

.logo-header .topbar-toggler.more {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	padding: 0 !important;
	border: 0;
	border-radius: 10px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
}

.logo-header .topbar-toggler.more i {
	pointer-events: none;
}

.logo-header .topbar-toggler.more:hover {
	background: rgba(49, 95, 151, 0.08);
}

.page-mobile-title {
	padding: 0px 18px 16px;
}

.page-mobile-title span {
	display: block;
	margin-bottom: 6px;
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	color: #8a94a4;
	font-weight: 700;
}

.page-mobile-title h1 {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.4;
	font-weight: 700;
	color: #1d2736;
	text-align: center;
}

.sidebar .nav.nav-secondary>.nav-item.active a i,
.sidebar[data-background-color=white] .nav.nav-secondary>.nav-item.active a i {
	color: var(--brand-primary) !important;
}

.sidebar .nav.nav-secondary>.nav-item.active a:before,
.sidebar[data-background-color=white] .nav.nav-secondary>.nav-item.active a:before {
	background: var(--brand-primary) !important;
}

.sidebar .nav.nav-secondary>.nav-item a:focus i,
.sidebar .nav.nav-secondary>.nav-item a:hover i,
.sidebar .nav.nav-secondary>.nav-item a[data-toggle=collapse][aria-expanded=true] i,
.sidebar[data-background-color=white] .nav.nav-secondary>.nav-item a:focus i,
.sidebar[data-background-color=white] .nav.nav-secondary>.nav-item a:hover i,
.sidebar[data-background-color=white] .nav.nav-secondary>.nav-item a[data-toggle=collapse][aria-expanded=true] i {
	color: var(--brand-accent) !important;
}

.sidebar[data-background-color="white"] .nav.nav-secondary>.nav-item>a {
	position: relative;
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.sidebar[data-background-color="white"] .nav.nav-secondary>.nav-item>a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0px;
	bottom: 0px;
	width: 3px;
	border-radius: 0 999px 999px 0;
	background: var(--brand-primary);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform .2s ease;
}

.sidebar[data-background-color="white"] .nav.nav-secondary>.nav-item>a:hover {
	background: rgba(229, 0, 20, 0.12) !important;
	color: var(--brand-primary) !important;
}

.sidebar[data-background-color="white"] .nav.nav-secondary>.nav-item>a:hover::before {
	transform: scaleY(1);
}

.app-page {
	padding-top: 20px;
	padding-bottom: 28px;
}

.page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.page-kicker {
	margin-bottom: 6px;
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--app-text-soft, #8a94a4);
	font-weight: 700;
}

.page-title {
	margin: 0;
	font-size: 1.7rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--app-text-main, #1d2736);
}

.page-desc {
	margin: 8px 0 0;
	color: var(--app-text-sub, #657285);
	line-height: 1.7;
}

.page-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.app-main-btn {
	min-height: 42px;
	padding: 0 16px;
	font-weight: 600;
	border-radius: 10px
}

.custom-summary-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 16px;
}

.summary-card {
	border: 1px solid #e5ebf1;
	border-radius: 16px;
	background: #ffffff;
	padding: 16px 18px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.summary-label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.82rem;
	color: #7a8796;
	font-weight: 600;
}

.summary-card strong {
	display: block;
	margin-bottom: 6px;
	font-size: 1.8rem;
	line-height: 1;
	font-weight: 700;
	color: #1d2736;
}

.summary-card small {
	display: block;
	color: #8a94a4;
	line-height: 1.5;
}

.summary-card.is-warning {
	background: #fffaf5;
	border-color: #ecdcca;
}

.content-card {
	border: 1px solid #e5ebf1;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.custom-filter-card {
	padding: 18px;
	margin-bottom: 16px;
}

.filter-row {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	flex-wrap: wrap;
}

.filter-field {
	flex: 0 0 180px;
}

.filter-keyword {
	flex: 1 1 300px;
}

.filter-field .form-label {
	margin-bottom: 6px;
	font-size: 0.84rem;
	color: #657285;
	font-weight: 600;
}

.filter-actions {
	display: flex;
	gap: 5px;
	margin-left: auto;
}

.filter-actions .btn {
	border-radius: 9px;
	padding-left: 16px;
	padding-right: 16px;
	font-weight: 600;
}

.filter-actions .btn-sm {
	padding-left: 8px;
	padding-right: 8px;
	min-height: 20px;
}

.table-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	border-bottom: 1px solid #edf0f4;
}

.table-card-head h2 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1d2736;
}

.table-card-head p {
	margin: 6px 0 0;
	color: #8a94a4;
	font-size: 0.9rem;
}

.app-table {
	font-size: 0.92rem;
}

.app-table thead th {
	background: #f8fafc;
	color: #657285;
	font-size: 0.82rem;
	font-weight: 700;
	border-bottom: 1px solid #e5ebf1;
	white-space: nowrap;
}

.app-table tbody td {
	color: #344054;
	border-color: #edf0f4;
	vertical-align: middle;
}

.status-pill,
.mode-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	border: 1px solid transparent;
}

.status-pill.is-active {
	background: #eef8f2;
	color: #2f7d4f;
	border-color: #d8ecdf;
}

.status-pill.is-disabled {
	background: #f4f5f7;
	color: #7a8796;
	border-color: #e4e7ec;
}

.mode-pill.is-contract {
	background: rgba(229, 0, 20, 0.07);
	color: var(--brand-primary, #E50014);
	border-color: rgba(229, 0, 20, 0.14);
}

.mode-pill.is-trial {
	background: #fff7e8;
	color: #9a650f;
	border-color: #f3dfb8;
}

.row-actions {
	display: inline-flex;
	justify-content: flex-end;
	gap: 8px;
}

.row-actions .btn {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 1199.98px) {
	.custom-summary-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.page-head {
		flex-direction: column;
		align-items: stretch;
	}

	.page-actions {
		width: 100%;
	}

	.page-actions .btn {
		width: 100%;
	}

	.custom-summary-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.filter-row {
		align-items: stretch;
	}

	.filter-field,
	.filter-keyword {
		flex: 1 1 100%;
	}

	.filter-actions {
		width: 100%;
		margin-left: 0;
	}

	.filter-actions .btn {
		flex: 1;
	}
}

.custom-grid-wrap {
	padding: 0;
}

.custom-grid {
	width: 100%;
	min-height: 180px;
	--ag-wrapper-border-radius: 0;
}

.custom-table-card {
	overflow: hidden;
}

.custom-table-card .ag-theme-quartz {
	--ag-font-family: "Public Sans", "Noto Sans TC", Arial, sans-serif;
	--ag-font-size: 14px;
	--ag-header-background-color: #f8fafc;
	--ag-header-foreground-color: #657285;
	--ag-border-color: #edf0f4;
	--ag-row-hover-color: rgba(229, 0, 20, 0.035);
	--ag-selected-row-background-color: rgba(229, 0, 20, 0.06);
	--ag-wrapper-border-radius: 0;
}

.custom-table-card .ag-header-cell-label {
	font-weight: 700;
}

.custom-drawer {
	width: min(520px, 100vw);
}

.custom-drawer .offcanvas-header {
	border-bottom: 1px solid #edf0f4;
	padding: 20px 22px;
}

.custom-drawer .offcanvas-body {
	padding: 22px;
}

.drawer-kicker {
	margin-bottom: 4px;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8a94a4;
	font-weight: 700;
}

.drawer-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid #edf0f4;
}

.drawer-actions .btn {
	min-width: 88px;
	border-radius: 9px;
	font-weight: 600;
}

@media (max-width: 767.98px) {
	
	.custom-grid {
		height: auto;
	}

	.drawer-actions {
		flex-direction: column-reverse;
	}

	.drawer-actions .btn {
		width: 100%;
	}
}

.custom-table-card .ag-cell.action-cell {
	display: flex;
}

.grid-actions {
	width: 100%;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

.grid-action-btn {
	--action-color: #667085;
	--action-bg-hover: #f8fafc;
	--action-border-hover: #d0d5dd;

	width: 32px;
	height: 32px;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	background: #ffffff;
	color: #667085;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;

	cursor: pointer;
	transition:
		background-color .16s ease,
		border-color .16s ease,
		color .16s ease,
		box-shadow .16s ease,
		transform .16s ease;
}

.grid-action-btn i {
	font-size: 0.82rem;
	pointer-events: none;
}

.grid-action-btn:hover {
	color: var(--action-color);
	background: var(--action-bg-hover);
	border-color: var(--action-border-hover);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

.grid-action-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.grid-action-btn:focus {
	outline: none;
}

.grid-action-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.10);
}

.grid-action-btn.is-edit {
	--action-color: var(--brand-primary, #E50014);
	--action-bg-hover: rgba(229, 0, 20, 0.06);
	--action-border-hover: rgba(229, 0, 20, 0.22);
}

.grid-action-btn.is-site {
	--action-color: #315f97;
	--action-bg-hover: #f3f7fb;
	--action-border-hover: #dbe8f3;
}

.grid-action-btn.is-transfer {
	--action-color: #6B4E2E;
	--action-bg-hover: #F7F4EF;
	--action-border-hover: #E6D8C8;
}

.grid-action-btn.is-qr {
	--action-color: #2563eb;
	--action-bg-hover: #eff6ff;
	--action-border-hover: #bfdbfe;
}

.grid-action-btn:disabled,
.grid-action-btn.is-disabled {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
	transform: none;
}

.grid-action-btn.is-abnormal {
	--action-color: #9A3412;
	--action-bg-hover: #FFF7ED;
	--action-border-hover: #FED7AA;
}

.inspection-template-box {
	display: grid;
	gap: 10px;
	padding: 12px;
	border: 1px solid #e5ebf1;
	border-radius: 12px;
	background: #f8fafc;
	max-height: 220px;
	overflow-y: auto;
}

.inspection-template-option {
	position: relative;
}

.inspection-template-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.inspection-template-option label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	background: #ffffff;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.inspection-template-option label {
	align-items: center;
}

.inspection-template-option label::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 0;
	border-radius: 9px;
	border: 1px solid #cfd6df;
	background: #ffffff;
}

.inspection-template-option input:checked+label {
	background: rgba(229, 0, 20, 0.045);
	border-color: rgba(229, 0, 20, 0.22);
	box-shadow: 0 6px 16px rgba(229, 0, 20, 0.06);
}

.inspection-template-option input:checked+label::before {
	background: var(--brand-primary, #E50014);
	border-color: var(--brand-primary, #E50014);
	box-shadow: inset 0 0 0 4px #ffffff;
}

.inspection-template-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.inspection-template-name {
	font-weight: 700;
	color: #1d2736;
	line-height: 1.3;
}

.inspection-template-desc {
	font-size: 0.82rem;
	color: #7a8796;
	line-height: 1.4;
}

.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-dark,
.btn-primary {
	border-radius: 10px;
}

.app-main-btn {
	background: #404b72 !important;
	border-color: #404b72 !important;
	color: #ffffff !important;
	box-shadow: 0 8px 18px rgba(26, 32, 53, 0.16);
}

.app-main-btn:hover,
.app-main-btn:focus {
	background: #53639B !important;
	border-color: #53639B !important;
	color: #ffffff !important;
	box-shadow: 0 10px 22px rgba(95, 111, 168, 0.30);
	transform: translateY(-1px);
}

.app-main-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 .18rem rgba(95, 111, 168, 0.24), 0 10px 22px rgba(95, 111, 168, 0.26);
}

.app-main-btn:active,
.app-main-btn.active,
.show>.app-main-btn.dropdown-toggle {
	background: #48588D !important;
	border-color: #48588D !important;
	color: #ffffff !important;
	transform: translateY(0);
	box-shadow: 0 5px 12px rgba(95, 111, 168, 0.22);
}

.app-main-btn:disabled,
.app-main-btn.disabled {
	background: #AEB7D8 !important;
	border-color: #AEB7D8 !important;
	color: #ffffff !important;
	box-shadow: none;
	transform: none;
	opacity: .75;
}

.app-transfer-panel {
	border: 0;
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(20, 28, 45, 0.22);
	overflow: hidden;
}

.app-transfer-panel .modal-header {
	border-bottom: 1px solid #edf0f4;
	padding: 20px 22px 16px;
}

.app-transfer-panel .modal-body {
	padding: 20px 22px;
}

.app-transfer-panel .modal-footer {
	border-top: 1px solid #edf0f4;
	padding: 16px 22px 20px;
}

.transfer-subtitle {
	margin-top: 4px;
	font-size: 13px;
	color: #7b8494;
}

.transfer-summary {
	padding: 14px 16px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: #F7F4EF;
	border: 1px solid #E8DED2;
}

.transfer-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	font-size: 14px;
}

.transfer-summary-row span {
	color: #7A6D5F;
}

.transfer-summary-row strong {
	color: #26304A;
	font-weight: 700;
	text-align: right;
}

.app-main-btn a {
	color: white;
}

.app-main-btn:hover,
.app-main-btn:focus {
	background: #1f2740 !important;
	border-color: #1f2740 !important;
	color: #ffffff !important;
	box-shadow: 0 10px 22px rgba(26, 32, 53, 0.22);
	transform: translateY(-1px);
}

.app-main-btn:active {
	background: #1a2035 !important;
	border-color: #1a2035 !important;
	transform: translateY(0);
	box-shadow: 0 5px 12px rgba(26, 32, 53, 0.18);
}

.app-main-btn i {
	color: #ffffff !important;
}

@supports (scrollbar-gutter: stable) {
	html {
		scrollbar-gutter: stable;
	}
}

.form-template-drawer {
	width: min(1200px, 100vw) !important;
}

.form-section {
	padding: 16px 0;
	border-bottom: 1px solid #edf0f4;
}

.form-section:first-of-type {
	padding-top: 0;
}

.form-section:last-of-type {
	border-bottom: 0;
}

.form-section-title {
	margin: 0 0 14px;
	font-size: 0.95rem;
	font-weight: 700;
	/* 原為寫死的 #1d2736，在深色模式下與底色相同而看不見。
	   改用主題變數：淺色模式仍是 #1d2736，深色模式自動轉為淺字。 */
	color: var(--app-text-main);
}

.category-mode-row {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.category-mode-option {
	flex: 1;
}

.question-card {
	position: relative;
	padding: 14px;
	margin-bottom: 12px;
	border: 1px solid #e4e7ec;
	border-radius: 14px;
	background: #ffffff;
}

.question-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.question-card-title {
	font-weight: 700;
	color: #1d2736;
}

.question-remove-btn {
	border: 0;
	background: #f4f5f7;
	color: #667085;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.question-remove-btn:hover {
	background: rgba(229, 0, 20, 0.08);
	color: var(--brand-primary, #E50014);
}

.question-flags {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.question-flag {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.86rem;
	color: #344054;
}

.add-question-btn {
	width: 100%;
	min-height: 42px;
	border: 1px dashed #cfd6df;
	border-radius: 12px;
	background: #fbfcfe;
	color: #344054;
	font-weight: 700;
}

.add-question-btn:hover {
	background: rgba(229, 0, 20, 0.04);
	border-color: rgba(229, 0, 20, 0.24);
	color: var(--brand-primary, #E50014);
}

@media (max-width: 767.98px) {
	.question-flags {
		grid-template-columns: 1fr;
	}
}

.coming-soon-card {
	min-height: 360px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 48px 24px;
}

.coming-soon-card h2 {
	margin-bottom: 10px;
	font-size: 2rem;
	font-weight: 800;
	color: #1d2736;
}

.coming-soon-card p {
	max-width: 520px;
	margin-bottom: 22px;
	color: #667085;
	line-height: 1.7;
}

.form-switch-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.app-switch {
	position: relative;
	display: inline-flex;
	width: 46px;
	height: 24px;
	margin: 0;
	cursor: pointer;
}

.app-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.app-switch-slider {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #cfd6df;
	transition: background .2s ease;
}

.app-switch-slider::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	left: 3px;
	top: 3px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 5px rgba(15, 23, 42, 0.2);
	transition: transform .2s ease;
}

.app-switch input:checked+.app-switch-slider {
	background: #26304A;
}

.app-switch input:checked+.app-switch-slider::before {
	transform: translateX(22px);
}

@media (max-width: 767.98px) {
	.ag-paging-panel {
		height: auto !important;
		min-height: 48px;
		padding: 8px 10px !important;
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 6px 10px;
	}

	.ag-paging-panel>* {
		margin: 0 !important;
	}

	.ag-paging-row-summary-panel,
	.ag-paging-page-summary-panel {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		white-space: nowrap;
	}

	.ag-paging-description {
		white-space: nowrap;
	}

	.ag-paging-page-size {
		width: 100%;
		justify-content: center;
		margin-bottom: 2px !important;
	}
}

.line-rule-row {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(130px, 1fr) auto auto;
	align-items: end;
	gap: 10px;
	padding: 14px 42px 14px 12px;
	margin-bottom: 10px;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	background: #fbfcfe;
}

.line-rule-remove-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f2f4f7;
	color: #667085;
	cursor: pointer;
}

.line-rule-remove-btn:hover {
	background: rgba(229, 0, 20, 0.08);
	color: var(--brand-primary, #E50014);
}

.line-rule-index {
	font-size: 0.85rem;
	font-weight: 700;
	color: #667085;
	padding-bottom: 9px;
}

.line-rule-time .form-label {
	font-size: 0.78rem;
	margin-bottom: 4px;
	color: #667085;
}

.line-rule-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	margin: 0;
	font-size: 0.86rem;
	color: #344054;
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	.line-rule-row {
		grid-template-columns: 1fr;
		align-items: stretch;
		padding: 14px 42px 14px 12px;
	}

	.line-rule-index {
		padding-bottom: 0;
	}

	.line-rule-check {
		min-height: 28px;
	}
}

.select2-container {
	width: 100% !important;
}

.select2-container--default .select2-selection--single {
	height: 33px !important;
	border: 1px solid #e1e5ec !important;
	border-radius: 8px;
	display: flex;
	align-items: center;
	background: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #344054;
	line-height: 33px !important;
	padding-left: 12px;
	padding-right: 28px;
	font-size: 0.9rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #98a2b3;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 33px;
	right: 8px;
}

.select2-dropdown {
	border-color: #e1e5ec;
	border-radius: 8px;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.select2-search--dropdown {
	padding: 8px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid #d7dde6;
	border-radius: 7px;
	padding: 7px 9px;
	outline: none;
}

.select2-results__option {
	font-size: 0.9rem;
	padding: 8px 10px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: #26304A;
	color: #fff;
}

.app-tabs {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px;
	border: 1px solid #e4e8ef;
	border-radius: 14px;
	background: #f7f9fc;
}

.app-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 8px 14px;
	border: 0;
	border-radius: 10px;
	color: #687386;
	background: transparent;
	font-size: 0.92rem;
	font-weight: 600;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.app-tab:hover {
	color: #223047;
	background: rgba(255, 255, 255, 0.7);
}

.app-tab.is-active {
	color: #18222f;
	background: #ffffff;
	box-shadow:
		0 6px 16px rgba(15, 23, 42, 0.08),
		0 0 0 1px rgba(226, 232, 240, 0.9);
}

.app-tab-index {
	width: 8px;
	height: 8px;
	min-width: 8px;
	border-radius: 50%;
	padding: 0;
	font-size: 0;
	background: #aeb6c2;
	display: inline-block;
}

.app-tab.is-active .app-tab-index {
	background: #26304A;
}

.app-tab-pane {
	display: none;
}

.app-tab-pane.is-active {
	display: block;
}

html,
body {
	width: 100%;
	height: 100%;
	max-width: 100%;
	overflow: hidden;
}

.wrapper {
	height: 100vh;
	min-height: 100vh;
	overflow: hidden;
}

.main-panel {
	height: 100vh;
	min-height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	-webkit-overflow-scrolling: touch;
}

@supports (height: 100svh) {
	.wrapper {
		height: 100svh;
		min-height: 100svh;
	}

	.main-panel {
		height: 100svh;
		min-height: 100svh;
	}
}

.main-header {
	flex: 0 0 auto;
}

.main-panel>.container {
	flex: 1 0 auto;
	min-height: auto !important;
	overflow: visible !important;
}

.main-panel>.app-footer,
.main-panel>.footer,
.main-panel>footer {
	flex: 0 0 auto;
	position: static;
	margin-top: 0;
}

.main-panel:has(.examination-page) .app-footer {
	display: none !important;
}

.drawer-actions .btn {
	min-height: 42px;
	padding: 0 18px;
	border-radius: 10px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

.drawer-actions .btn:hover {
	transform: translateY(-1px);
}

.drawer-actions .btn-outline-secondary {
	background: #F5F7FA !important;
	border-color: #D9DEE7 !important;
	color: #4D5868 !important;
	box-shadow: none !important;
}

.drawer-actions .btn-outline-secondary:hover,
.drawer-actions .btn-outline-secondary:focus {
	background: #ECEFF4 !important;
	border-color: #C9D0DC !important;
	color: #26304A !important;
	box-shadow: 0 6px 14px rgba(38, 48, 74, 0.08) !important;
}

.drawer-actions .btn-outline-secondary:active {
	background: #E3E7EE !important;
	border-color: #BAC2D0 !important;
	color: #26304A !important;
	transform: translateY(0);
}

.drawer-actions .btn-primary {
	background: #404b72 !important;
	border-color: #404b72 !important;
	color: #FFFFFF !important;
	box-shadow: 0 8px 18px rgba(26, 32, 53, 0.16) !important;
}

.drawer-actions .btn-primary:hover,
.drawer-actions .btn-primary:focus {
	background: #1F273D !important;
	border-color: #1F273D !important;
	color: #FFFFFF !important;
	box-shadow: 0 10px 22px rgba(26, 32, 53, 0.22) !important;
}

.drawer-actions .btn-primary:active {
	background: #182033 !important;
	border-color: #182033 !important;
	color: #FFFFFF !important;
	transform: translateY(0);
}

.drawer-actions .btn:disabled,
.drawer-actions .btn.disabled {
	opacity: 0.55;
	transform: none;
	box-shadow: none !important;
	cursor: not-allowed;
}

.swal-button.btn-primary,
.swal-button--execute {
	background: #26304A !important;
	border-color: #26304A !important;
	color: #ffffff !important;
	border-radius: 10px;
	font-weight: 600;
	box-shadow: 0 8px 18px rgba(26, 32, 53, 0.16);
}

.swal-button.btn-primary:hover,
.swal-button--execute:hover {
	background: #1f273d !important;
	border-color: #1f273d !important;
}

.swal-button.btn-outline-secondary,
.swal-button--cancel,
.swal-button--record {
	background: #F5F7FA !important;
	border: 1px solid #D9DEE7 !important;
	color: #4D5868 !important;
	border-radius: 10px;
	font-weight: 600;
}

.swal-button.btn-outline-secondary:hover,
.swal-button--cancel:hover,
.swal-button--record:hover {
	background: #ECEFF4 !important;
	color: #26304A !important;
}

.inspection-scan-page {
	height: 100%;
	min-height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #f4f6f9;
}

.inspection-scan-shell {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.inspection-scan-header {
	background: #ffffff;
	border-bottom: 1px solid #e7ebf2;
	padding: 18px;
}

.inspection-scan-header-inner {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
}

.inspection-scan-header h1 {
	margin: 0;
	color: #26304A;
	font-size: 20px;
	font-weight: 700;
}

.inspection-scan-header p {
	margin: 4px 0 0;
	color: #6f7a89;
	font-size: 14px;
	line-height: 1.5;
}

.inspection-scan-back {
	width: 38px;
	height: 38px;
	border: 1px solid #d9dee7;
	border-radius: 12px;
	background: #f8fafc;
	color: #26304A;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.inspection-scan-main {
	flex: 1;
	display: flex;
	justify-content: center;
	padding: 18px;
}

.inspection-scan-card {
	width: 100%;
	max-width: 520px;
	background: #ffffff;
	border: 1px solid #e3e8f0;
	border-radius: 20px;
	padding: 18px;
	box-shadow: 0 14px 34px rgba(31, 42, 68, 0.08);
}

.inspection-scan-camera {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 18px;
	overflow: hidden;
	background: #111827;
	border: 1px solid #d9dee7;
}

.inspection-scan-camera video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.inspection-scan-frame {
	position: absolute;
	inset: 18%;
	border: 2px solid rgba(255, 255, 255, 0.92);
	border-radius: 18px;
	box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28);
	pointer-events: none;
}

.inspection-scan-status {
	margin-top: 14px;
	font-size: 14px;
	color: #5f6b7a;
	text-align: center;
}

.inspection-manual-box {
	margin-top: 18px;
}

.inspection-manual-divider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px 0 16px;
	color: #8791a0;
	font-size: 13px;
}

.inspection-manual-divider::before,
.inspection-manual-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e2e6ee;
}

.inspection-manual-divider span {
	padding: 0 12px;
	background: #ffffff;
}

.inspection-manual-input-row {
	display: flex;
	gap: 10px;
}

.inspection-manual-input-row .form-control {
	min-height: 42px;
}

.inspection-manual-input-row .btn-primary {
	min-width: 86px;
	min-height: 42px;
	border-radius: 10px;
	font-weight: 600;
	background: #26304A !important;
	border-color: #26304A !important;
	color: #ffffff !important;
	box-shadow: 0 8px 18px rgba(26, 32, 53, 0.16);
}

.inspection-back-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	line-height: 1;
	font-weight: 500;
	transform: translateY(-1px);
}

@media (max-width: 480px) {
	.inspection-scan-header {
		padding: 16px 14px 12px;
	}

	.inspection-scan-main {
		padding: 14px;
	}

	.inspection-scan-card {
		padding: 14px;
		border-radius: 18px;
	}

	.inspection-manual-input-row {
		flex-direction: column;
	}

	.inspection-manual-input-row .btn-primary {
		width: 100%;
	}
}

.examination-page {
	padding-bottom: 96px;
}

.inspection-loading-card,
.inspection-empty-card {
	padding: 22px;
}

.empty-state {
	text-align: center;
	padding: 34px 16px;
}

.empty-icon {
	width: 58px;
	height: 58px;
	margin: 0 auto 14px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f4f8;
	color: #7a8494;
	font-size: 24px;
}

.empty-state h3 {
	margin: 0 0 8px;
	color: #26304A;
	font-size: 18px;
	font-weight: 700;
}

.empty-state p {
	margin: 0;
	color: #7a8494;
}

.inspection-equipment-card,
.inspection-template-card {
	padding: 20px;
	margin-bottom: 18px;
}

.inspection-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.inspection-card-head h2 {
	margin: 0;
	color: #26304A;
	font-size: 20px;
	font-weight: 700;
}

.inspection-card-subtitle {
	margin-top: 4px;
	color: #7a8494;
	font-size: 14px;
}

.inspection-date-pill,
.inspection-progress-pill {
	min-width: 86px;
	text-align: center;
	padding: 7px 12px;
	border-radius: 999px;
	background: #f3f5f8;
	color: #26304A;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.inspection-info-section+.inspection-info-section {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #eef1f5;
}

.inspection-section-title {
	margin: 0 0 12px;
	color: #26304A;
	font-size: 15px;
	font-weight: 700;
}

.inspection-info-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.inspection-info-item {
	padding: 12px 13px;
	border-radius: 14px;
	background: #f8fafc;
	border: 1px solid #e7ebf2;
	min-height: 64px;
}

.inspection-info-item span {
	display: block;
	margin-bottom: 5px;
	color: #7a8494;
	font-size: 12px;
}

.inspection-info-item strong {
	display: block;
	color: #26304A;
	font-size: 14px;
	font-weight: 700;
	word-break: break-word;
}

.inspection-progress-track {
	height: 8px;
	border-radius: 999px;
	background: #edf1f6;
	overflow: hidden;
	margin-bottom: 18px;
}

.inspection-progress-bar {
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: #26304A;
	transition: width .2s ease;
}

.inspection-question-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.inspection-question-card {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 16px;
	padding: 16px;
	border-radius: 18px;
	background: #ffffff;
	border: 1px solid #e3e8f0;
	box-shadow: 0 8px 20px rgba(31, 42, 68, 0.05);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.inspection-question-card.is-bad-selected {
	border-color: #e0b4a6;
	background: #fffaf8;
}

.inspection-question-card.is-warning {
	border-color: #c98d42;
	box-shadow: 0 0 0 3px rgba(201, 141, 66, 0.16);
}

.inspection-question-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.inspection-choice {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 12px;
	background: #f5f7fa;
	border: 1px solid #dfe5ee;
	color: #4d5868;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
}

.inspection-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.inspection-choice:has(input:checked) {
	color: #ffffff !important;
	box-shadow: 0 8px 18px rgba(26, 32, 53, 0.14);
}

.inspection-choice.is-good:has(input:checked) {
	background: #2F7D57;
	border-color: #2F7D57;
	box-shadow: 0 8px 18px rgba(47, 125, 87, 0.18);
}

.inspection-choice.is-bad:has(input:checked) {
	background: #9B3A32;
	border-color: #9B3A32;
	box-shadow: 0 8px 18px rgba(155, 58, 50, 0.18);
}

.inspection-choice.is-na:has(input:checked) {
	background: #4B5563;
	border-color: #4B5563;
	box-shadow: 0 8px 18px rgba(75, 85, 99, 0.16);
}

.inspection-question-title-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 10px;
}

.inspection-question-index {
	width: 32px;
	height: 28px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f1f4f8;
	color: #26304A;
	font-size: 13px;
	font-weight: 800;
	flex-shrink: 0;
}

.inspection-question-title-row h3 {
	margin: 3px 0 0;
	color: #26304A;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.inspection-question-title-main {
	min-width: 0;
	flex: 1;
}

.inspection-question-title-main h3 {
	margin: 1px 0 0;
	color: #26304A;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

.inspection-action-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 22px;
	padding: 2px 8px;
	margin-right: 8px;
	border-radius: 999px;
	background: #EEF1F5;
	color: #4D5868;
	border: 1px solid #DDE3EC;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	vertical-align: 2px;
	white-space: nowrap;
}

.inspection-question-text {
	vertical-align: baseline;
}

.inspection-remark-area .form-label {
	font-size: 13px;
	color: #5d6878;
}

.inspection-remark-input {
	resize: vertical;
}

.inspection-bad-hint {
	margin-top: 6px;
	color: #8A3A2B;
	font-size: 12px;
	font-weight: 600;
}

.inspection-submit-bar {
	position: fixed;
	left: 265px;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: #ffffff;
	border-top: 1px solid #e3e8f0;
	padding-bottom: env(safe-area-inset-bottom);
}

.inspection-submit-bar.is-keyboard-open {
	display: none !important;
}

.sidebar_minimize .inspection-submit-bar {
	left: 75px;
}

.inspection-submit-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 12px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.inspection-submit-title {
	color: #26304A;
	font-size: 15px;
	font-weight: 800;
}

.inspection-submit-subtitle {
	margin-top: 2px;
	color: #7a8494;
	font-size: 13px;
}

@media (max-width: 991px) {
	.inspection-submit-bar {
		left: 0;
	}

	.inspection-info-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.examination-page {
		padding-bottom: calc(118px + env(safe-area-inset-bottom));
	}
	
	.inspection-equipment-card,
	.inspection-template-card {
		padding: 16px;
	}

	.inspection-card-head {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.inspection-info-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.inspection-question-card {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 14px;
	}

	.inspection-question-main {
		display: contents;
	}

	.inspection-question-title-row {
		order: 1;
	}

	.inspection-question-options {
		order: 2;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.inspection-question-options.is-two-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.inspection-choice {
		min-height: 42px;
		padding: 0 8px;
	}

	.inspection-remark-area {
		order: 3;
	}

	.inspection-submit-inner {
		padding: 12px 14px;
		flex-direction: column;
		align-items: stretch;
	}

	.inspection-submit-inner .btn {
		width: 100%;
	}
}

a.btn.app-main-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	line-height: 1;
	text-decoration: none;
}

.inspection-signature-card {
	padding: 20px;
	margin-bottom: 18px;
}

.inspection-signature-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.inspection-signature-row h2 {
	margin: 0;
	color: #26304A;
	font-size: 20px;
	font-weight: 700;
}

.inspection-signature-preview {
	margin-top: 16px;
	border-radius: 16px;
	border: 1px solid #e3e8f0;
	background: #f8fafc;
	padding: 10px;
}

.inspection-signature-preview img {
	display: block;
	max-width: 100%;
	max-height: 120px;
	object-fit: contain;
}

.signature-panel {
	border: 0;
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(20, 28, 45, 0.22);
	overflow: hidden;
}

.signature-panel .modal-header {
	border-bottom: 1px solid #edf0f4;
	padding: 20px 22px 16px;
}

.signature-panel .modal-body {
	padding: 20px 22px;
}

.signature-panel .modal-footer {
	border-top: 1px solid #edf0f4;
	padding: 16px 22px 20px;
}

.signature-pad-wrap {
	width: 100%;
	height: 260px;
	border-radius: 18px;
	border: 1px solid #d9dee7;
	background: #ffffff;
	overflow: hidden;
	position: relative;
}

.signature-pad-wrap::before {
	content: "請在此簽名";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #c1c7d0;
	font-size: 18px;
	font-weight: 600;
	pointer-events: none;
}

.signature-pad-wrap canvas {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
	touch-action: none;
	background: transparent;
}

@media (max-width: 640px) {
	.inspection-signature-row {
		flex-direction: column;
		align-items: stretch;
	}

	.signature-pad-wrap {
		height: 220px;
	}

	.signature-panel .modal-body {
		padding: 16px;
	}
}

.signature-modal .modal-body {
	overflow: hidden;
}

.signature-pad-wrap {
	touch-action: none;
	overscroll-behavior: contain;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.signature-pad-wrap canvas {
	touch-action: none;
	overscroll-behavior: contain;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

body.signature-modal-active .signature-modal,
body.signature-modal-active .signature-modal * {
	pointer-events: auto;
}

.signature-modal .modal-dialog,
.signature-modal .modal-content,
.signature-modal .modal-body {
	touch-action: none;
	overscroll-behavior: contain;
}

.signature-pad-wrap,
.signature-pad-wrap canvas {
	touch-action: none !important;
	overscroll-behavior: contain;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.inspection-record-question-card {
	grid-template-columns: 1fr;
}

.inspection-record-main {
	width: 100%;
}

.inspection-record-title-row {
	align-items: flex-start;
	gap: 12px;
}

.inspection-record-title-row .inspection-question-title-main {
	flex: 1;
	min-width: 0;
}

.inspection-result-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 58px;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.inspection-result-badge.is-good {
	color: #ffffff;
	background: #2F7D57;
}

.inspection-result-badge.is-bad {
	color: #ffffff;
	background: #9B3A32;
}

.inspection-result-badge.is-na {
	color: #ffffff;
	background: #4B5563;
}

.inspection-record-remark-area {
	margin-top: 12px;
	padding-left: 46px;
}

.inspection-record-remark {
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid #e4e8ef;
	background: #f8fafc;
	color: #3d4656;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
}

@media (max-width: 640px) {
	.inspection-record-title-row {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: flex-start;
	}

	.inspection-record-title-row .inspection-result-badge {
		grid-column: 2;
		justify-self: flex-start;
		margin-top: 4px;
	}

	.inspection-record-remark-area {
		padding-left: 0;
	}
}

.app-print-btn {
	min-height: 42px;
	padding: 0 16px;
	border-radius: 10px;
	font-weight: 600;
	background: #F3F0EA !important;
	border-color: #DED6C8 !important;
	color: #3A3A36 !important;
	box-shadow: 0 8px 18px rgba(70, 62, 50, 0.10);
}

.app-print-btn:hover {
	background: #E9E2D5 !important;
	border-color: #D0C4B3 !important;
	color: #252522 !important;
}

@media print {
	@page {
		size: A4;
		margin: 12mm;
	}

	html,
	body {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #ffffff !important;
		overflow: visible !important;
	}

	.sidebar,
	.main-header,
	.footer,
	footer,
	.main-footer,
	.page-actions,
	#pageLoading {
		display: none !important;
	}

	.wrapper,
	.main-panel,
	.main-panel>.container {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		left: 0 !important;
		right: auto !important;
		top: auto !important;
		transform: none !important;
		position: static !important;
		float: none !important;
		
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.inspection-record-detail-page {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #ffffff !important;
	}

	.inspection-record-detail-page .content-card {
		box-shadow: none !important;
		border: 1px solid #d9dee7 !important;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.inspection-question-card {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.inspection-signature-preview img {
		max-height: 120px !important;
	}

	* {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

.overall-result-text {
	font-weight: 800;
}

.overall-result-text.is-normal {
	color: #2F7D57;
}

.overall-result-text.is-abnormal {
	color: #9B3A32;
}

.overall-result-text.is-partial {
	color: #B7791F;
}

.overall-result-text.is-unknown {
	color: #6B7280;
}

.check-record-summary-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.summary-card.is-success strong {
	color: #2F7D57;
}

.summary-card.is-danger strong {
	color: #9B3A32;
}

.table-card-subtitle {
	color: #7a8494;
	font-size: 13px;
	margin-top: 4px;
}

.check-calendar-card {
	margin-bottom: 18px;
}

.check-calendar-head {
	align-items: flex-start;
	gap: 16px;
}

.check-calendar-head-right {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.check-calendar-nav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.app-cal-nav-btn {
	width: 36px;
	height: 36px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #d9dee7;
	border-radius: 8px;
	background: #ffffff;
	color: #315f97;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.app-cal-nav-btn:hover {
	background: #eef3fa;
	border-color: #315f97;
}

.calendar-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	color: #6b7280;
	font-size: 13px;
}

.calendar-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.legend-dot {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	display: inline-block;
}

.legend-dot.is-normal {
	background: #16A34A;
}

.legend-dot.is-warning {
	background: #F59E0B;
}

.legend-dot.is-danger {
	background: #DC2626;
}

.legend-dot.is-empty {
	background: #8B95A1;
}

.check-calendar-weekdays {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 8px;
	color: #7a8494;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.check-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}

.calendar-day {
	min-height: 104px;
	padding: 10px;
	border-radius: 16px;
	border: 1px solid #e2e7ef;
	background: #ffffff;
	text-align: left;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.calendar-day:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(35, 45, 70, 0.10);
}

.calendar-day.is-selected {
	border-color: #26304A;
	box-shadow: 0 0 0 2px rgba(38, 48, 74, 0.16);
}

.calendar-day.is-blank {
	visibility: hidden;
	pointer-events: none;
}

.calendar-day-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 14px;
}

.calendar-day-top strong {
	color: #26304A;
	font-size: 18px;
	font-weight: 800;
}

.calendar-day-main {
	color: #4b5563;
	font-size: 13px;
	line-height: 1.7;
}

.calendar-status-dot {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	display: inline-block;
	flex: 0 0 auto;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.calendar-day.is-normal .calendar-status-dot {
	background: #16A34A;
	
}

.calendar-day.is-warning .calendar-status-dot {
	background: #F59E0B;
	
}

.calendar-day.is-danger .calendar-status-dot {
	background: #DC2626;
	
}

.calendar-day.is-empty .calendar-status-dot {
	background: #8B95A1;
}

.daily-record-table-wrap {
	width: 100%;
	overflow-x: auto;
}

.daily-record-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.daily-record-table th {
	padding: 12px 10px;
	color: #647084;
	font-size: 13px;
	font-weight: 700;
	border-bottom: 1px solid #e4e8ef;
	white-space: nowrap;
}

.daily-record-table td {
	padding: 13px 10px;
	border-bottom: 1px solid #edf0f4;
	color: #364152;
	font-size: 14px;
	vertical-align: middle;
	white-space: nowrap;
}

.daily-equipment-no {
	font-weight: 800;
	color: #26304A;
}

.daily-mobile-sub {
	display: none;
	color: #7a8494;
	font-size: 12px;
	margin-top: 2px;
}

.check-status-pill,
.check-result-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.check-status-pill.is-completed {
	background: #ecfdf3;
	color: #1a7544;
	border-color: #a6f4c5;
}

.check-status-pill.is-missing,
.check-status-pill.is-unknown {
	background: #f2f4f7;
	color: #475467;
	border-color: #d0d5dd;
}

.check-status-pill.is-disabled {
	background: #fffaeb;
	color: #b54708;
	border-color: #fedf89;
}

.check-status-pill.is-downtime {
	background: #fff7ed;
	color: #c2410c;
	border-color: #fed7aa;
}

.check-status-pill.is-today-unused {
	background: #eff6ff;
	color: #175cd3;
	border-color: #b2ddff;
}

.check-status-pill.is-unavailable {
	background: #f2f4f7;
	color: #475467;
	border-color: #d0d5dd;
}

.check-result-pill {
	color: #ffffff;
}

.check-result-pill.is-normal {
	background: #2F7D57;
}

.check-result-pill.is-abnormal {
	background: #9B3A32;
}

.check-result-pill.is-partial {
	background: #B7791F;
}

.check-result-pill.is-none {
	background: #8B95A1;
}

.daily-view-btn {
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid #d8dee8;
	background: #ffffff;
	color: #26304A;
	font-size: 13px;
	font-weight: 700;
}

.daily-view-btn:hover {
	background: #26304A;
	border-color: #26304A;
	color: #ffffff;
}

@media (max-width: 992px) {
	.check-record-summary-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.calendar-legend {
		width: 100%;
	}

	.calendar-legend {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.check-calendar-weekdays {
		gap: 4px;
		font-size: 12px;
	}

	.check-calendar-head {
		flex-direction: column;
	}

	.calendar-day {
		min-height: 86px;
		padding: 8px;
		border-radius: 12px;
	}

	.calendar-day-top {
		display: flex;
		flex-direction: column;
	}

	.calendar-day-top strong {
		font-size: 16px;
	}

	.calendar-status-dot {
		margin-top: 4px;
	}

	.calendar-day-main {
		display: none;
	}

	.daily-record-table-wrap {
		margin: 0 -2px;
		padding-bottom: 4px;
	}

	.daily-record-table {
		min-width: 980px;
	}

	.daily-record-table th {
		padding: 10px 8px;
		font-size: 12px;
	}

	.daily-record-table td {
		padding: 11px 8px;
		font-size: 13px;
	}

	.daily-mobile-sub {
		display: none;
	}
}

.daily-record-table-wrap {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.daily-record-table {
	min-width: 980px;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.daily-record-table th,
.daily-record-table td {
	white-space: nowrap;
}

.table-card-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.app-download-btn {
	min-height: 38px;
	padding: 0 14px;
	border-radius: 10px;
	font-weight: 700;
	background: #F3F0EA !important;
	border: 1px solid #DED6C8 !important;
	color: #3A3A36 !important;
}

.app-download-btn:hover {
	background: #E9E2D5 !important;
	border-color: #D0C4B3 !important;
	color: #252522 !important;
}

.calendar-day.is-future {
	background: #fbfcfe;
	border-color: #edf0f4;
	cursor: default;
	box-shadow: none;
}

.calendar-day.is-future:hover {
	transform: none;
	box-shadow: none;
}

.calendar-day.is-future .calendar-day-top strong {
	color: #a1aab8;
}

.calendar-future-text {
	color: #a1aab8;
	font-size: 13px;
}

.calendar-day:disabled {
	pointer-events: none;
}

.calendar-day.is-no-equipment {
	background: #fbfcfe;
	border-color: #edf0f4;
	box-shadow: none;
}

.calendar-day.is-no-equipment .calendar-day-top strong {
	color: #a1aab8;
}

.calendar-day.is-no-equipment:hover {
	transform: none;
	box-shadow: none;
}

#dailyListContainer {
	padding: 0 10px;
}

.qr-preview-outer {
	width: 100%;
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1e242a;
	border: 1px dashed #ccd3dc;
	border-radius: 14px;
	padding: 18px;
	overflow: auto;
}

.qr-label-preview {
	background: #fff;
	border: 1px solid #d8dee8;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3mm;
	box-sizing: border-box;
}

.qr-code-preview-box {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 auto;
}

.qr-code-preview-box canvas,
.qr-code-preview-box img {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

.qr-label-text-preview {
	color: #1f2937;
	font-size: 11px;
	line-height: 1.25;
	font-weight: 600;
	word-break: break-word;
}

.qr-label-preview.is-no-text {
	justify-content: center;
	gap: 0;
}

.qr-label-preview.is-no-text .qr-label-text-preview {
	display: none;
}

.import-step-card {
	/* 原為寫死的白底，深色模式下文字為淺色，形成白底淺字而看不見。 */
	border: 1px solid var(--app-border);
	border-radius: 14px;
	padding: 16px;
	background: var(--app-panel);
}

.import-summary-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.import-summary-item {
	border: 1px solid rgba(148, 163, 184, .35);
	border-radius: 14px;
	padding: 12px 14px;
	background: #f8fafc;
}

.import-summary-item span {
	display: block;
	font-size: 12px;
	color: #64748b;
	margin-bottom: 4px;
}

.import-summary-item strong {
	font-size: 22px;
	color: #0f172a;
}

.import-summary-item.is-error strong {
	color: #b91c1c;
}

.import-preview-table-wrap {
	max-height: 360px;
	overflow: auto;
	border: 1px solid rgba(148, 163, 184, .35);
	border-radius: 12px;
}

.import-preview-table {
	margin-bottom: 0;
}

.import-error-list {
	margin: 0;
	padding-left: 18px;
	color: #b91c1c;
	font-size: 13px;
}

.import-valid-text {
	color: #15803d;
	font-weight: 600;
}

.import-preview-table td {
	padding: 10px !important;
}

.report-type-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.report-type-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #e1e6ef;
	border-radius: 14px;
	background: #ffffff;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.report-type-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.report-type-option::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 1px solid #c9d2df;
	background: #ffffff;
	flex: 0 0 auto;
}

.report-type-option.is-active {
	border-color: rgba(38, 48, 74, .35);
	background: #f8fafc;
	box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.report-type-option.is-active::before {
	background: #26304A;
	border-color: #26304A;
	box-shadow: inset 0 0 0 4px #ffffff;
}

.report-type-option strong {
	display: block;
	color: #26304A;
	font-size: 15px;
	font-weight: 800;
}

.report-type-option span {
	display: block;
	margin-top: 3px;
	color: #7a8494;
	font-size: 13px;
	line-height: 1.45;
}

.report-current-filter {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #e7ebf2;
	border-radius: 14px;
	background: #f8fafc;
}

.report-current-filter span {
	display: block;
	margin-bottom: 4px;
	color: #7a8494;
	font-size: 12px;
	font-weight: 600;
}

.report-current-filter strong {
	display: block;
	color: #26304A;
	font-size: 14px;
	font-weight: 800;
}

@media (max-width: 640px) {

	.report-type-grid,
	.report-current-filter {
		grid-template-columns: 1fr;
	}
}

.equipment-no-cell {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.equipment-no-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.equipment-unavailable-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 10px;
	flex: 0 0 auto;
	cursor: help;
}

.equipment-unavailable-icon.is-disabled {
	color: #9f1239;
	background: rgba(159, 18, 57, 0.12);
	border: 1px solid rgba(159, 18, 57, 0.22);
}

.equipment-unavailable-icon.is-downtime {
	color: #92400e;
	background: rgba(146, 64, 14, 0.12);
	border: 1px solid rgba(146, 64, 14, 0.22);
}

.equipment-unavailable-icon.is-unavailable {
	color: #475569;
	background: rgba(71, 85, 105, 0.12);
	border: 1px solid rgba(71, 85, 105, 0.22);
}

.abnormal-type-pill {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	background: #f2f4f7;
	color: #475467;
}

.abnormal-type-pill.is-inspection-abnormal {
	background: #fef2f2;
	color: #b91c1c;
}

.abnormal-type-pill.is-downtime {
	background: #fff7ed;
	color: #c2410c;
}

.abnormal-type-pill.is-disabled {
	background: #f3f4f6;
	color: #374151;
}

.grid-action-btn.is-close {
	--action-color: #15803d;
	--action-bg-hover: #f0fdf4;
	--action-border-hover: #bbf7d0;
}

.grid-action-btn.is-cancel {
	--action-color: #b91c1c;
	--action-bg-hover: #fef2f2;
	--action-border-hover: #fecaca;
}

.status-pill.is-warning {
	background: #fffbeb;
	color: #b45309;
	border: 1px solid #fde68a;
}

.abnormal-process-drawer {
	width: min(620px, 100vw) !important;
}

.process-summary-card {
	border: 1px solid #e4e7ec;
	border-radius: 16px;
	background: #ffffff;
	padding: 16px;
}

.process-summary-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.process-equipment-no {
	font-size: 1.15rem;
	font-weight: 800;
	color: #101828;
}

.process-equipment-meta {
	margin-top: 2px;
	font-size: 0.86rem;
	color: #667085;
}

.process-summary-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.process-summary-grid div {
	border-radius: 12px;
	background: #f9fafb;
	padding: 10px 12px;
}

.process-summary-grid span {
	display: block;
	font-size: 0.76rem;
	color: #667085;
	margin-bottom: 2px;
}

.process-summary-grid strong {
	display: block;
	font-size: 0.9rem;
	color: #101828;
	font-weight: 700;
}

.process-reason-box {
	border-top: 1px solid #eaecf0;
	padding-top: 12px;
}

.process-reason-label {
	font-size: 0.78rem;
	color: #667085;
	margin-bottom: 4px;
}

.process-reason-text {
	font-size: 0.92rem;
	color: #344054;
	line-height: 1.6;
	white-space: pre-wrap;
}

.process-section {
	border: 1px solid #e4e7ec;
	border-radius: 16px;
	background: #ffffff;
	padding: 16px;
	margin-bottom: 16px;
}

.process-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.process-section-head h6 {
	margin: 0;
	font-weight: 800;
	color: #101828;
}

.abnormal-action-timeline {
	position: relative;
	padding-left: 18px;
}

.action-timeline-item {
	position: relative;
	padding-left: 18px;
	padding-bottom: 16px;
	border-left: 1px solid #e4e7ec;
}

.action-timeline-item:last-child {
	padding-bottom: 0;
}

.action-timeline-dot {
	position: absolute;
	left: -6px;
	top: 2px;
	width: 11px;
	height: 11px;
	border-radius: 999px;
	background: #344054;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 2px #e4e7ec;
}

.action-timeline-body {
	padding: 10px 12px;
	border-radius: 12px;
	background: #f9fafb;
}

.action-timeline-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}

.action-timeline-head strong {
	color: #101828;
	font-size: 0.9rem;
}

.action-timeline-head span {
	color: #667085;
	font-size: 0.8rem;
	white-space: nowrap;
}

.action-timeline-content {
	color: #344054;
	font-size: 0.9rem;
	line-height: 1.6;
	white-space: pre-wrap;
}

.action-timeline-user {
	margin-top: 6px;
	color: #98a2b3;
	font-size: 0.78rem;
}

.empty-action-timeline {
	border: 1px dashed #d0d5dd;
	border-radius: 12px;
	padding: 18px;
	text-align: center;
	color: #667085;
	background: #f9fafb;
}

.daily-list-title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.daily-list-title-row h2 {
	margin: 0;
}

.daily-unavailable-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 10px;
	border: 1px solid #e4e7ec;
	border-radius: 999px;
	background: #ffffff;
	color: #667085;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.daily-unavailable-toggle input {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: #344054;
}

.daily-record-table tr.is-unavailable-row {
	background: #f9fafb;
}

.line-bind-box {
	padding: 12px 14px;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	background: #f9fafb;
}

.line-binding-command-box {
	padding: 10px 12px;
	border: 1px dashed #cbd5e1;
	border-radius: 10px;
	background: #ffffff;
}

.line-binding-command-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.line-binding-command-row code {
	flex: 1;
	padding: 7px 9px;
	border-radius: 8px;
	background: #f1f5f9;
	color: #111827;
	font-size: 0.9rem;
	word-break: break-all;
}

.swal-overlay {
	background-color: rgba(15, 23, 42, 0.42);
	backdrop-filter: blur(2px);
}

.swal-modal[class*="app-swal-"] {
	width: 420px;
	max-width: calc(100vw - 32px);
	padding: 0;
	border-radius: 18px;
	background: #fff;
	box-shadow:
		0 24px 70px rgba(15, 23, 42, 0.22),
		0 0 0 1px rgba(15, 23, 42, 0.06);
	overflow: hidden;
}

.swal-modal[class*="app-swal-"]::before {
	content: "";
	display: block;
	height: 5px;
	background: #1f2937;
}

.swal-modal.app-swal-success::before,
.swal-modal.app-swal-confirm-success::before {
	background: #15803d;
}

.swal-modal.app-swal-error::before,
.swal-modal.app-swal-confirm-error::before {
	background: #b91c1c;
}

.swal-modal.app-swal-warning::before,
.swal-modal.app-swal-confirm-warning::before {
	background: #b45309;
}

.swal-modal.app-swal-info::before,
.swal-modal.app-swal-confirm-info::before {
	background: #315f97;
}

.swal-modal[class*="app-swal-"] .swal-icon {
	margin-top: 24px;
	margin-bottom: 12px;
}

.swal-modal[class*="app-swal-"] .swal-icon--success {
	border-color: #15803d;
}

.swal-modal[class*="app-swal-"] .swal-icon--success__line {
	background-color: #15803d;
}

.swal-modal[class*="app-swal-"] .swal-icon--success__ring {
	border-color: rgba(21, 128, 61, 0.22);
}

.swal-modal[class*="app-swal-"] .swal-icon--error {
	border-color: #b91c1c;
}

.swal-modal[class*="app-swal-"] .swal-icon--error__line {
	background-color: #b91c1c;
}

.swal-modal[class*="app-swal-"] .swal-icon--warning {
	border-color: #b45309;
}

.swal-modal[class*="app-swal-"] .swal-icon--warning__body,
.swal-modal[class*="app-swal-"] .swal-icon--warning__dot {
	background-color: #b45309;
}

.swal-modal[class*="app-swal-"] .swal-icon--info {
	border-color: #315f97;
}

.swal-modal[class*="app-swal-"] .swal-icon--info::before,
.swal-modal[class*="app-swal-"] .swal-icon--info::after {
	background-color: #315f97;
}

.swal-modal[class*="app-swal-"] .swal-title {
	margin: 0;
	padding: 0 28px;
	color: #172033;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.45;
}

.swal-modal[class*="app-swal-"] .swal-text {
	margin-top: 10px;
	padding: 0 32px;
	color: #5f6b7a;
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.75;
	text-align: center;
	white-space: pre-line;
}

.swal-modal[class*="app-swal-"] .swal-footer {
	margin-top: 0px;
	padding: 10px 17px 0px;
	display: flex;
	justify-content: center;
	gap: 10px;
	border-top: 1px solid #eef1f5;
	background: #fafbfc;
}

.swal-modal[class*="app-swal-"] .swal-button-container {
	margin: 0;
}

.swal-modal[class*="app-swal-"] .swal-button {
	min-width: 92px;
	height: 38px;
	padding: 0 18px;
	border-radius: 10px;
	font-size: 0.9rem;
	font-weight: 600;
	box-shadow: none !important;
	transition:
		background-color .16s ease,
		border-color .16s ease,
		color .16s ease,
		transform .12s ease;
}

.swal-modal[class*="app-swal-"] .swal-button:hover {
	transform: translateY(-1px);
}

.swal-modal[class*="app-swal-"] .swal-button:focus {
	box-shadow: 0 0 0 3px rgba(49, 95, 151, 0.16) !important;
}

.swal-modal[class*="app-swal-"] .swal-button.app-swal-btn-primary {
	background: #172033;
	border: 1px solid #172033;
	color: #fff;
}

.swal-modal[class*="app-swal-"] .swal-button.app-swal-btn-primary:hover {
	background: #0f172a;
	border-color: #0f172a;
}

.swal-modal[class*="app-swal-"] .swal-button.app-swal-btn-secondary {
	background: #fff;
	border: 1px solid #d8dee8;
	color: #455468;
}

.swal-modal[class*="app-swal-"] .swal-button.app-swal-btn-secondary:hover {
	background: #f3f6f9;
	border-color: #cbd5e1;
	color: #253041;
}

.swal-modal[class*="app-swal-"] .swal-button.app-swal-btn-danger {
	background: #b91c1c;
	border: 1px solid #b91c1c;
	color: #fff;
}

.swal-modal[class*="app-swal-"] .swal-button.app-swal-btn-danger:hover {
	background: #991b1b;
	border-color: #991b1b;
}

.swal-modal[class*="app-swal-"] .swal-button--danger {
	background: #b91c1c;
	border: 1px solid #b91c1c;
	color: #fff;
}

.swal-modal[class*="app-swal-"] .swal-button--danger:hover {
	background: #991b1b;
	border-color: #991b1b;
}

.swal-overlay--show-modal .swal-modal[class*="app-swal-"] {
	animation: appSwalIn .16s ease-out both !important;
}

.swal-overlay--hide-modal .swal-modal[class*="app-swal-"] {
	animation: appSwalOut .12s ease-in both !important;
}

@keyframes appSwalIn {
	from {
		opacity: 0;
		transform: translateY(8px) scale(.985);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes appSwalOut {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	to {
		opacity: 0;
		transform: translateY(6px) scale(.99);
	}
}

@media (max-width: 480px) {
	.swal-modal[class*="app-swal-"] {
		width: calc(100vw - 28px);
		border-radius: 16px;
	}

	.swal-modal[class*="app-swal-"] .swal-title {
		padding: 0 22px;
		font-size: 1.05rem;
	}

	.swal-modal[class*="app-swal-"] .swal-text {
		padding: 0 24px;
		font-size: 0.9rem;
	}

	.swal-modal[class*="app-swal-"] .swal-footer {
		padding: 16px 18px 20px;
	}

	.swal-modal[class*="app-swal-"] .swal-button {
		min-width: 86px;
	}
}

.home-dashboard-page {
	padding-top: 20px;
	padding-bottom: 28px;
}

.home-dashboard-head {
	margin-bottom: 18px;
}

.home-today-summary {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}

.home-stat-tile {
	border: 1px solid #d9dee7;
	border-radius: 18px;
	background: #ffffff;
	padding: 16px 18px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
}

.home-stat-tile span {
	display: block;
	margin-bottom: 10px;
	color: #667085;
	font-size: 0.84rem;
	font-weight: 700;
}

.home-stat-tile strong {
	display: block;
	margin-bottom: 8px;
	color: #26304A;
	font-size: 2rem;
	line-height: 1;
	font-weight: 800;
}

.home-stat-tile small {
	display: block;
	color: #8a94a4;
	font-size: 0.82rem;
	line-height: 1.45;
}

.home-stat-tile.is-success {
	border-color: #cfe7d8;
}

.home-stat-tile.is-success strong {
	color: #2F7D57;
}

.home-stat-tile.is-danger {
	border-color: #e6c6c1;
}

.home-stat-tile.is-danger strong {
	color: #9B3A32;
}

.home-stat-tile.is-warning {
	border-color: #ead7b4;
}

.home-stat-tile.is-warning strong {
	color: #B7791F;
}

.home-stat-tile.is-rate {
	border-color: #cbd7ea;
	background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}

.home-stat-tile.is-rate strong {
	color: #315f97;
}

.home-stat-tile.is-line {
	border-color: #bdebd0;
	background: linear-gradient(180deg, #f6fef9 0%, #ffffff 100%);
}

.home-stat-tile.is-line strong {
	color: #06A747;
}

.home-dashboard-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
	gap: 18px;
	margin-bottom: 18px;
	align-items: start;
}

.home-panel {
	padding: 20px;
	border-color: #d9dee7;
}

.home-panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e1e6ef;
}

.home-panel-head h2 {
	margin: 0;
	color: #26304A;
	font-size: 1.05rem;
	font-weight: 800;
}

.home-panel-head p {
	margin: 4px 0 0;
	color: #7a8494;
	font-size: 0.88rem;
}

.home-panel-link {
	color: #26304A;
	font-size: 0.86rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.home-panel-link:hover {
	color: #1f273d;
	text-decoration: none;
}

.home-abnormal-panel {
	height: 430px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.home-abnormal-panel .home-panel-head {
	flex: 0 0 auto;
}

.home-abnormal-summary {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.home-abnormal-summary div {
	border: 1px solid #dce3ec;
	border-radius: 14px;
	background: #f8fafc;
	padding: 12px;
}

.home-abnormal-summary span {
	display: block;
	margin-bottom: 6px;
	color: #667085;
	font-size: 0.78rem;
	font-weight: 700;
}

.home-abnormal-summary strong {
	display: block;
	color: #26304A;
	font-size: 1.4rem;
	line-height: 1;
	font-weight: 800;
}

.home-abnormal-list {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	width: 100%;
	max-width: 100%;
	overflow: auto;
	border: 1px solid #dce3ec;
	border-radius: 14px;
	background: #ffffff;
	-webkit-overflow-scrolling: touch;
}

.home-abnormal-table-wrap {
	width: 100%;
	min-width: 720px;
}

.home-abnormal-table {
	width: 100%;
	min-width: 720px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.88rem;
}

.home-abnormal-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 11px 12px;
	background: #f8fafc;
	border-bottom: 1px solid #dce3ec;
	color: #667085;
	font-size: 0.78rem;
	font-weight: 800;
	white-space: nowrap;
}

.home-abnormal-table tbody td {
	padding: 12px;
	border-bottom: 1px solid #edf0f4;
	color: #344054;
	vertical-align: middle;
	white-space: nowrap;
}

.home-abnormal-table tbody tr:last-child td {
	border-bottom: 0;
}

.home-abnormal-table tbody tr:hover {
	background: #fbfcfe;
}

.home-abnormal-equipment {
	color: #26304A;
	font-weight: 800;
}

.home-abnormal-type {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 800;
	white-space: nowrap;
}

.home-abnormal-type.is-downtime {
	background: #fff7ed;
	color: #c2410c;
	border: 1px solid #fed7aa;
}

.home-abnormal-type.is-disabled {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

.home-abnormal-type.is-abnormal {
	background: #fffbeb;
	color: #b45309;
	border: 1px solid #fde68a;
}

.home-abnormal-type.is-manager-created {
	background: #eff6ff;
	color: #1d4ed8;
	border: 1px solid #bfdbfe;
}

.home-abnormal-reason-text {
	display: inline-block;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
	color: #4d5868;
}

.home-empty-text {
	padding: 18px;
	border: 1px dashed #cbd5df;
	border-radius: 14px;
	background: #f8fafc;
	color: #7a8494;
	text-align: center;
	font-size: 0.9rem;
}

.home-user-panel {
	min-height: 430px;
}

.home-user-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border: 1px solid #dce3ec;
	border-radius: 16px;
	background: #f8fafc;
	margin-bottom: 14px;
}

.home-user-avatar {
	width: 46px;
	height: 46px;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: #26304A;
	color: #ffffff;
	font-size: 1.1rem;
	font-weight: 800;
}

.home-user-main {
	min-width: 0;
}

.home-user-main strong {
	display: block;
	color: #26304A;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.home-user-main span {
	display: block;
	margin-top: 3px;
	color: #7a8494;
	font-size: 0.84rem;
	font-weight: 600;
}

.home-info-list {
	border: 1px solid #dce3ec;
	border-radius: 16px;
	overflow: hidden;
	background: #ffffff;
	margin-bottom: 14px;
}

.home-info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 13px;
	border-bottom: 1px solid #e1e6ef;
}

.home-info-row:last-child {
	border-bottom: 0;
}

.home-info-row span {
	color: #7a8494;
	font-size: 0.82rem;
	font-weight: 700;
	white-space: nowrap;
}

.home-info-row strong {
	color: #26304A;
	font-size: 0.9rem;
	font-weight: 800;
	text-align: right;
	word-break: break-word;
}

.home-help-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border: 1px solid #dce3ec;
	border-radius: 16px;
	background: #f8fafc;
}

.home-help-icon {
	width: 40px;
	height: 40px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f3f0ea;
	color: #6b4e2e;
	flex: 0 0 auto;
}

.home-help-body {
	flex: 1;
	min-width: 0;
}

.home-help-body strong {
	display: block;
	color: #26304A;
	font-size: 0.94rem;
	font-weight: 800;
	line-height: 1.3;
}

.home-help-body span {
	display: block;
	margin-top: 3px;
	color: #7a8494;
	font-size: 0.8rem;
	line-height: 1.4;
}

.home-help-link {
	flex: 0 0 auto;
	height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid #d0d5dd;
	background: #ffffff;
	color: #26304A;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.82rem;
	font-weight: 800;
	text-decoration: none;
}

.home-help-link:hover {
	background: #26304A;
	border-color: #26304A;
	color: #ffffff;
	text-decoration: none;
}

.home-line-float-btn {
	position: fixed;
	right: 22px;
	bottom: 90px;
	z-index: 1060;
	min-width: 58px;
	height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: #06C755;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 1.2rem;
	font-weight: 800;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.home-line-float-btn span {
	font-size: 1.2rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.home-line-float-btn i {
	font-size: 1.35rem;
}

.home-line-float-btn:hover {
	background: #05b94f;
	transform: translateY(-2px);
	box-shadow: 0 18px 36px rgba(6, 199, 85, 0.38);
}

.home-line-float-btn:active {
	transform: translateY(0);
	box-shadow: 0 10px 20px rgba(6, 199, 85, 0.28);
}

@media (max-width: 1399.98px) {
	.home-today-summary {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1199.98px) {
	.home-dashboard-grid {
		grid-template-columns: 1fr;
	}

	.home-abnormal-panel,
	.home-user-panel {
		height: auto;
		min-height: 0;
	}

	.home-abnormal-list {
		max-height: 320px;
		overflow-y: auto;
	}
}

@media (max-width: 767.98px) {
	.home-today-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-abnormal-list {
		overflow: auto;
	}

	.home-abnormal-table-wrap {
		min-width: 720px;
	}

	.home-abnormal-table {
		min-width: 720px;
	}

	.home-abnormal-reason-text {
		max-width: 220px;
	}

	.home-line-float-btn {
		right: 16px;
		bottom: 18px;
		height: 40px;
		min-width: 54px;
		padding: 0 14px;
	}
}

@media (max-width: 480px) {
	.home-today-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-stat-tile {
		padding: 15px 16px;
	}

	.home-stat-tile strong {
		font-size: 1.8rem;
	}

	.home-abnormal-summary {
		
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.system-log-page .app-tabs {
	display: inline-flex;
	max-width: 100%;
	overflow-x: auto;
}

.system-log-page .custom-grid {
	height: 560px;
	min-height: 360px;
}

@media (max-width: 767.98px) {
	.system-log-page .app-tabs {
		display: flex;
		width: 100%;
	}

	.system-log-page .app-tab {
		flex: 1 0 auto;
	}

	.system-log-page .custom-grid {
		height: 520px;
	}
}

.system-log-pre {
	margin: 0;
	padding: 12px;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	background: #f8fafc;
	color: #344054;
	font-size: 0.84rem;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

.custom-filter-card .form-control,
.custom-filter-card .form-select {
	height: 33px;
	min-height: 33px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 0.9rem;
	border-radius: 8px;
}

.home-scope-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.home-scope-current {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid #dce3ec;
	border-radius: 999px;
	background: #ffffff;
	color: #344054;
	box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}

.home-scope-current-label {
	color: #7a8494;
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
}

.home-scope-current strong {
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.86rem;
	font-weight: 800;
	color: #26304A;
}

.home-scope-setting-btn {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 999px;
	background: #f2f4f7;
	color: #667085;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}

.home-scope-setting-btn:hover {
	background: #e4e7ec;
	color: #26304A;
}

.home-scope-modal .modal-header {
	border-bottom: 1px solid #edf0f4;
}

.home-scope-modal .modal-footer {
	border-top: 1px solid #edf0f4;
}

.home-scope-modal-subtitle {
	margin-top: 3px;
	color: #7a8494;
	font-size: 0.84rem;
}

.home-scope-empty-text {
	padding: 14px 16px;
	border: 1px dashed #cbd5df;
	border-radius: 12px;
	background: #f8fafc;
	color: #7a8494;
	font-size: 0.9rem;
}

@media (max-width: 767.98px) {
	.home-scope-actions {
		width: 100%;
		align-items: stretch;
		flex-direction: column-reverse
	}

	.home-scope-current {
		width: 100%;
		justify-content: space-between;
		border-radius: 14px;
	}

	.home-scope-current strong {
		max-width: 180px;
	}

	.home-scope-actions>.btn {
		width: 100%;
	}
}

.app-select2+.select2-container--default.select2-container--focus .select2-selection--single,
.app-select2+.select2-container--default.select2-container--open .select2-selection--single,
.app-select2+.select2-container--default.select2-container--focus .select2-selection--multiple,
.app-select2+.select2-container--default.select2-container--open .select2-selection--multiple {
	border-color: #26304A !important;
	box-shadow: 0 0 0 .16rem rgba(38, 48, 74, .12) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: #26304A !important;
	box-shadow: 0 0 0 .16rem rgba(38, 48, 74, .12) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: #f3f4f6 !important;
	color: #26304A !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background: #26304A !important;
	color: #e9ebef !important;
	font-weight: 700;
}

.legal-page {
	min-height: 100vh;
	background: #f5f7fb;
	color: #344054;
}

.legal-header {
	position: sticky;
	top: 0;
	z-index: 20;
	height: 64px;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #e4e7ec;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
}

.legal-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #26304A;
	font-size: 1.2rem;
	font-weight: 800;
	text-decoration: none;
}

.legal-brand:hover {
	color: #26304A;
	text-decoration: none;
}

.legal-brand img {
	height: 30px;
	width: auto;
	display: block;
}

.legal-back-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	background: #ffffff;
	color: #344054;
	font-size: 0.86rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.legal-back-link:hover {
	background: #f8fafc;
	border-color: #bfc6d1;
	color: #26304A;
	text-decoration: none;
}

.legal-main {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 20px 20px 56px;
}

.legal-card {
	padding: 38px 44px;
	border: 1px solid #e4e7ec;
	border-radius: 22px;
	background: #ffffff;
	box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
}

.legal-title-block {
	margin-bottom: 30px;
	padding-bottom: 22px;
	border-bottom: 1px solid #edf0f4;
}

.legal-title-block h1 {
	margin: 0;
	color: #26304A;
	font-size: 1.8rem;
	font-weight: 900;
	letter-spacing: .02em;
}

.legal-title-block p {
	margin: 8px 0 0;
	color: #7a8494;
	font-size: 0.9rem;
}

.legal-section {
	margin-bottom: 26px;
}

.legal-section:last-child {
	margin-bottom: 0;
}

.legal-section h2 {
	margin: 0 0 12px;
	color: #26304A;
	font-size: 1.05rem;
	font-weight: 850;
}

.legal-section p {
	margin: 0 0 12px;
	color: #4d5868;
	font-size: 0.95rem;
	line-height: 1.9;
}

.legal-section p:last-child {
	margin-bottom: 0;
}

.legal-section ul {
	margin: 0;
	padding-left: 1.3rem;
	color: #4d5868;
	font-size: 0.95rem;
	line-height: 1.9;
}

.legal-section li {
	margin-bottom: 6px;
}

@media (max-width: 767.98px) {
	.legal-header {
		height: auto;
		min-height: 60px;
		padding: 12px 16px;
		gap: 10px;
	}

	.legal-brand span {
		font-size: 1.1rem;
	}

	.legal-brand img {
		height: 26px;
	}

	.legal-main {
		padding: 14px 14px 40px;
	}

	.legal-card {
		padding: 26px 20px;
		border-radius: 18px;
	}

	.legal-title-block h1 {
		font-size: 1.5rem;
	}

	.legal-back-link {
		height: 32px;
		padding: 0 12px;
		font-size: 0.82rem;
		white-space: nowrap;
	}
}

.app-password-modal .modal-header {
	border-bottom: 1px solid #edf0f4;
}

.app-password-modal .modal-footer {
	border-top: 1px solid #edf0f4;
}

.app-modal-subtitle {
	margin-top: 3px;
	color: #7a8494;
	font-size: 0.84rem;
}

.dropdown-user {
	padding: 8px;
	border: 1px solid #e4e7ec;
	border-radius: 14px;
	box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
}

.dropdown-user .dropdown-user-scroll {
	padding: 0;
}

.dropdown-user .dropdown-divider {
	margin: 8px 4px;
	border-top-color: #edf0f4;
}

.dropdown-user .dropdown-item {
	min-height: 38px;
	padding: 9px 12px;
	border-radius: 10px;
	color: #344054;
	font-size: 0.9rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background-color .16s ease, color .16s ease;
}

.dropdown-user .dropdown-item:hover,
.dropdown-user .dropdown-item:focus {
	background: #f4f7fb;
	color: #26304A;
	text-decoration: none;
}

.dropdown-user .dropdown-item.active,
.dropdown-user .dropdown-item:active {
	background: #eef6ff;
	color: #2563eb;
	text-decoration: none;
}

.dropdown-user .dropdown-item.text-danger {
	color: #d92d20 !important;
}

.dropdown-user .dropdown-item.text-danger:hover,
.dropdown-user .dropdown-item.text-danger:focus {
	background: #fff1f0;
	color: #b42318 !important;
}

.dropdown-user .dropdown-item.text-danger:active {
	background: #fee4e2;
	color: #912018 !important;
}

.legal-card {
	position: relative;
}

.legal-card-top {
	position: absolute;
	top: 28px;
	right: 32px;
	z-index: 2;
	margin: 0;
	display: flex;
	justify-content: flex-end;
}

.legal-card .legal-back-link {
	height: 34px;
	padding: 0 14px;
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	background: #ffffff;
	color: #344054;
	font-size: 0.86rem;
	font-weight: 750;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.legal-card .legal-back-link:hover {
	background: #f8fafc;
	border-color: #bfc6d1;
	color: #26304A;
	text-decoration: none;
}

.import-step-panel {
	padding: 16px;
	/* 原為寫死的白底，深色模式下文字為淺色，形成白底淺字而看不見。
	   改用主題變數：淺色模式維持 #ffffff / #edf0f4。 */
	border: 1px solid var(--app-border-soft);
	border-radius: 14px;
	background: var(--app-panel);
}

.import-step-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	color: #26304A;
}

.import-step-title span {
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: #eef1f7;
	color: #5F6FA8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.78rem;
	font-weight: 850;
}

.import-step-title strong {
	font-size: 0.96rem;
	font-weight: 850;
}

.import-preview-panel {
	padding: 16px;
	border: 1px solid #edf0f4;
	border-radius: 14px;
	background: #f8fafc;
}

.import-preview-summary {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}

.import-row-errors {
	color: #b42318;
	font-size: 0.82rem;
	line-height: 1.5;
}

.import-row-warnings {
	color: #b54708;
	font-size: 0.82rem;
	line-height: 1.5;
}

.is-import-error-row {
	background: #fff6f5;
}

@media (max-width: 991.98px) {
	.import-preview-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px) {
	.import-preview-summary {
		grid-template-columns: 1fr;
	}

	.import-step-panel,
	.import-preview-panel {
		padding: 14px;
	}
}

.inspection-page .page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.inspection-page-actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-left: auto;
	max-width: 100%;
	min-width: 0;
}

.inspection-page-actions .btn {
	flex: 0 0 auto;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 640px) {
	.inspection-page .page-head {
		flex-direction: column;
		align-items: stretch;
	}

	.inspection-page-actions {
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
		gap: 6px;
		overflow-x: visible;
	}

	.inspection-page-actions .btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 7px 6px;
		font-size: 13px;
		white-space: nowrap;
	}

	.inspection-page-actions .btn i {
		margin-right: 4px !important;
	}
}

.recipient-list {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 10px;
	background: #fafafa;
}

.recipient-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #edf0f3;
	margin-bottom: 8px;
}

.recipient-item:last-child {
	margin-bottom: 0;
}

.recipient-main {
	min-width: 0;
}

.recipient-name {
	font-weight: 600;
	color: #1f2937;
}

.recipient-email {
	font-size: 12px;
	color: #6b7280;
	word-break: break-all;
}

.unavailable-detail-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	text-align: left;
}

.unavailable-detail-grid>div {
	padding: 12px 14px;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
}

.unavailable-detail-grid>div.is-full {
	grid-column: 1 / -1;
}

.unavailable-detail-grid span {
	display: block;
	margin-bottom: 4px;
	font-size: 0.78rem;
	color: #667085;
	font-weight: 700;
}

.unavailable-detail-grid strong {
	display: block;
	color: #1f2937;
	font-size: 0.95rem;
	word-break: break-word;
	white-space: pre-wrap;
}

.unavailable-signature-preview {
	margin-top: 8px;
	padding: 12px;
	border-radius: 12px;
	background: #fff;
	border: 1px dashed #cbd5e1;
	text-align: center;
}

.unavailable-signature-preview img {
	max-width: 100%;
	max-height: 180px;
	object-fit: contain;
}

.sidebar .nav > .nav-item.active > a,
.sidebar[data-background-color=white] .nav > .nav-item.active > a {
	position: relative;
    background: rgba(229, 0, 20, 0.06) !important;
    color: #b00014 !important;
	font-weight: 700;
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(185, 28, 28, 0.12);
}

.sidebar .nav > .nav-item.active > a::before,
.sidebar[data-background-color=white] .nav > .nav-item.active > a::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 24px;
	border-radius: 999px;
	background: #dc2626;
}

.sidebar .nav > .nav-item.active > a i,
.sidebar .nav > .nav-item.active > a p,
.sidebar[data-background-color=white] .nav > .nav-item.active > a i,
.sidebar[data-background-color=white] .nav > .nav-item.active > a p {
	color: #b91c1c !important;
	font-weight: 700;
}

.sidebar .nav > .nav-item.active > a i,
.sidebar[data-background-color=white] .nav > .nav-item.active > a i {
	transform: scale(1.05);
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action {
	margin: 8px 14px 14px;
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a {
	position: relative;
	min-height: 52px;
	padding: 11px 14px !important;
	border-radius: 17px !important;
	border: 1px solid rgba(38, 48, 74, 0.22) !important;
	background:
		radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 34%),
		linear-gradient(135deg, #26304A 0%, #3F4B73 58%, #53639B 100%) !important;
	color: #ffffff !important;
	box-shadow:
		0 13px 26px rgba(38, 48, 74, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.16);
	overflow: hidden;
	transition:
		transform .16s ease,
		box-shadow .16s ease,
		border-color .16s ease,
		background .16s ease;
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 4px;
	border-radius: 0 999px 999px 0;
	background: linear-gradient(180deg, #E50014 0%, #EB6D56 100%) !important;
	transform: none !important;
	box-shadow: 0 0 14px rgba(229, 0, 20, 0.36);
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a::after {
	content: "";
	position: absolute;
	right: -30px;
	top: -34px;
	width: 90px;
	height: 90px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.11);
	pointer-events: none;
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a i {
	position: relative;
	z-index: 1;
	width: 32px;
	height: 32px;
	margin-right: 11px;
	border-radius: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff !important;
	font-size: 14px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 6px 14px rgba(0, 0, 0, 0.12);
	transition: transform .16s ease, background-color .16s ease;
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a p {
	position: relative;
	z-index: 1;
	color: #ffffff !important;
	font-weight: 850;
	letter-spacing: .02em;
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a:hover,
.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a:focus {
	background:
		radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 36%),
		linear-gradient(135deg, #1F273D 0%, #3C4870 54%, #5F6FA8 100%) !important;
	color: #ffffff !important;
	border-color: rgba(38, 48, 74, 0.34) !important;
	transform: translateY(-2px);
	box-shadow:
		0 17px 34px rgba(38, 48, 74, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a:hover i,
.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a:focus i {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.20);
	transform: scale(1.06);
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a:hover p,
.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a:focus p {
	color: #ffffff !important;
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action.active > a {
	background:
		radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 36%),
		linear-gradient(135deg, #182033 0%, #303B5E 58%, #48588D 100%) !important;
	color: #ffffff !important;
	border-color: rgba(38, 48, 74, 0.40) !important;
	box-shadow:
		0 15px 30px rgba(38, 48, 74, 0.30),
		0 0 0 3px rgba(64, 75, 114, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action.active > a i,
.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action.active > a p {
	color: #ffffff !important;
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a:active {
	transform: translateY(0);
	box-shadow:
		0 8px 18px rgba(38, 48, 74, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px rgba(229, 0, 20, 0.14),
		0 15px 30px rgba(38, 48, 74, 0.28);
}

@media screen and (min-width: 992px) {
	.sidebar_minimize:not(.sidebar_minimize_hover)
	.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action {
		margin: 8px 10px 14px;
	}

	.sidebar_minimize:not(.sidebar_minimize_hover)
	.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a {
		justify-content: center;
		padding: 10px !important;
		border-radius: 15px !important;
	}

	.sidebar_minimize:not(.sidebar_minimize_hover)
	.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a i {
		margin-right: 0;
	}

	.sidebar_minimize:not(.sidebar_minimize_hover)
	.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a p {
		display: none;
	}
}

.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.nav-primary-action > a::before {
	display: none !important;
	content: none !important;
}

/* =====================================================================
   深色模式（Dark Mode）
   由 <html data-theme="dark"> 觸發；預設淺色，使用者於頂欄手動切換並記憶。
   側邊欄本身在兩種模式都是深色，故此處主要翻轉「淺色表面」。
   ===================================================================== */
:root[data-theme="dark"] {
	--app-bg: #0e1420;
	--app-surface: #0e1420;
	--app-panel: #161e2b;
	--app-border: #293445;
	--app-border-soft: #212b3a;

	--app-text-main: #d7dee8;
	--app-text-strong: #f2f5f9;
	--app-text-sub: #9aa6b6;
	--app-text-muted: #74808f;
	--app-text-soft: #8a94a4;

	--app-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.40);
	--app-shadow-md: 0 14px 34px rgba(0, 0, 0, 0.50);
}

/* 大面積底色（覆蓋原本寫死的 #f4f6f8 !important） */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .main-header,
html[data-theme="dark"] .main-header-logo,
html[data-theme="dark"] .main-panel,
html[data-theme="dark"].nav_open,
html[data-theme="dark"].nav_open body,
html[data-theme="dark"].nav_open .wrapper,
html[data-theme="dark"].nav_open .main-header,
html[data-theme="dark"].nav_open .main-header-logo,
html[data-theme="dark"].nav_open .logo-header,
html[data-theme="dark"].nav_open .navbar-header {
	background-color: var(--app-bg) !important;
}

@media screen and (max-width: 991.5px) {
	html[data-theme="dark"] .main-header,
	html[data-theme="dark"] .main-header .main-header-logo,
	html[data-theme="dark"] .main-header .logo-header,
	html[data-theme="dark"] .main-header .navbar-header {
		background-color: var(--app-bg) !important;
	}
}

html[data-theme="dark"] body {
	color: var(--app-text-main);
}

/* 頂欄 */
html[data-theme="dark"] .app-topbar {
	background: rgba(16, 22, 33, 0.92) !important;
	border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .topbar-title { color: var(--app-text-strong); }
html[data-theme="dark"] .topbar-caption { color: var(--app-text-sub); }

/* 卡片 / 面板（content-card 為多數卡片的基底） */
html[data-theme="dark"] .content-card {
	background: var(--app-panel);
	border-color: var(--app-border);
	box-shadow: var(--app-shadow-sm);
}

/* 標題文字 */
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .table-card-head h2,
html[data-theme="dark"] .content-card h2,
html[data-theme="dark"] .content-card h3,
html[data-theme="dark"] .content-card h4 {
	color: var(--app-text-strong);
}

/* 表單元件 */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea.form-control {
	background-color: #0f1826;
	border-color: var(--app-border);
	color: var(--app-text-main);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--app-text-muted); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
	background-color: #0f1826;
	color: var(--app-text-main);
	border-color: var(--app-info);
	box-shadow: none;
}
html[data-theme="dark"] .form-label { color: var(--app-text-sub); }
html[data-theme="dark"] .form-text { color: var(--app-text-muted); }
html[data-theme="dark"] .form-control[readonly] {
	color: #151515 !important;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled {
	background-color: #0c1420;
	color: var(--app-text-muted) !important;
	-webkit-text-fill-color: var(--app-text-muted);
	opacity: 1;
}

/* Select2（下拉） */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
	background-color: #0f1826;
	border-color: var(--app-border);
	color: var(--app-text-main);
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--app-text-main); }
html[data-theme="dark"] .select2-dropdown {
	background-color: var(--app-panel);
	border-color: var(--app-border);
}
html[data-theme="dark"] .select2-results__option { color: var(--app-text-main); }
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: rgba(255, 255, 255, 0.08); color: var(--app-text-strong); }
html[data-theme="dark"] .select2-search__field { background-color: #0f1826 !important; color: var(--app-text-main); }
html[data-theme="dark"] .select2-selection__choice { background-color: #24304a !important; border-color: var(--app-border) !important; color: var(--app-text-main) !important; }

/* Modal / Offcanvas */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .custom-drawer .offcanvas-header,
html[data-theme="dark"] .custom-drawer .offcanvas-body {
	background-color: var(--app-panel);
	color: var(--app-text-main);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .offcanvas-header { border-color: var(--app-border); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.4); }

/* Dropdown */
html[data-theme="dark"] .dropdown-menu {
	background-color: var(--app-panel);
	border-color: var(--app-border);
	box-shadow: var(--app-shadow-md);
}
html[data-theme="dark"] .dropdown-item { color: var(--app-text-main); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06); color: var(--app-text-strong); }
html[data-theme="dark"] .dropdown-divider { border-color: var(--app-border); }

/* 分頁 Tabs */
html[data-theme="dark"] .nav-tabs { border-color: var(--app-border); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--app-text-sub); }
html[data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--app-border-soft) var(--app-border-soft) var(--app-border); }
html[data-theme="dark"] .nav-tabs .nav-link.active {
	color: var(--app-text-strong);
	background-color: var(--app-panel);
	border-color: var(--app-border) var(--app-border) var(--app-panel);
}

/* 一般表格 */
html[data-theme="dark"] .table { color: var(--app-text-main); }
html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; border-color: var(--app-border); }
html[data-theme="dark"] .table thead th { color: var(--app-text-sub); }

/* AG Grid */
html[data-theme="dark"] .ag-theme-quartz,
html[data-theme="dark"] .custom-table-card .ag-theme-quartz {
	--ag-background-color: #131b28;
	--ag-foreground-color: #d7dee8;
	--ag-header-background-color: #0f1826;
	--ag-header-foreground-color: #9aa6b6;
	--ag-border-color: #293445;
	--ag-row-border-color: #232d3c;
	--ag-odd-row-background-color: #141d2b;
	--ag-row-hover-color: rgba(229, 0, 20, 0.12);
	--ag-selected-row-background-color: rgba(229, 0, 20, 0.16);
	--ag-control-panel-background-color: #131b28;
	--ag-input-background-color: #0f1826;
	--ag-input-border-color: #293445;
	--ag-modal-overlay-background-color: rgba(14, 20, 32, 0.6);
	--ag-popup-background-color: #161e2b;
}

/* 文字輔助色 */
html[data-theme="dark"] .text-muted { color: var(--app-text-muted) !important; }
html[data-theme="dark"] hr { border-color: var(--app-border); }

/* 頂欄主題切換鈕 */
.theme-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--app-border, #e4e7ec);
	background: transparent;
	color: var(--app-text-sub, #657285);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	margin-right: 6px;
}
.theme-toggle-btn:hover {
	background: rgba(0, 0, 0, 0.04);
	color: var(--app-text-main, #1d2736);
}
html[data-theme="dark"] .theme-toggle-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--app-text-strong);
}
.theme-toggle-btn .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle-btn .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-toggle-btn .theme-icon-dark { display: inline; }


/* =====================================================================
   深色模式補強 v2：側邊欄、頁尾、狀態標籤、表格動作鈕
   ===================================================================== */

/* ---- 側邊欄（KaiAdmin white theme → 深色）---- */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .sidebar[data-background-color="white"] {
	background: #141b27 !important;
	border-right: 1px solid var(--app-border) !important;
}
html[data-theme="dark"] .sidebar .sidebar-logo,
html[data-theme="dark"] .sidebar .logo-header,
html[data-theme="dark"] .sidebar .logo-header[data-background-color="white"] {
	background: #141b27 !important;
	border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .sidebar .nav-section-label { border-top-color: var(--app-border) !important; }
html[data-theme="dark"] .sidebar .nav-section-label span { color: #7d8a9c !important; }

/* 連結文字 / 圖示 */
html[data-theme="dark"] .sidebar .nav > .nav-item a p,
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav > .nav-item a p {
	color: #c7d0dc !important;
}
html[data-theme="dark"] .sidebar .nav > .nav-item a i,
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav > .nav-item a i {
	color: #8f9cad !important;
}
/* hover */
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav > .nav-item a:hover p,
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav > .nav-item a:focus p {
	color: #ffffff !important;
}
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav > .nav-item a:hover i,
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav > .nav-item a:focus i {
	color: #6ea8fe !important;
}
/* active */
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav > .nav-item.active > a {
	background: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav > .nav-item.active > a p,
html[data-theme="dark"] .sidebar .nav > .nav-item.active > a p {
	color: #ffffff !important;
}
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav > .nav-item.active a i,
html[data-theme="dark"] .sidebar .nav > .nav-item.active a i {
	color: #6ea8fe !important;
}
/* 每日點檢作業（primary action） */
html[data-theme="dark"] .sidebar .nav-primary-action > a {
	background: #1c2636 !important;
	border-color: var(--app-border) !important;
}
html[data-theme="dark"] .sidebar .nav-primary-action.active > a,
html[data-theme="dark"] .sidebar .nav-primary-action > a:hover {
	background: #24314a !important;
}

/* ---- 頁尾 ---- */
html[data-theme="dark"] .app-footer {
	background: var(--app-panel);
	border-top-color: var(--app-border);
}
html[data-theme="dark"] .app-footer-brand { color: var(--app-text-sub); }
html[data-theme="dark"] .app-footer-copy { color: var(--app-text-muted); }
html[data-theme="dark"] .app-footer-company { color: var(--app-text-main); }
html[data-theme="dark"] .app-footer-note { color: var(--app-text-muted); }
html[data-theme="dark"] .app-footer-link { color: var(--app-text-sub); }

/* ---- 狀態標籤 status-pill ---- */
html[data-theme="dark"] .status-pill.is-active {
	background: rgba(47, 125, 79, 0.20);
	color: #7fd6a3;
	border-color: rgba(47, 125, 79, 0.42);
}
html[data-theme="dark"] .status-pill.is-disabled {
	background: rgba(255, 255, 255, 0.06);
	color: #9aa6b6;
	border-color: var(--app-border);
}
html[data-theme="dark"] .status-pill.is-warning {
	background: rgba(180, 83, 9, 0.20);
	color: #f0c674;
	border-color: rgba(180, 83, 9, 0.42);
}

/* ---- 表格動作鈕 grid-action-btn ---- */
html[data-theme="dark"] .grid-action-btn {
	--action-bg-hover: rgba(255, 255, 255, 0.09);
	--action-border-hover: #3a475a;
	background: #1a2230;
	border-color: var(--app-border);
	color: #aeb9c8;
}
html[data-theme="dark"] .grid-action-btn:hover {
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.40);
}
html[data-theme="dark"] .grid-action-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}


/* =====================================================================
   深色模式補強 v3：首頁統計磚、彙總卡、行事曆、狀態標籤、日報表等
   ===================================================================== */

/* ---- 首頁統計磚 home-stat-tile ---- */
html[data-theme="dark"] .home-stat-tile {
	background: var(--app-panel);
	border-color: var(--app-border);
	box-shadow: var(--app-shadow-sm);
}
html[data-theme="dark"] .home-stat-tile span { color: var(--app-text-sub); }
html[data-theme="dark"] .home-stat-tile strong { color: var(--app-text-strong); }
html[data-theme="dark"] .home-stat-tile small { color: var(--app-text-muted); }
html[data-theme="dark"] .home-stat-tile.is-success { border-color: rgba(47, 125, 87, 0.45); }
html[data-theme="dark"] .home-stat-tile.is-success strong { color: #7fd6a3; }
html[data-theme="dark"] .home-stat-tile.is-danger { border-color: rgba(155, 58, 50, 0.5); }
html[data-theme="dark"] .home-stat-tile.is-danger strong { color: #e08a82; }
html[data-theme="dark"] .home-stat-tile.is-warning { border-color: rgba(183, 121, 31, 0.5); }
html[data-theme="dark"] .home-stat-tile.is-warning strong { color: #e6b866; }
html[data-theme="dark"] .home-stat-tile.is-rate {
	border-color: rgba(49, 95, 151, 0.5);
	background: linear-gradient(180deg, #141d2b 0%, var(--app-panel) 100%);
}
html[data-theme="dark"] .home-stat-tile.is-rate strong { color: #7aa8e0; }
html[data-theme="dark"] .home-stat-tile.is-line {
	border-color: rgba(47, 125, 87, 0.45);
	background: linear-gradient(180deg, #12211a 0%, var(--app-panel) 100%);
}

/* ---- 彙總卡 summary-card ---- */
html[data-theme="dark"] .summary-card {
	background: var(--app-panel);
	border-color: var(--app-border);
	box-shadow: var(--app-shadow-sm);
}
html[data-theme="dark"] .summary-label { color: var(--app-text-sub); }
html[data-theme="dark"] .summary-card strong { color: var(--app-text-strong); }
html[data-theme="dark"] .summary-card small { color: var(--app-text-muted); }
html[data-theme="dark"] .summary-card.is-warning { background: #20242b; border-color: rgba(183, 121, 31, 0.4); }
html[data-theme="dark"] .summary-card.is-success strong { color: #7fd6a3; }
html[data-theme="dark"] .summary-card.is-danger strong { color: #e08a82; }

/* ---- 移轉彙總 transfer-summary ---- */
html[data-theme="dark"] .transfer-summary { background: #22201b; border-color: rgba(160, 140, 110, 0.35); }
html[data-theme="dark"] .transfer-summary-row span { color: #c7b8a6; }
html[data-theme="dark"] .transfer-summary-row strong { color: var(--app-text-strong); }

/* ---- 行事曆 calendar-day ---- */
html[data-theme="dark"] .calendar-day { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .calendar-day:hover { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45); }
html[data-theme="dark"] .calendar-day.is-selected {
	border-color: #6ea8fe;
	box-shadow: 0 0 0 2px rgba(110, 168, 254, 0.30);
}
html[data-theme="dark"] .calendar-day-top strong { color: var(--app-text-strong); }
html[data-theme="dark"] .calendar-day-main { color: var(--app-text-sub); }
html[data-theme="dark"] .calendar-status-dot { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06); }

/* ---- 行事曆換月鈕 app-cal-nav-btn ---- */
html[data-theme="dark"] .app-cal-nav-btn { background: #1a2230; border-color: var(--app-border); color: #7aa8e0; }
html[data-theme="dark"] .app-cal-nav-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: #6ea8fe; }

/* ---- 今日未使用切換 daily-unavailable-toggle ---- */
html[data-theme="dark"] .daily-unavailable-toggle {
	background: #1a2230;
	border-color: var(--app-border);
	color: var(--app-text-sub);
}

/* ---- 點檢狀態標籤 check-status-pill ---- */
html[data-theme="dark"] .check-status-pill.is-completed {
	background: rgba(26, 117, 68, 0.22); color: #86e0aa; border-color: rgba(26, 117, 68, 0.45);
}
html[data-theme="dark"] .check-status-pill.is-missing,
html[data-theme="dark"] .check-status-pill.is-unknown,
html[data-theme="dark"] .check-status-pill.is-unavailable {
	background: rgba(255, 255, 255, 0.07); color: #aeb9c8; border-color: var(--app-border);
}
html[data-theme="dark"] .check-status-pill.is-disabled {
	background: rgba(181, 71, 8, 0.22); color: #e6b26a; border-color: rgba(181, 71, 8, 0.45);
}
html[data-theme="dark"] .check-status-pill.is-downtime {
	background: rgba(194, 65, 12, 0.22); color: #f0a06a; border-color: rgba(194, 65, 12, 0.45);
}
html[data-theme="dark"] .check-status-pill.is-today-unused {
	background: rgba(23, 92, 211, 0.22); color: #7aa8e0; border-color: rgba(23, 92, 211, 0.45);
}

/* ---- 方案標籤 mode-pill ---- */
html[data-theme="dark"] .mode-pill.is-contract {
	background: rgba(229, 0, 20, 0.15); color: #ff6b78; border-color: rgba(229, 0, 20, 0.35);
}
html[data-theme="dark"] .mode-pill.is-trial {
	background: rgba(154, 101, 15, 0.22); color: #e6b866; border-color: rgba(154, 101, 15, 0.45);
}

/* ---- 日報表 daily-record-table（文字原本太黑）---- */
html[data-theme="dark"] .daily-record-table th {
	color: var(--app-text-sub); border-bottom-color: var(--app-border);
}
html[data-theme="dark"] .daily-record-table td {
	color: var(--app-text-main); border-bottom-color: var(--app-border);
}
html[data-theme="dark"] .daily-equipment-no { color: var(--app-text-strong); }
html[data-theme="dark"] .daily-mobile-sub { color: var(--app-text-muted); }
html[data-theme="dark"] .daily-record-table tr.is-unavailable-row { background: rgba(255, 255, 255, 0.03); }

/* ---- 頂欄使用者名稱 / 下拉使用者名稱（原本太黑）---- */
html[data-theme="dark"] .profile-username,
html[data-theme="dark"] .profile-username .fw-semibold { color: var(--app-text-main) !important; }
html[data-theme="dark"] .dropdown-user .u-text h4 { color: var(--app-text-strong); }

/* 深色模式：側邊欄目前頁指示條改亮藍（與選中圖示一致） */
html[data-theme="dark"] .sidebar .nav.nav-secondary > .nav-item.active a:before,
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.active a:before {
	background: #6ea8fe !important;
}


/* =====================================================================
   深色模式補強 v4：全面盤點後補齊（首頁、表單、分頁、報表、異常等）
   ===================================================================== */

/* ---- 全域 form-label（深色下太暗，統一調亮）---- */
html[data-theme="dark"] .form-label { color: #c2ccd8 !important; }

/* ---- AG Grid：列 hover 改中性淡光（原本紅色在深色下突兀）---- */
html[data-theme="dark"] .ag-theme-quartz,
html[data-theme="dark"] .custom-table-card .ag-theme-quartz {
	--ag-row-hover-color: rgba(255, 255, 255, 0.06);
	--ag-selected-row-background-color: rgba(110, 168, 254, 0.16);
}

/* ---- 首頁統計 / 狀態 ---- */
html[data-theme="dark"] .status-item { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .home-stat-card { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .home-stat-card.is-positive { background: linear-gradient(180deg, #12211a 0%, var(--app-panel) 100%); border-color: rgba(47, 125, 87, 0.45); }
html[data-theme="dark"] .home-stat-card.is-pending { background: linear-gradient(180deg, #221c14 0%, var(--app-panel) 100%); border-color: rgba(183, 121, 31, 0.45); }

/* ---- 一般 app-table ---- */
html[data-theme="dark"] .app-table thead th { background: #0f1826; color: var(--app-text-sub); border-bottom-color: var(--app-border); }
html[data-theme="dark"] .app-table tbody td { color: var(--app-text-main); border-color: var(--app-border); }

/* ---- 首頁：範圍 / 異常 / 使用者 / 資訊 / 說明 ---- */
html[data-theme="dark"] .home-scope-current { background: var(--app-panel); border-color: var(--app-border); color: var(--app-text-main); }
html[data-theme="dark"] .home-scope-current-label { color: var(--app-text-sub); }
html[data-theme="dark"] .home-scope-current strong { color: var(--app-text-strong); }
html[data-theme="dark"] .home-scope-setting-btn { background: #1a2230; color: var(--app-text-sub); }
html[data-theme="dark"] .home-scope-setting-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--app-text-strong); }
html[data-theme="dark"] .home-scope-empty-text { background: #131b28; border-color: var(--app-border); color: var(--app-text-muted); }

html[data-theme="dark"] .home-abnormal-summary div { background: #131b28; border-color: var(--app-border); }
html[data-theme="dark"] .home-abnormal-summary span { color: var(--app-text-sub); }
html[data-theme="dark"] .home-abnormal-summary strong { color: var(--app-text-strong); }
html[data-theme="dark"] .home-abnormal-list { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .home-abnormal-table thead th { background: #0f1826; border-bottom-color: var(--app-border); color: var(--app-text-sub); }
html[data-theme="dark"] .home-abnormal-table tbody td { border-bottom-color: var(--app-border); color: var(--app-text-main); }
html[data-theme="dark"] .home-abnormal-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .home-empty-text { background: #131b28; border-color: var(--app-border); color: var(--app-text-muted); }

html[data-theme="dark"] .home-abnormal-type.is-downtime { background: rgba(194, 65, 12, 0.20); color: #f0a06a; border-color: rgba(194, 65, 12, 0.45); }
html[data-theme="dark"] .home-abnormal-type.is-disabled { background: rgba(185, 28, 28, 0.20); color: #e88a82; border-color: rgba(185, 28, 28, 0.45); }
html[data-theme="dark"] .home-abnormal-type.is-abnormal { background: rgba(180, 83, 9, 0.20); color: #e6b866; border-color: rgba(180, 83, 9, 0.45); }
html[data-theme="dark"] .home-abnormal-type.is-manager-created { background: rgba(29, 78, 216, 0.20); color: #7aa8e0; border-color: rgba(29, 78, 216, 0.45); }

html[data-theme="dark"] .home-user-card { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .home-info-list { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .home-info-row { border-bottom-color: var(--app-border); }
html[data-theme="dark"] .home-info-row span { color: var(--app-text-sub); }
html[data-theme="dark"] .home-info-row strong { color: var(--app-text-strong); }
html[data-theme="dark"] .home-help-card { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .home-help-icon { background: #2a2419; color: #d8b98a; }
html[data-theme="dark"] .home-help-link { background: #1a2230; border-color: var(--app-border); color: var(--app-text-main); }
html[data-theme="dark"] .home-help-link:hover { background: #6ea8fe; border-color: #6ea8fe; color: #0e1420; }

/* ---- 分頁 app-tabs（表單樣板等）---- */
html[data-theme="dark"] .app-tabs { background: #131b28; border-color: var(--app-border); }
html[data-theme="dark"] .app-tab { color: var(--app-text-sub); }
html[data-theme="dark"] .app-tab:hover { color: var(--app-text-strong); background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .app-tab.is-active { color: var(--app-text-strong); background: var(--app-panel); }
html[data-theme="dark"] .app-tab-index { background: #3a475a; }
html[data-theme="dark"] .app-tab.is-active .app-tab-index { background: #6ea8fe; color: #0e1420; }

/* ---- 表單樣板：題目卡 / 新增題目 ---- */
html[data-theme="dark"] .question-card { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .question-card-title { color: var(--app-text-strong); }
html[data-theme="dark"] .question-remove-btn { background: #24304a; color: var(--app-text-sub); }
html[data-theme="dark"] .add-question-btn { background: #131b28; border-color: #3a475a; color: var(--app-text-main); }
html[data-theme="dark"] .add-question-btn:hover { background: rgba(229, 0, 20, 0.10); border-color: rgba(229, 0, 20, 0.40); }

/* ---- 站點 LINE 設定：推播時段 / 綁定盒 / 收播人 ---- */
html[data-theme="dark"] .line-rule-row { background: #131b28; border-color: var(--app-border); }
html[data-theme="dark"] .line-bind-box { background: #131b28; border-color: var(--app-border); }
html[data-theme="dark"] .line-binding-command-box { background: var(--app-panel); border-color: #3a475a; }
html[data-theme="dark"] .line-binding-command-row code { background: #0f1826; color: #e6edf5; }
html[data-theme="dark"] .recipient-list { background: #131b28; border-color: var(--app-border); }
html[data-theme="dark"] .recipient-item { background: var(--app-panel); border-color: var(--app-border); }

/* ---- 點檢樣板選擇 inspection-template ---- */
html[data-theme="dark"] .inspection-template-box { background: #131b28; border-color: var(--app-border); }
html[data-theme="dark"] .inspection-template-option label { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .inspection-template-option label::before { background: #0f1826; border-color: #3a475a; }
html[data-theme="dark"] .inspection-template-option input:checked + label { background: rgba(229, 0, 20, 0.14); border-color: rgba(229, 0, 20, 0.42); }

/* ---- 點檢明細頁題卡 ---- */
html[data-theme="dark"] .inspection-question-card { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .inspection-question-card.is-bad-selected { background: #24191a; border-color: rgba(224, 138, 130, 0.5); }

/* ---- 報表類型選項 ---- */
html[data-theme="dark"] .report-type-option { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .report-type-option::before { background: #0f1826; border-color: #3a475a; }
html[data-theme="dark"] .report-type-option.is-active { background: #1c2636; border-color: rgba(110, 168, 254, 0.45); }
html[data-theme="dark"] .report-type-option.is-active::before { background: #6ea8fe; border-color: #6ea8fe; }
html[data-theme="dark"] .report-type-option strong { color: var(--app-text-strong); }
html[data-theme="dark"] .report-type-option span { color: var(--app-text-sub); }
html[data-theme="dark"] .report-current-filter { background: #131b28; border-color: var(--app-border); }
html[data-theme="dark"] .report-current-filter span { color: var(--app-text-sub); }
html[data-theme="dark"] .report-current-filter strong { color: var(--app-text-strong); }

/* ---- 異常類型標籤 ---- */
html[data-theme="dark"] .abnormal-type-pill { background: rgba(255, 255, 255, 0.07); color: #aeb9c8; }
html[data-theme="dark"] .abnormal-type-pill.is-inspection-abnormal { background: rgba(185, 28, 28, 0.20); color: #e88a82; }
html[data-theme="dark"] .abnormal-type-pill.is-downtime { background: rgba(194, 65, 12, 0.20); color: #f0a06a; }
html[data-theme="dark"] .abnormal-type-pill.is-disabled { background: rgba(255, 255, 255, 0.07); color: #c2ccd8; }

/* ---- 異常處理抽屜 ---- */
html[data-theme="dark"] .process-summary-card { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .process-summary-grid div { background: #131b28; }
html[data-theme="dark"] .process-summary-grid span { color: var(--app-text-sub); }
html[data-theme="dark"] .process-summary-grid strong { color: var(--app-text-strong); }
html[data-theme="dark"] .process-section { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .process-section-head h6 { color: var(--app-text-strong); }

/* 深色模式：AG Grid 捲軸配色（水平/垂直/內容捲動區） */
html[data-theme="dark"] .ag-body-horizontal-scroll-viewport,
html[data-theme="dark"] .ag-body-vertical-scroll-viewport,
html[data-theme="dark"] .ag-body-viewport,
html[data-theme="dark"] .ag-center-cols-viewport {
	scrollbar-width: thin;
	scrollbar-color: #3a475a #131b28;
}
html[data-theme="dark"] .ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
html[data-theme="dark"] .ag-body-vertical-scroll-viewport::-webkit-scrollbar,
html[data-theme="dark"] .ag-body-viewport::-webkit-scrollbar,
html[data-theme="dark"] .ag-center-cols-viewport::-webkit-scrollbar {
	width: 12px;
	height: 12px;
	background: #131b28;
}
html[data-theme="dark"] .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
html[data-theme="dark"] .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track,
html[data-theme="dark"] .ag-body-viewport::-webkit-scrollbar-track,
html[data-theme="dark"] .ag-center-cols-viewport::-webkit-scrollbar-track {
	background: #131b28;
}
html[data-theme="dark"] .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
html[data-theme="dark"] .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb,
html[data-theme="dark"] .ag-body-viewport::-webkit-scrollbar-thumb,
html[data-theme="dark"] .ag-center-cols-viewport::-webkit-scrollbar-thumb {
	background: #3a475a;
	border-radius: 8px;
	border: 3px solid #131b28;
}
html[data-theme="dark"] .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .ag-body-viewport::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .ag-center-cols-viewport::-webkit-scrollbar-thumb:hover {
	background: #4a5a72;
}

/* 深色模式：AG Grid 水平捲軸兩側補位塊（對齊釘選欄）配色 */
html[data-theme="dark"] .ag-horizontal-right-spacer,
html[data-theme="dark"] .ag-horizontal-left-spacer {
	background: #131b28;
	border-color: var(--app-border) !important;
}

/* 深色模式：系統紀錄程式碼區 + 收播人名稱/Email（原本太黑） */
html[data-theme="dark"] .system-log-pre {
	background: #0f1826;
	border-color: var(--app-border);
	color: var(--app-text-main);
}
html[data-theme="dark"] .recipient-name { color: var(--app-text-strong); }
html[data-theme="dark"] .recipient-email { color: var(--app-text-muted); }

/* 深色模式：spacer 本身有 overflow-x:scroll，會顯示自己的捲軸 → 也要套色 */
html[data-theme="dark"] .ag-horizontal-left-spacer,
html[data-theme="dark"] .ag-horizontal-right-spacer {
	scrollbar-width: thin;
	scrollbar-color: #3a475a #131b28;
}
html[data-theme="dark"] .ag-horizontal-left-spacer::-webkit-scrollbar,
html[data-theme="dark"] .ag-horizontal-right-spacer::-webkit-scrollbar {
	width: 12px;
	height: 12px;
	background: #131b28;
}
html[data-theme="dark"] .ag-horizontal-left-spacer::-webkit-scrollbar-track,
html[data-theme="dark"] .ag-horizontal-right-spacer::-webkit-scrollbar-track {
	background: #131b28;
}
html[data-theme="dark"] .ag-horizontal-left-spacer::-webkit-scrollbar-thumb,
html[data-theme="dark"] .ag-horizontal-right-spacer::-webkit-scrollbar-thumb {
	background: #3a475a;
	border-radius: 8px;
	border: 3px solid #131b28;
}
html[data-theme="dark"] .ag-horizontal-left-spacer::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .ag-horizontal-right-spacer::-webkit-scrollbar-thumb:hover {
	background: #4a5a72;
}

/* 深色模式：側邊欄選單 hover 改中性淡白（原本是品牌紅底/紅字，深色下突兀） */
html[data-theme="dark"] .sidebar .nav.nav-secondary > .nav-item > a:hover,
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item > a:hover {
	background: rgba(255, 255, 255, 0.07) !important;
	color: #ffffff !important;
}
html[data-theme="dark"] .sidebar .nav.nav-secondary > .nav-item > a:hover p,
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item > a:hover p {
	color: #ffffff !important;
}
html[data-theme="dark"] .sidebar .nav.nav-secondary > .nav-item > a:hover i,
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item > a:hover i {
	color: #6ea8fe !important;
}

/* =====================================================================
   深色模式：SweetAlert（app-swal-*）
   ===================================================================== */
html[data-theme="dark"] .swal-modal[class*="app-swal-"] {
	background: var(--app-panel);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--app-border);
}
html[data-theme="dark"] .swal-modal[class*="app-swal-"] .swal-title { color: var(--app-text-strong); }
html[data-theme="dark"] .swal-modal[class*="app-swal-"] .swal-text { color: var(--app-text-sub); }
html[data-theme="dark"] .swal-modal[class*="app-swal-"] .swal-footer {
	background: #131b28;
	border-top-color: var(--app-border);
}

/* 次要 / 取消按鈕（兩套 class 命名都含括）*/
html[data-theme="dark"] .swal-modal[class*="app-swal-"] .swal-button.app-swal-btn-secondary,
html[data-theme="dark"] .swal-button.btn-outline-secondary,
html[data-theme="dark"] .swal-button--cancel,
html[data-theme="dark"] .swal-button--record {
	background: #1a2230 !important;
	border-color: var(--app-border) !important;
	color: var(--app-text-main) !important;
}
html[data-theme="dark"] .swal-modal[class*="app-swal-"] .swal-button.app-swal-btn-secondary:hover,
html[data-theme="dark"] .swal-button.btn-outline-secondary:hover,
html[data-theme="dark"] .swal-button--cancel:hover,
html[data-theme="dark"] .swal-button--record:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: #3a475a !important;
	color: var(--app-text-strong) !important;
}

/* 主要按鈕（原本深藍在深色面板上對比不足 → 調亮一階）*/
html[data-theme="dark"] .swal-modal[class*="app-swal-"] .swal-button.app-swal-btn-primary,
html[data-theme="dark"] .swal-button.btn-primary,
html[data-theme="dark"] .swal-button--execute {
	background: #3a4a6a !important;
	border-color: #3a4a6a !important;
	color: #ffffff !important;
}
html[data-theme="dark"] .swal-modal[class*="app-swal-"] .swal-button.app-swal-btn-primary:hover,
html[data-theme="dark"] .swal-button.btn-primary:hover,
html[data-theme="dark"] .swal-button--execute:hover {
	background: #45577c !important;
	border-color: #45577c !important;
}

/* 深色模式：側邊欄選單指示條 base（hover 展開那條）也改亮藍 */
html[data-theme="dark"] .sidebar .nav.nav-secondary > .nav-item > a::before,
html[data-theme="dark"] .sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item > a::before {
	background: #6ea8fe !important;
}

/* 深色模式：select2 邊框（原規則 border 帶 !important，需同樣 !important 才蓋得過）*/
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
	background: #0f1826 !important;
	border-color: var(--app-border) !important;
}

/* 深色模式：首頁幾處深色文字調亮 */
html[data-theme="dark"] .home-user-main strong,
html[data-theme="dark"] .home-help-body strong,
html[data-theme="dark"] .home-abnormal-equipment { color: var(--app-text-strong); }
html[data-theme="dark"] .home-abnormal-reason-text { color: var(--app-text-main); }


/* 深色模式：點檢作業（掃描/明細）頁元件 */
html[data-theme="dark"] .inspection-date-pill,
html[data-theme="dark"] .inspection-progress-pill { background: #1a2230; color: var(--app-text-main); }
html[data-theme="dark"] .inspection-info-item { background: #131b28; border-color: var(--app-border); }
html[data-theme="dark"] .inspection-info-item span { color: var(--app-text-sub); }
html[data-theme="dark"] .inspection-info-item strong { color: var(--app-text-strong); }
html[data-theme="dark"] .inspection-progress-track { background: #0f1826; }
html[data-theme="dark"] .inspection-progress-bar { background: #6ea8fe; }
html[data-theme="dark"] .inspection-choice { background: #131b28; border-color: var(--app-border); color: var(--app-text-main); }
html[data-theme="dark"] .inspection-submit-bar { background: var(--app-panel); border-top-color: var(--app-border); }


/* 深色模式：點檢標題文字（原本太黑）+ 題號 index */
html[data-theme="dark"] .inspection-section-title,
html[data-theme="dark"] .inspection-submit-title { color: var(--app-text-strong); }
html[data-theme="dark"] .inspection-question-index { background: #24304a; color: #cdd8e6; }

/* =====================================================================
   深色模式：全域捲軸（頁面 x/y 及所有捲動容器）
   ===================================================================== */
html[data-theme="dark"] { scrollbar-width: thin; scrollbar-color: #3a475a #0e1420; }
html[data-theme="dark"]::-webkit-scrollbar,
html[data-theme="dark"] ::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
html[data-theme="dark"]::-webkit-scrollbar-track,
html[data-theme="dark"] ::-webkit-scrollbar-track {
	background: #0e1420;
}
html[data-theme="dark"]::-webkit-scrollbar-thumb,
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
	background: #3a475a;
	border-radius: 8px;
	border: 3px solid #0e1420;
}
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
	background: #4a5a72;
}
html[data-theme="dark"]::-webkit-scrollbar-corner,
html[data-theme="dark"] ::-webkit-scrollbar-corner {
	background: #0e1420;
}

/* 深色模式：outline 深色/次要按鈕（深底上看不到）*/
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-outline-secondary {
	color: var(--app-text-main);
	border-color: var(--app-border);
}
html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-dark:focus,
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus {
	background-color: rgba(255, 255, 255, 0.10);
	border-color: #6a7688;
	color: var(--app-text-strong);
}

/* 深色模式：inspection-scan 掃描頁專屬元件（簽名板保留白底、相機本來就深色） */
html[data-theme="dark"] .inspection-scan-page { background: var(--app-bg); }
html[data-theme="dark"] .inspection-scan-header { background: var(--app-panel); border-bottom-color: var(--app-border); }
html[data-theme="dark"] .inspection-scan-header h1 { color: var(--app-text-strong); }
html[data-theme="dark"] .inspection-scan-header p { color: var(--app-text-sub); }
html[data-theme="dark"] .inspection-scan-back { background: #1a2230; border-color: var(--app-border); color: var(--app-text-main); }
html[data-theme="dark"] .inspection-scan-card { background: var(--app-panel); border-color: var(--app-border); }
html[data-theme="dark"] .inspection-scan-status { color: var(--app-text-sub); }
html[data-theme="dark"] .inspection-manual-divider { color: var(--app-text-muted); }
html[data-theme="dark"] .inspection-manual-divider::before { background: var(--app-border); }
html[data-theme="dark"] .inspection-manual-divider span { background: var(--app-panel); }
html[data-theme="dark"] .empty-icon { background: #24304a; color: #cdd8e6; }
html[data-theme="dark"] .empty-state h3 { color: var(--app-text-strong); }
html[data-theme="dark"] .empty-state p { color: var(--app-text-sub); }
html[data-theme="dark"] .inspection-signature-preview { background: #131b28; border-color: var(--app-border); }
html[data-theme="dark"] .inspection-record-remark { background: #131b28; border-color: var(--app-border); color: var(--app-text-main); }

/* 深色模式：logo 換成深色版（文字亮、圖標不變）；用 content 替換 <img> 顯示圖，免改 markup */
html[data-theme="dark"] img.navbar-brand {
	content: url('/assets/img/logo-dark.png');
}

/* 深色模式：SweetAlert 成功圖示的「白色遮罩」改用面板色（原本 #fff 在深底上會露出白塊）*/
html[data-theme="dark"] .swal-icon--success__hide-corners,
html[data-theme="dark"] .swal-icon--success::before,
html[data-theme="dark"] .swal-icon--success::after {
	background: var(--app-panel) !important;
	background-color: var(--app-panel) !important;
}

/* 移轉確認按鈕：原本沒有自己的樣式（裸 .btn，深色下看不到）→ 做成實心主色按鈕 */
.app-transfer-submit-btn {
	min-height: 42px;
	padding: 0 16px;
	font-weight: 600;
	border-radius: 10px;
	background: #404b72;
	border: 1px solid #404b72;
	color: #ffffff;
}
.app-transfer-submit-btn:hover,
.app-transfer-submit-btn:focus {
	background: #53639B;
	border-color: #53639B;
	color: #ffffff;
}
.app-transfer-submit-btn:active {
	background: #48588D;
	border-color: #48588D;
	color: #ffffff;
}


/* ------------------------------------------------------------------
   匯入 UI 的深色模式修正（2026-08-21）

   .import-step-card 與 .form-section-title 已改用主題變數，兩種模式皆正確。
   以下是同一區塊內其他仍寫死淺色的元素——它們自身的底色與文字是成對的，
   所以「讀得到」，但在深色頁面中會變成一塊突兀的白色區塊。
   ------------------------------------------------------------------ */

html[data-theme="dark"] .import-summary-item {
	background: var(--app-surface);
	border-color: var(--app-border);
}

html[data-theme="dark"] .import-summary-item span {
	color: var(--app-text-sub);
}

html[data-theme="dark"] .import-summary-item strong {
	color: var(--app-text-strong);
}

html[data-theme="dark"] .import-preview-table-wrap {
	border-color: var(--app-border);
}

html[data-theme="dark"] .import-preview-table td,
html[data-theme="dark"] .import-preview-table th {
	background: var(--app-panel);
	border-color: var(--app-border);
	color: var(--app-text-main);
}

/* 錯誤與成功文字：深色底上原色太暗，改用較亮的同色系 */
html[data-theme="dark"] .import-error-list,
html[data-theme="dark"] .import-summary-item.is-error strong {
	color: #f08b8b;
}

html[data-theme="dark"] .import-valid-text {
	color: #6fcf97;
}

/* 點檢紀錄匯入（check-record）的步驟面板與預覽區 */

html[data-theme="dark"] .import-step-title {
	color: var(--app-text-strong);
}

html[data-theme="dark"] .import-step-title span {
	background: var(--app-border);
	color: var(--app-text-main);
}

html[data-theme="dark"] .import-preview-panel {
	background: var(--app-surface);
	border-color: var(--app-border);
}

/* 錯誤／警告文字：原色在深底上太暗 */
html[data-theme="dark"] .import-row-errors {
	color: #f08b8b;
}

html[data-theme="dark"] .import-row-warnings {
	color: #e0a458;
}

html[data-theme="dark"] .is-import-error-row {
	background: rgba(240, 139, 139, .12);
}