/* ---------- Theme switch (Light / Dark / System) ---------- */
.theme-switch-wrap {
	align-items: center;
	display: flex;
}

.theme-switch {
	background: #f0f2f7;
	border: 1px solid #e4e8f0;
	border-radius: 8px;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
}

.theme-switch__opt {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 6px;
	color: #6c757d;
	cursor: pointer;
	display: inline-flex;
	height: 28px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color .2s ease-out, color .2s ease-out, box-shadow .2s ease-out;
	width: 28px;
}

.theme-switch__opt i {
	font-size: 16px;
	pointer-events: none;
}

.theme-switch__opt:hover {
	background: #e4e8f0;
	color: #495057;
}

.theme-switch__opt.active {
	background: #fff;
	box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
	color: #008cff;
}

.theme-switch__opt:focus-visible {
	outline: 2px solid #008cff;
	outline-offset: 1px;
}

html.dark-theme .theme-switch {
	background: #1e1e1e;
	border-color: #333;
}

html.dark-theme .theme-switch__opt {
	color: #a0a8b3;
}

html.dark-theme .theme-switch__opt:hover {
	background: #2a2a2a;
	color: #c2cbd6;
}

html.dark-theme .theme-switch__opt.active {
	background: #333;
	box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
	color: #6ec1ff;
}

/* ---------- Guest / auth pages (login page uses its own head) ---------- */
html.dark-theme body {
	background: #1b1b1b;
}

html.dark-theme .auth-cover-left {
	background: #141414;
}

html.dark-theme .auth-cover-left svg,
html.dark-theme .auth-cover-left img {
	opacity: .85;
}

html.dark-theme .section-authentication-cover .card {
	background: #232323;
}

html.dark-theme .section-authentication-cover .card .card-body {
	color: #c2cbd6;
}

html.dark-theme .form-control,
html.dark-theme .form-select {
	background-color: #2a2a2a;
	border-color: #3a3a3a;
	color: #e9ecef;
}

html.dark-theme .form-control:focus,
html.dark-theme .form-select:focus {
	background-color: #2a2a2a;
	border-color: #008cff;
	color: #e9ecef;
}

html.dark-theme .form-control::placeholder {
	color: #8a93a0;
}

html.dark-theme .auth-cover-right .card .mb-3 a,
html.dark-theme .section-authentication-cover a:not(.btn) {
	color: #6ec1ff;
}

html.dark-theme .divider-text::before,
html.dark-theme .divider-text::after {
	border-color: #3a3a3a;
}

@media (prefers-reduced-motion: reduce) {
	.theme-switch__opt {
		transition: none;
	}
}