/* Scoped to the login page. Other website pages keep their own look. */

html[data-theme] body[data-path="login"] .page-card {
	padding: 32px;
	border: 1px solid var(--g-edge-strong);
	border-radius: var(--g-radius-lg);
	background: var(--g-panel-strong);
	box-shadow: var(--g-shadow);
	backdrop-filter: var(--g-blur);
	-webkit-backdrop-filter: var(--g-blur);
}

html[data-theme] body[data-path="login"] .form-control {
	color: var(--ink-gray-9);
	background-color: var(--surface-gray-2);
	border: 1px solid var(--g-edge);
	border-radius: 10px;
}

html[data-theme] body[data-path="login"] .form-control::placeholder {
	color: var(--placeholder-color);
}

html[data-theme] body[data-path="login"] .es-button {
	--bt-solid-bg: var(--g-accent);
	--bt-solid-bg-hover: var(--g-accent-hover);
	--bt-solid-bg-active: var(--g-accent);
	--bt-solid-fg: #fff;
	border-radius: 10px;
}

html[data-theme] body[data-path="login"] .web-footer,
html[data-theme] body[data-path="login"] .navbar,
html[data-theme] body[data-path="login"] .page-content-wrapper,
html[data-theme] body[data-path="login"] main.container {
	background: transparent;
}

.g-theme-toggle {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 1040;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	color: var(--ink-gray-8);
	cursor: pointer;
	border: 1px solid var(--g-edge-strong);
	border-radius: 50%;
	background: var(--g-overlay);
	box-shadow: var(--g-shadow);
}

.g-theme-toggle svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
}