.ui-segmented-toggle,
:is(#main-menu, .help-production-home) .ui-segmented-toggle {
	--ui-segmented-toggle-gap: 6px;
	--ui-segmented-toggle-padding: 5px;
	--ui-segmented-toggle-button-padding: 6px 12px;
	display: inline-flex;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: var(--ui-segmented-toggle-gap);
	box-sizing: border-box;
	padding: var(--ui-segmented-toggle-padding);
	border: 1px solid #cfe3f0;
	border-radius: 999px;
	background: #ffffff;
	vertical-align: middle;
}

.ui-segmented-toggle.ui-segmented-toggle--compact,
:is(#main-menu, .help-production-home) .ui-segmented-toggle.ui-segmented-toggle--compact {
	--ui-segmented-toggle-gap: 4px;
	--ui-segmented-toggle-padding: 4px;
	--ui-segmented-toggle-button-padding: 4px 9px;
}

.btn-group.ui-segmented-toggle > .btn,
:is(#main-menu, .help-production-home) .btn-group.ui-segmented-toggle > .btn,
.ui-segmented-toggle > button,
.ui-segmented-toggle > .btn-group > .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	float: none;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: var(--ui-segmented-toggle-button-padding);
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #557689;
	font-weight: 600;
	line-height: 1.42857143;
	white-space: nowrap;
	transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease, filter 160ms ease;
}

.btn-group.ui-segmented-toggle > .btn + .btn,
:is(#main-menu, .help-production-home) .btn-group.ui-segmented-toggle > .btn + .btn,
.ui-segmented-toggle > button + button,
.ui-segmented-toggle > .btn-group > .btn + .btn {
	margin-left: 0;
}

/* Bootstrap's first/middle/last btn-group rules square the touching corners. */
.btn-group.ui-segmented-toggle > .btn:first-child:not(:last-child),
.btn-group.ui-segmented-toggle > .btn:not(:first-child):not(:last-child),
.btn-group.ui-segmented-toggle > .btn:last-child:not(:first-child),
.ui-segmented-toggle > .btn-group > .btn:first-child:not(:last-child),
.ui-segmented-toggle > .btn-group > .btn:not(:first-child):not(:last-child),
.ui-segmented-toggle > .btn-group > .btn:last-child:not(:first-child) {
	border-radius: 999px;
}

.btn-group.ui-segmented-toggle > .btn:hover,
:is(#main-menu, .help-production-home) .btn-group.ui-segmented-toggle > .btn:hover,
.ui-segmented-toggle > button:hover,
.ui-segmented-toggle > .btn-group > .btn:hover {
	border: 0;
	background: #ffffff;
	box-shadow: var(--ui-press-neutral-hover-shadow, 0 3px 0 rgba(94, 126, 148, 0.52), 0 6px 10px rgba(34, 62, 82, 0.17));
	color: #557689;
	filter: saturate(1.1) brightness(1.03) contrast(1.01);
	transform: translateY(-1px);
}

.btn-group.ui-segmented-toggle > .btn.active,
.btn-group.ui-segmented-toggle > .btn.is-active,
:is(#main-menu, .help-production-home) .btn-group.ui-segmented-toggle > .btn.active,
:is(#main-menu, .help-production-home) .btn-group.ui-segmented-toggle > .btn.is-active,
.ui-segmented-toggle > button.active,
.ui-segmented-toggle > button.is-active,
.ui-segmented-toggle > .btn-group > .btn.active,
.ui-segmented-toggle > .btn-group > .btn.is-active {
	border: 0;
	background: linear-gradient(180deg, #e7f6ff 0%, #d8edfa 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 10px rgba(31, 109, 150, 0.18);
	color: #0f648f;
}

.btn-group.ui-segmented-toggle > .btn:focus-visible,
.ui-segmented-toggle > button:focus-visible,
.ui-segmented-toggle > .btn-group > .btn:focus-visible {
	outline: 2px solid rgba(15, 100, 143, 0.38);
	outline-offset: 1px;
}

.btn-group.ui-segmented-toggle > .btn[disabled],
.btn-group.ui-segmented-toggle > .btn.disabled,
.ui-segmented-toggle > button[disabled],
.ui-segmented-toggle > button.disabled,
.ui-segmented-toggle > .btn-group > .btn[disabled],
.ui-segmented-toggle > .btn-group > .btn.disabled {
	cursor: not-allowed;
	opacity: 0.5;
	box-shadow: none;
}

/* View-mode transitions may temporarily disable controls; keep the pre-click cursor stable. */
.ui-segmented-toggle.ui-segmented-toggle--view-switch > .btn,
.ui-segmented-toggle.ui-segmented-toggle--view-switch > button,
.ui-segmented-toggle.ui-segmented-toggle--view-switch > .btn-group > .btn {
	cursor: pointer !important;
}

html.darkmode .ui-segmented-toggle,
html.darkmode :is(#main-menu, .help-production-home) .ui-segmented-toggle,
html.darkmode :is(#modal-interval-plan, .receipts-interval-plan-modal) .ui-segmented-toggle {
	border-color: #365564;
	background: #182830;
}

html.darkmode .btn-group.ui-segmented-toggle > .btn,
html.darkmode :is(#main-menu, .help-production-home) .btn-group.ui-segmented-toggle > .btn,
html.darkmode :is(#modal-interval-plan, .receipts-interval-plan-modal) .ui-segmented-toggle > .btn,
html.darkmode .ui-segmented-toggle > button,
html.darkmode .ui-segmented-toggle > .btn-group > .btn {
	color: #aac5d3;
}

html.darkmode .btn-group.ui-segmented-toggle > .btn:hover,
html.darkmode :is(#main-menu, .help-production-home) .btn-group.ui-segmented-toggle > .btn:hover,
html.darkmode :is(#modal-interval-plan, .receipts-interval-plan-modal) .ui-segmented-toggle > .btn:hover,
html.darkmode .ui-segmented-toggle > button:hover,
html.darkmode .ui-segmented-toggle > .btn-group > .btn:hover {
	background: #253e4b;
	box-shadow: 0 3px 0 rgba(7, 15, 19, 0.72), 0 6px 10px rgba(0, 0, 0, 0.32);
	color: #d7edf8;
}

html.darkmode .btn-group.ui-segmented-toggle > .btn.active,
html.darkmode .btn-group.ui-segmented-toggle > .btn.is-active,
html.darkmode :is(#main-menu, .help-production-home) .btn-group.ui-segmented-toggle > .btn.active,
html.darkmode :is(#main-menu, .help-production-home) .btn-group.ui-segmented-toggle > .btn.is-active,
html.darkmode :is(#modal-interval-plan, .receipts-interval-plan-modal) .ui-segmented-toggle > .btn.active,
html.darkmode :is(#modal-interval-plan, .receipts-interval-plan-modal) .ui-segmented-toggle > .btn.is-active,
html.darkmode .ui-segmented-toggle > button.active,
html.darkmode .ui-segmented-toggle > button.is-active,
html.darkmode .ui-segmented-toggle > .btn-group > .btn.active,
html.darkmode .ui-segmented-toggle > .btn-group > .btn.is-active {
	background: linear-gradient(180deg, #28566d 0%, #21485c 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px rgba(0, 0, 0, 0.24);
	color: #e1f4ff;
}

@media (prefers-reduced-motion: reduce) {
	.ui-segmented-toggle > button,
	.btn-group.ui-segmented-toggle > .btn,
	.ui-segmented-toggle > .btn-group > .btn {
		transition: none;
	}
}