/* Shared receipt-row, progress, and hover-card styles used by receipts table embeds. */
/* Extracted from login_receipts/receipts_table.php */

	/* Dynamic column width based on viewport */
	:root {
		--row-actions-column-width: 42px;
		--category-column-width: clamp(152px, 12.5vw, 176px);
		--receipts-column-width: clamp(168px, 14vw, 196px);
		--fixed-columns-width: calc(
			var(--row-actions-column-width) +
			var(--category-column-width) +
			var(--receipts-column-width)
		);

		/* Progress palette and derived tokens are global in user.css. */
		/* Distribution bars can be themed independently while still being base driven */
		--distribution-planned-base: var(--progress-planned-base);
		--distribution-planned-light: var(--progress-planned-light);
		--distribution-planned-done-base: var(--progress-done-base);
		--distribution-planned-done-light: var(--progress-done-light);
		--distribution-actual-base: var(--progress-actual-base);
		--distribution-actual-light: var(--progress-actual-light);

		/* Status/receipt semantic palette (brighter + chart-aligned) */
		--state-done-top: color-mix(in srgb, var(--progress-done-base) 30%, white);
		--state-done-base: color-mix(in srgb, var(--progress-done-base) 62%, white);
		--state-done-border: color-mix(in srgb, var(--progress-done-base) 58%, black);
		--state-done-text: color-mix(in srgb, var(--progress-done-base) 46%, black);
		--state-done-hover-top: color-mix(in srgb, var(--state-done-top) 88%, black);
		--state-done-hover-base: color-mix(in srgb, var(--state-done-base) 88%, black);
		--state-done-hover-border: color-mix(in srgb, var(--state-done-border) 92%, black);

		--state-active-top: color-mix(in srgb, var(--progress-actual-base) 28%, white);
		--state-active-base: color-mix(in srgb, var(--progress-actual-base) 64%, white);
		--state-active-border: color-mix(in srgb, var(--progress-actual-base) 60%, black);
		--state-active-text: color-mix(in srgb, var(--progress-actual-base) 48%, black);

		--state-delayed-top: color-mix(in srgb, var(--progress-planned-base) 30%, white);
		--state-delayed-base: color-mix(in srgb, var(--progress-planned-base) 66%, white);
		--state-delayed-border: color-mix(in srgb, var(--progress-planned-base) 60%, black);
		--state-delayed-text: color-mix(in srgb, var(--progress-planned-base) 52%, black);

		--state-outstanding-top: #ffe4c5;
		--state-outstanding-base: #f8c286;
		--state-outstanding-border: #d79a5a;
		--state-outstanding-text: #6b4115;

		--state-overdue-top: #f8cec8;
		--state-overdue-base: #e98f82;
		--state-overdue-border: #c8675b;
		--state-overdue-text: #65231f;
		--state-overdue-hover-top: color-mix(in srgb, var(--state-overdue-top) 90%, black);
		--state-overdue-hover-base: color-mix(in srgb, var(--state-overdue-base) 90%, black);
		--state-overdue-hover-border: color-mix(in srgb, var(--state-overdue-border) 90%, black);

		--state-missing-top: #f9dad6;
		--state-missing-base: #efb6af;
		--state-missing-border: #d99289;
		--state-missing-text: #7f3a34;
		--state-missing-hover-top: color-mix(in srgb, var(--state-missing-top) 90%, black);
		--state-missing-hover-base: color-mix(in srgb, var(--state-missing-base) 90%, black);
		--state-missing-hover-border: color-mix(in srgb, var(--state-missing-border) 90%, black);

		--state-waiting-top: #eaedf1;
		--state-waiting-base: #ced5dc;
		--state-waiting-border: #a8b1bb;
		--state-waiting-text: #44525f;

		--state-skipped-top: #f3f6f8;
		--state-skipped-base: #dde3e9;
		--state-skipped-border: #bec7d0;
		--state-skipped-text: #596673;
	}


	/* Remove default table styling */
	#receiptstab {
		border-collapse: separate !important;
		border-spacing: 0 8px !important;
		background: transparent !important;
		width: 100% !important;
		table-layout: fixed;
		margin-top: -8px;
		margin-bottom: 0;
		transition: opacity 140ms ease;
		--receiptstab-client-number-width: 58px;
	}

	@media (prefers-reduced-motion: reduce) {
		.receiptstab-stage-shell #receiptstab-wrapper,
		.receiptstab-preload-shell,
		#receiptstab {
			transition: none !important;
		}
	}

	#receiptstab thead {
		position: relative;
		z-index: 120;
	}

	#receiptstab thead th {
		position: sticky;
		top: var(--native-sticky-top, 0px);
		z-index: var(--native-sticky-z, 120);
		background: linear-gradient(180deg, #fcfdff 0%, #eef4f8 100%);
		background-clip: border-box;
		box-shadow:
			0 -1px 0 #f7fbff,
			inset 0 -1px 0 #d6e1ea;
		vertical-align: middle !important;
		text-align: center;
		padding: 10px 8px !important;
	}

	#receiptstab thead th .receipts-header-title {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 0;
		min-height: 1.3em;
		text-align: center;
		font-weight: 700;
		line-height: 1.25;
	}

	#receiptstab thead tr:first-child th:first-child {
		border-top-left-radius: 8px;
	}

	#receiptstab thead tr:first-child th:last-child {
		border-top-right-radius: 8px;
	}

	#receiptstab col.col-actions {
		width: var(--row-actions-column-width);
	}

	#receiptstab col.col-category {
		width: var(--category-column-width);
	}

	#receiptstab col.col-receipts {
		width: var(--receipts-column-width);
	}

	#receiptstab tbody {
		background: transparent;
	}

	#receiptstab tbody tr {
		background: white;
		border: 1px solid #e0e0e0;
		box-shadow: 0 1px 3px rgba(0,0,0,0.08);
		transition: all 0.2s ease;
	}

	#receiptstab tbody tr:hover:not(.period-separator) {
		box-shadow: 0 2px 8px rgba(0,0,0,0.12);
		transform: translateY(-1px);
	}

	#receiptstab tbody tr td {
		border: none !important;
		vertical-align: middle;
		padding: 12px 8px;
		background: inherit;
	}

	#receiptstab tbody tr td:first-child {
		border-top-left-radius: 8px;
		border-bottom-left-radius: 8px;
	}

	#receiptstab tbody tr td:last-child {
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
	}

	/* Row context actions merged into client column */
	#receiptstab tbody td.client-cell.client-actions-cell {
		position: relative;
		padding: 8px !important;
		overflow: visible !important;
	}

	#receiptstab tbody td.client-cell.client-actions-cell .client-cell-main {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
	}

	#receiptstab tbody td.client-cell.client-actions-cell .receipt-row-menu.row-actions-cell {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		--receipt-row-menu-collapsed-width: 36px;
		--receipt-row-menu-expanded-width: 98px;
		flex: 0 0 var(--receipt-row-menu-collapsed-width);
		width: var(--receipt-row-menu-collapsed-width);
		min-width: var(--receipt-row-menu-collapsed-width);
		transition:
			flex-basis 220ms cubic-bezier(0.22, 0.78, 0.2, 1),
			width 220ms cubic-bezier(0.22, 0.78, 0.2, 1);
	}

	#receiptstab tbody td.client-cell.client-actions-cell .receipt-row-menu.row-actions-cell:hover,
	#receiptstab tbody td.client-cell.client-actions-cell .receipt-row-menu.row-actions-cell:focus-within,
	#receiptstab tbody td.client-cell.client-actions-cell .receipt-row-menu.row-actions-cell.hover-card-open {
		flex-basis: var(--receipt-row-menu-expanded-width);
		width: var(--receipt-row-menu-expanded-width);
	}

	#receiptstab tbody td.client-cell.client-actions-cell .client-display {
		flex: 1 1 auto;
		width: auto;
		max-width: 100%;
		min-width: 0;
		transition: max-width 220ms cubic-bezier(0.22, 0.78, 0.2, 1);
	}

	#receiptstab tbody td.client-cell.client-actions-cell .client-display .client-name {
		transition: max-width 220ms cubic-bezier(0.22, 0.78, 0.2, 1);
	}

	/* Icon optical alignment for this receipts view */
	#result_container .glyphicon,
	#modal_incoming_outgoing .glyphicon,
	#modal_row_delete_confirm .glyphicon,
	#modal_set_done .glyphicon,
	.client-hover-card .glyphicon,
	.category-hover-card .glyphicon,
	.receipts-hover-card .glyphicon,
	.planning-hover-card .glyphicon,
	.eigene-stunden-hover-card .glyphicon,
	.eigener-status-hover-card .glyphicon,
	.row-actions-hover-card .glyphicon {
		margin-top: -1px !important;
		margin-left: -1px !important;
	}

	/* Ensure expanded legend icons in Eigene Stunden receive the same optical shift. */
	.eigene-stunden-hover-card .legend-day-link .glyphicon,
	.eigene-stunden-hover-card .legend-status-btn .glyphicon,
	.eigene-stunden-hover-card .legend-row-action .glyphicon {
		margin-top: -2px !important;
		margin-left: -2px !important;
	}

	/* Row menu trigger styled like yearplan action pills (icon first, text on hover). */
	#receiptstab tbody td.client-cell.client-actions-cell .row-actions-cell .row-menu-toggle {
		width: 100%;
		min-width: 0;
		height: 28px;
		padding: 0 10px !important;
		border: 1px solid #afc5d5;
		border-radius: 999px;
		background: linear-gradient(180deg, #f9fcfe 0%, #e8f2f8 100%);
		color: #2f5872;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		overflow: hidden;
		white-space: nowrap;
		box-shadow: var(--ui-press-neutral-shadow);
		transition:
			flex-grow 220ms cubic-bezier(0.22, 0.78, 0.2, 1),
			transform 0.16s ease,
			box-shadow 0.16s ease,
			border-color 0.16s ease,
			filter 0.16s ease,
			background 0.16s ease,
			color 0.16s ease;
	}

	#receiptstab tbody td.client-cell.client-actions-cell .row-actions-cell .row-menu-toggle:hover,
	#receiptstab tbody td.client-cell.client-actions-cell .row-actions-cell .row-menu-toggle:focus,
	#receiptstab tbody td.client-cell.client-actions-cell .receipt-row-menu.row-actions-cell.hover-card-open .row-menu-toggle {
		border-color: #9bb8cc;
		background: linear-gradient(180deg, #f9fcfe 0%, #e8f2f8 100%);
		color: #2f5872;
		transform: translateY(-1px);
		filter: saturate(1.06) brightness(1.02);
		box-shadow: var(--ui-press-neutral-hover-shadow);
		text-decoration: none;
	}

	#receiptstab tbody td.client-cell.client-actions-cell .row-actions-cell .row-menu-toggle:active {
		transform: translateY(1px);
		filter: none;
		box-shadow: var(--ui-press-neutral-active-shadow);
	}

	#receiptstab tbody td.client-cell.client-actions-cell .row-actions-cell .row-menu-toggle:focus-visible {
		outline: none;
		box-shadow: 0 0 0 2px rgba(61, 122, 169, 0.22), 0 0 0 5px rgba(61, 122, 169, 0.42);
	}

	#receiptstab tbody td.client-cell.client-actions-cell .row-actions-cell .row-menu-toggle .row-menu-dots {
		font-size: 15px;
		font-weight: 800;
		line-height: 1;
		transform: translateY(-1px);
	}

	#receiptstab tbody td.client-cell.client-actions-cell .row-actions-cell .row-menu-toggle .row-menu-text {
		display: inline-block;
		max-width: 0;
		margin-left: 0;
		opacity: 0;
		overflow: hidden;
		text-overflow: clip;
		white-space: nowrap;
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		transition:
			max-width 220ms cubic-bezier(0.22, 0.78, 0.2, 1),
			margin-left 220ms cubic-bezier(0.22, 0.78, 0.2, 1),
			opacity 160ms ease;
	}

	#receiptstab tbody td.client-cell.client-actions-cell .row-actions-cell .row-menu-toggle:hover .row-menu-text,
	#receiptstab tbody td.client-cell.client-actions-cell .row-actions-cell .row-menu-toggle:focus .row-menu-text,
	#receiptstab tbody td.client-cell.client-actions-cell .row-actions-cell .row-menu-toggle:focus-visible .row-menu-text,
	#receiptstab tbody td.client-cell.client-actions-cell .receipt-row-menu.row-actions-cell:hover .row-menu-toggle .row-menu-text,
	#receiptstab tbody td.client-cell.client-actions-cell .receipt-row-menu.row-actions-cell:focus-within .row-menu-toggle .row-menu-text,
	#receiptstab tbody td.client-cell.client-actions-cell .receipt-row-menu.row-actions-cell.hover-card-open .row-menu-toggle .row-menu-text {
		max-width: 72px;
		margin-left: 6px;
		opacity: 1;
	}

	.eigener-status-hover-card .ui-note-panel__edit {
		width: 36px;
		min-width: 36px;
		height: 28px;
		padding: 0 !important;
		border: 1px solid #afc5d5;
		border-radius: 999px;
		background: linear-gradient(180deg, #f9fcfe 0%, #e8f2f8 100%);
		box-shadow: var(--ui-press-neutral-shadow, 0 2px 0 rgba(96, 128, 149, 0.5), 0 4px 7px rgba(34, 62, 82, 0.15));
		color: #2f5872;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 36px;
		margin-top: -4px;
		opacity: 1;
		pointer-events: auto;
		transition:
			transform 0.16s ease,
			box-shadow 0.16s ease,
			border-color 0.16s ease,
			filter 0.16s ease,
			background 0.16s ease,
			color 0.16s ease;
	}

	.eigener-status-hover-card .ui-note-panel__edit:hover {
		border-color: #9bb8cc;
		background: linear-gradient(180deg, #f9fcfe 0%, #e8f2f8 100%);
		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: #2f5872;
		filter: saturate(1.06) brightness(1.02);
		text-decoration: none;
		transform: translateY(-1px);
	}

	.eigener-status-hover-card .ui-note-panel__edit:focus {
		outline: none;
	}

	.eigener-status-hover-card .ui-note-panel__edit:focus-visible {
		box-shadow: var(--ui-press-focus-ring, 0 0 0 2px rgba(61, 122, 169, 0.22), 0 0 0 5px rgba(61, 122, 169, 0.42));
	}

	.eigener-status-hover-card .ui-note-panel__edit:active {
		box-shadow: var(--ui-press-neutral-active-shadow, 0 1px 0 rgba(94, 126, 148, 0.5), 0 2px 4px rgba(34, 62, 82, 0.18));
		filter: none;
		transform: translateY(1px);
	}

	.eigener-status-hover-card .ui-note-panel__edit .glyphicon {
		font-size: 13px;
		line-height: 1;
		transform: translateY(-1px);
	}

	.eigener-status-hover-card .ui-note-panel__actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		margin-top: 8px;
		flex-wrap: wrap;
	}

	.eigener-status-hover-card .ui-note-btn {
		--receipts-row-note-btn-top: var(--bs3-btn-default-top, #ffffff);
		--receipts-row-note-btn-base: var(--bs3-btn-default-base, #dce8f4);
		--receipts-row-note-btn-border: var(--bs3-btn-default-border, #6f879f);
		--receipts-row-note-btn-text: var(--bs3-btn-default-text, #2f4c65);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-height: 28px;
		padding: 4px 11px;
		border: 1px solid var(--receipts-row-note-btn-border);
		border-radius: var(--bs3-btn-border-radius, 999px);
		background: linear-gradient(180deg, var(--receipts-row-note-btn-top) 0%, var(--receipts-row-note-btn-base) 100%);
		box-shadow:
			0 2px 0 color-mix(in srgb, var(--receipts-row-note-btn-border) 72%, black),
			0 5px 10px color-mix(in srgb, var(--receipts-row-note-btn-border) 36%, transparent);
		color: var(--receipts-row-note-btn-text);
		font-size: 12px;
		font-weight: var(--bs3-btn-font-weight, 700);
		line-height: 1;
		text-shadow: none;
		white-space: nowrap;
		transform: translateY(0);
		transition:
			transform 0.16s ease,
			box-shadow 0.16s ease,
			border-color 0.16s ease,
			background 0.16s ease,
			color 0.16s ease,
			filter 0.16s ease;
		touch-action: manipulation;
	}

	.eigener-status-hover-card .ui-note-btn--save,
	.eigener-status-hover-card .ui-note-btn.is-save {
		--receipts-row-note-btn-top: var(--bs3-btn-success-top, #d8efde);
		--receipts-row-note-btn-base: var(--bs3-btn-success-base, #a8d4b2);
		--receipts-row-note-btn-border: var(--bs3-btn-success-border, #5e9a6a);
		--receipts-row-note-btn-text: var(--bs3-btn-success-text, #245533);
	}

	.eigener-status-hover-card .ui-note-btn--cancel,
	.eigener-status-hover-card .ui-note-btn.is-cancel {
		--receipts-row-note-btn-top: var(--bs3-btn-default-top, #ffffff);
		--receipts-row-note-btn-base: var(--bs3-btn-default-base, #dce8f4);
		--receipts-row-note-btn-border: var(--bs3-btn-default-border, #6f879f);
		--receipts-row-note-btn-text: var(--bs3-btn-default-text, #2f4c65);
	}

	.eigener-status-hover-card .ui-note-btn:hover,
	.eigener-status-hover-card .ui-note-btn:focus-visible {
		border-color: color-mix(in srgb, var(--receipts-row-note-btn-border) 90%, white);
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--receipts-row-note-btn-top) 88%, white) 0%,
			color-mix(in srgb, var(--receipts-row-note-btn-base) 88%, white) 100%
		);
		box-shadow:
			0 3px 0 color-mix(in srgb, var(--receipts-row-note-btn-border) 62%, black),
			0 7px 13px color-mix(in srgb, var(--receipts-row-note-btn-border) 42%, transparent);
		color: var(--receipts-row-note-btn-text);
		filter: saturate(1.1) brightness(1.03) contrast(1.01);
		outline: none;
		transform: translateY(-1px);
	}

	.eigener-status-hover-card .ui-note-btn:focus {
		outline: none;
	}

	.eigener-status-hover-card .ui-note-btn:focus-visible {
		box-shadow: var(--ui-press-focus-ring, 0 0 0 2px rgba(61, 122, 169, 0.22), 0 0 0 5px rgba(61, 122, 169, 0.42));
	}

	.eigener-status-hover-card .ui-note-btn:active {
		background: linear-gradient(180deg, var(--receipts-row-note-btn-top) 0%, var(--receipts-row-note-btn-base) 100%);
		box-shadow:
			0 1px 0 color-mix(in srgb, var(--receipts-row-note-btn-border) 48%, black),
			0 2px 4px color-mix(in srgb, var(--receipts-row-note-btn-border) 24%, transparent);
		filter: none;
		transform: translateY(1px);
	}

	.eigener-status-hover-card .ui-note-btn .glyphicon {
		flex: 0 0 auto;
		font-size: 11px;
		line-height: 1;
	}

	.row-actions-hover-card {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		--card-arrow-bg: linear-gradient(135deg, #1a9fd8 0%, #158cba 50%, #127a9f 100%);
		background: white;
		border: 2px solid #158cba;
		border-radius: 12px;
		box-shadow: 0 12px 32px rgba(21, 140, 186, 0.2), 0 4px 12px rgba(0,0,0,0.15);
		padding: 0;
		min-width: 240px;
		max-width: 280px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		z-index: 200000;
		font-size: 13px;
	}

	.row-actions-hover-card.transitioning {
		display: block;
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.row-actions-hover-card.show {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.row-actions-hover-card.position-above {
		transform: translateY(8px);
	}

	.row-actions-hover-card.position-above.show {
		transform: translateY(0);
	}

	.row-actions-hover-card .card-body {
		position: relative;
		padding: 0;
		background: #fff;
		border-radius: 10px;
		clip-path: inset(0 round 10px);
		overflow: hidden;
		scrollbar-gutter: auto;
	}

	.row-menu-item {
		display: block;
		width: 100%;
		padding: 9px 12px;
		border: none;
		background: transparent;
		color: #2f4657;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.25;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		box-sizing: border-box;
		transition: background-color 0.14s ease, color 0.14s ease;
	}

	.row-menu-item + .row-menu-item {
		border-top: 1px solid #edf3f7;
	}

	.row-menu-item:hover,
	.row-menu-item:focus {
		background: #eef5fa;
		color: #24485f;
		text-decoration: none;
	}

	.row-menu-item.is-disabled,
	.row-menu-item:disabled {
		background: #f7f9fb;
		color: #95a4b1;
		cursor: not-allowed;
	}

	/* Compact confirm modal for row-menu destructive actions */
	#modal_row_delete_confirm .modal-dialog {
		max-width: 360px;
		margin-top: 12vh;
	}

	#modal_row_delete_confirm .modal-content {
		border-radius: 12px;
		border: 1px solid #d3e0ea;
		box-shadow: 0 20px 44px rgba(32, 71, 95, 0.28);
		overflow: hidden;
	}

	#modal_row_delete_confirm .modal-header {
		padding: 12px 14px;
		border-bottom: 1px solid #e8eef3;
		background: linear-gradient(180deg, #f6fbff 0%, #eef6fc 100%);
	}

	#modal_row_delete_confirm .modal-title {
		font-size: 15px;
		font-weight: 700;
		line-height: 1.25;
		color: #234c64;
	}

	#modal_row_delete_confirm .modal-body {
		padding: 14px 16px 10px;
	}

	#modal_row_delete_confirm .receipts-row-delete-confirm-message {
		margin: 0;
		font-size: 13px;
		line-height: 1.45;
		color: #334b5d;
	}

	#modal_row_delete_confirm .modal-footer {
		padding: 10px 14px 14px;
		border-top: none;
	}

	#modal_row_delete_confirm .modal-footer .btn-group {
		display: inline-block;
	}

	#modal_row_delete_confirm #row_delete_confirm_submit {
		min-width: 124px;
	}

	/* Period separator styling */
	.period-separator {
		background: linear-gradient(to right, #e3f2fd 0%, #f5f5f5 50%, #e3f2fd 100%) !important;
		border: none !important;
		box-shadow: none !important;
		pointer-events: none;
	}

	.period-separator td {
		padding: 8px 12px !important;
		font-weight: 600;
		color: #158cba;
		font-size: 13px;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		border-radius: 6px !important;
		text-align: center !important;
	}

	.period-separator:hover {
		transform: none !important;
		box-shadow: none !important;
	}

	#receiptstab tbody tr.receipts-virtual-divider-row > td {
		border-top-color: rgba(21, 140, 186, 0.28) !important;
		padding-top: calc(12px + var(--receipts-group-divider-height, 48px)) !important;
		background:
			linear-gradient(180deg, #f7fbfe 0, #f7fbfe var(--receipts-group-divider-height, 48px), transparent var(--receipts-group-divider-height, 48px)),
			inherit;
	}

	#receiptstab tbody tr.receipts-virtual-divider-row > td.client-cell.client-actions-cell {
		padding-top: calc(8px + var(--receipts-group-divider-height, 48px)) !important;
	}

	#receiptstab tbody tr.receipts-virtual-divider-row > td:first-child {
		background:
			linear-gradient(180deg, #f7fbfe 0, #f7fbfe var(--receipts-group-divider-height, 48px), transparent var(--receipts-group-divider-height, 48px)),
			linear-gradient(90deg, #eef8fd 0, #eef8fd 50px, transparent 50px),
			inherit;
	}

	#receiptstab tbody tr.receipts-virtual-divider-row > td:last-child {
		background:
			linear-gradient(180deg, #f7fbfe 0, #f7fbfe var(--receipts-group-divider-height, 48px), transparent var(--receipts-group-divider-height, 48px)),
			inherit;
	}

	#receiptstab tbody tr.receipts-virtual-divider-row > td:first-child {
		position: relative;
		overflow: visible !important;
	}

	#receiptstab tbody .receipts-virtual-divider-label {
		position: absolute;
		top: 4px;
		left: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--receipts-virtual-divider-width, 100%);
		height: 42px;
		padding: 0 12px;
		border-radius: 7px;
		background: linear-gradient(to right, #e3f2fd 0%, #f5f5f5 50%, #e3f2fd 100%);
		box-shadow: inset 0 0 0 1px rgba(21, 140, 186, 0.14), 0 1px 3px rgba(33, 57, 75, 0.1);
		color: #158cba;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.5px;
		line-height: 1;
		text-transform: uppercase;
		pointer-events: none;
		box-sizing: border-box;
	}

	#receiptstab tbody .receipts-virtual-divider-label::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -8px;
		height: 8px;
		border-top: 1px solid rgba(168, 184, 196, 0.42);
		background: linear-gradient(180deg, rgba(23, 48, 66, 0.12) 0%, rgba(23, 48, 66, 0.05) 52%, rgba(255, 255, 255, 0) 100%);
		box-shadow: 0 1px 3px rgba(23, 48, 66, 0.08);
		pointer-events: none;
	}

	#receiptstab tbody .receipts-virtual-divider-label span {
		display: block;
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#receiptstab tbody tr.receiptstab-chunk-loading-row {
		background: linear-gradient(180deg, #f4f8fc 0%, #edf4fa 100%) !important;
		pointer-events: none;
	}

	#receiptstab tbody tr.receiptstab-chunk-loading-row td {
		padding: 8px 12px !important;
		text-align: center !important;
		border: none !important;
	}

	#receiptstab tbody tr.receiptstab-chunk-loading-row .receiptstab-chunk-loading-text {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 12px;
		font-weight: 600;
		color: #3f6177;
		letter-spacing: 0.01em;
	}

	#receiptstab tbody tr.receiptstab-chunk-loading-row .receiptstab-chunk-loading-text::before {
		content: "";
		width: 12px;
		height: 12px;
		border-radius: 999px;
		border: 2px solid #9abfd8;
		border-top-color: #2b87b3;
		animation: receipts-stage-spin 0.9s linear infinite;
	}

	/* Remove default striping */
	#receiptstab.table-striped tbody tr:nth-of-type(odd) {
		background-color: white;
	}

	#receiptstab.table-striped tbody tr:nth-of-type(even) {
		background-color: white;
	}

	/* Override bootstrap table borders */
	#receiptstab.table-bordered {
		border: none !important;
	}

	#receiptstab.table-bordered > tbody > tr > td {
		border: none;
	}

	/* Client Column Styling */
	#receiptstab thead th.client_col {
		width: auto !important;
		min-width: 196px;
		max-width: none !important;
	}

	.client-cell {
		position: relative;
		width: auto !important;
		min-width: 196px;
		max-width: none !important;
		cursor: default;
	}

	.client-display {
		position: relative;
		display: inline-grid;
		grid-template-columns: var(--receiptstab-client-number-width, 58px) auto;
		align-items: center;
		column-gap: 12px;
		width: max-content;
		max-width: 100%;
		min-height: 66px;
		padding: 6px 0;
		background: transparent;
		box-sizing: border-box;
	}

	.client-display::before {
		content: '';
		position: absolute;
		left: 0;
		right: 2px;
		top: 0;
		bottom: 0;
		border: 1px solid #dbe7f0;
		border-radius: 9px;
		background: linear-gradient(180deg, #fcfdff 0%, #f5f9fc 100%);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
		z-index: 0;
	}

	.client-display::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: var(--receiptstab-client-number-width, 58px);
		border-radius: 9px 0 0 9px;
		background: linear-gradient(180deg, #edf6fd 0%, #e3f0fa 100%);
		z-index: 0;
	}

	.client-number {
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		width: var(--receiptstab-client-number-width, 58px);
		min-width: var(--receiptstab-client-number-width, 58px);
		padding-right: 10px;
		padding-left: 6px;
		margin: 0;
		border-right: 1px solid #cfdfeb;
		font-weight: 700;
		color: #156d9f;
		font-size: 14px;
		line-height: 1.05;
		letter-spacing: 0.02em;
		font-variant-numeric: tabular-nums;
		position: relative;
		z-index: 1;
	}

	.client-name {
		min-width: 0;
		max-width: var(--client-name-max-px, 40ch);
		padding-right: 12px;
		font-size: 14px;
		color: #2f3e4a;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		white-space: normal;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
		text-overflow: ellipsis;
		line-height: 1.22;
		max-height: calc(1.22em * 3);
		position: relative;
		z-index: 1;
	}

	.client-cell:hover .client-display::before {
		border-color: #c8dced;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 1px 2px rgba(33, 94, 130, 0.12);
	}

	.client-cell:hover .client-number {
		color: #0e5f8c;
	}

	/* Hover Card Styling */
	.client-hover-card {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		--card-arrow-bg: linear-gradient(135deg, #1a9fd8 0%, #158cba 50%, #127a9f 100%);
		background: white;
		border: 2px solid #158cba;
		border-radius: 12px;
		box-shadow: 0 12px 32px rgba(21, 140, 186, 0.2), 0 4px 12px rgba(0,0,0,0.15);
		padding: 0;
		min-width: 320px;
		max-width: 400px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		z-index: 200000;
		font-size: 13px;
	}

	/* Card visible for transitioning (fade in/out) */
	.client-hover-card.transitioning {
		display: block;
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	/* Card shown state - controlled by JavaScript */
	.client-hover-card.show {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: all;
		transform: translateY(0);
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	/* Position above variant */
	.client-hover-card.position-above {
		transform: translateY(8px);
	}

	.client-hover-card.position-above.show {
		transform: translateY(0);
	}

	/* Elevate row z-index when showing hover card */
	#receiptstab tbody tr.hover-card-active {
		z-index: 100;
		position: relative;
	}

	/* Visual connector arrow from cell to card - bottom position (default) */
	.client-hover-card::before {
		content: '';
		position: absolute;
		top: -8px;
		left: var(--arrow-left, 50px);
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid #158cba;
	}

	.client-hover-card::after {
		content: '';
		position: absolute;
		top: -6px;
		left: calc(var(--arrow-left, 50px) + 1px);
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #158cba;
	}

	/* Arrow for position above */
	.client-hover-card.position-above::before {
		top: auto;
		bottom: -8px;
		border-bottom: none;
		border-top: 8px solid #158cba;
	}

	.client-hover-card.position-above::after {
		top: auto;
		bottom: -6px;
		border-bottom: none;
		border-top: 7px solid #158cba;
	}

	/* Card Header */
	.card-header {
		background: linear-gradient(135deg, #1a9fd8 0%, #158cba 50%, #127a9f 100%);
		color: white;
		padding: 16px;
		border-radius: 10px 10px 0 0;
		box-shadow: 0 2px 8px rgba(21, 140, 186, 0.3);
	}

	.card-title {
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 4px;
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}

	.card-number {
		background: rgba(255,255,255,0.2);
		padding: 2px 8px;
		border-radius: 4px;
		font-weight: 700;
		font-size: 13px;
	}

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

	.card-subtitle {
		font-size: 12px;
		opacity: 0.9;
		font-style: italic;
		margin-top: 4px;
	}

	/* Card Body */
	.card-body {
		padding: 16px;
		max-height: 60vh;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.card-section {
		margin-bottom: 16px;
	}

	.card-section:last-child {
		margin-bottom: 0;
	}

	.section-title {
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		color: #158cba;
		letter-spacing: 0.5px;
		margin-bottom: 8px;
		padding-bottom: 4px;
		border-bottom: 2px solid #d4f1ff;
	}

	.info-row {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 6px;
		line-height: 1.5;
	}

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

	.info-icon {
		font-size: 14px;
		min-width: 20px;
		opacity: 0.8;
	}

	.info-label {
		font-weight: 600;
		color: #666;
		min-width: 120px;
		flex-shrink: 0;
	}

	.info-value {
		color: #333;
		flex: 1;
		word-break: break-word;
	}

	.info-value a {
		color: #158cba;
		text-decoration: none;
		transition: color 0.2s ease;
	}

	.info-value a:hover {
		color: #127a9f;
		text-decoration: underline;
	}

	.info-block {
		padding-left: 28px;
		color: #333;
		line-height: 1.6;
	}

	/* Keep inner-scroll scrollbar corners clipped to the card shape. */
	.client-hover-card .card-body,
	.category-hover-card .card-body,
	.planning-hover-card .planning-card-body,
	.eigene-stunden-hover-card .eigene-stunden-card-body,
	.eigener-status-hover-card .card-body {
		border-radius: 0 0 10px 10px;
		clip-path: inset(0 round 0 0 10px 10px);
		scrollbar-gutter: stable;
		scrollbar-width: thin;
		scrollbar-color: #c1c1c1 #f1f1f1;
	}

	.client-hover-card .card-body::-webkit-scrollbar,
	.category-hover-card .card-body::-webkit-scrollbar,
	.planning-hover-card .planning-card-body::-webkit-scrollbar,
	.eigene-stunden-hover-card .eigene-stunden-card-body::-webkit-scrollbar,
	.eigener-status-hover-card .card-body::-webkit-scrollbar {
		width: 6px;
	}

	.client-hover-card .card-body::-webkit-scrollbar-track,
	.category-hover-card .card-body::-webkit-scrollbar-track,
	.planning-hover-card .planning-card-body::-webkit-scrollbar-track,
	.eigene-stunden-hover-card .eigene-stunden-card-body::-webkit-scrollbar-track,
	.eigener-status-hover-card .card-body::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 8px;
	}

	.client-hover-card .card-body::-webkit-scrollbar-thumb,
	.category-hover-card .card-body::-webkit-scrollbar-thumb,
	.planning-hover-card .planning-card-body::-webkit-scrollbar-thumb,
	.eigene-stunden-hover-card .eigene-stunden-card-body::-webkit-scrollbar-thumb,
	.eigener-status-hover-card .card-body::-webkit-scrollbar-thumb {
		background: #c1c1c1;
		border-radius: 8px;
	}

	.client-hover-card .card-body::-webkit-scrollbar-thumb:hover,
	.category-hover-card .card-body::-webkit-scrollbar-thumb:hover,
	.planning-hover-card .planning-card-body::-webkit-scrollbar-thumb:hover,
	.eigene-stunden-hover-card .eigene-stunden-card-body::-webkit-scrollbar-thumb:hover,
	.eigener-status-hover-card .card-body::-webkit-scrollbar-thumb:hover {
		background: #a1a1a1;
	}

	/* Scrollbar styling for hover cards and inner scroll regions */
	.client-hover-card,
	.category-hover-card,
	.receipts-hover-card,
	.planning-hover-card,
	.eigene-stunden-hover-card,
	.eigener-status-hover-card,
	.card-body,
	.planning-card-body {
		scrollbar-width: thin;
		scrollbar-color: #c1c1c1 #f1f1f1;
	}

	.client-hover-card::-webkit-scrollbar,
	.category-hover-card::-webkit-scrollbar,
	.receipts-hover-card::-webkit-scrollbar,
	.planning-hover-card::-webkit-scrollbar,
	.eigene-stunden-hover-card::-webkit-scrollbar,
	.eigener-status-hover-card::-webkit-scrollbar,
	.card-body::-webkit-scrollbar,
	.planning-card-body::-webkit-scrollbar {
		width: 6px;
	}

	.client-hover-card::-webkit-scrollbar-track,
	.category-hover-card::-webkit-scrollbar-track,
	.receipts-hover-card::-webkit-scrollbar-track,
	.planning-hover-card::-webkit-scrollbar-track,
	.eigene-stunden-hover-card::-webkit-scrollbar-track,
	.eigener-status-hover-card::-webkit-scrollbar-track,
	.card-body::-webkit-scrollbar-track,
	.planning-card-body::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3px;
	}

	.client-hover-card::-webkit-scrollbar-thumb,
	.category-hover-card::-webkit-scrollbar-thumb,
	.receipts-hover-card::-webkit-scrollbar-thumb,
	.planning-hover-card::-webkit-scrollbar-thumb,
	.eigene-stunden-hover-card::-webkit-scrollbar-thumb,
	.eigener-status-hover-card::-webkit-scrollbar-thumb,
	.card-body::-webkit-scrollbar-thumb,
	.planning-card-body::-webkit-scrollbar-thumb {
		background: #c1c1c1;
		border-radius: 3px;
	}

	.client-hover-card::-webkit-scrollbar-thumb:hover,
	.category-hover-card::-webkit-scrollbar-thumb:hover,
	.receipts-hover-card::-webkit-scrollbar-thumb:hover,
	.planning-hover-card::-webkit-scrollbar-thumb:hover,
	.eigene-stunden-hover-card::-webkit-scrollbar-thumb:hover,
	.eigener-status-hover-card::-webkit-scrollbar-thumb:hover,
	.card-body::-webkit-scrollbar-thumb:hover,
	.planning-card-body::-webkit-scrollbar-thumb:hover {
		background: #a1a1a1;
	}

	/* Category Column Styling */
	#receiptstab thead th.category_col {
		width: var(--category-column-width) !important;
		min-width: var(--category-column-width) !important;
		max-width: var(--category-column-width) !important;
	}

	.category-cell {
		position: relative;
		width: var(--category-column-width) !important;
		min-width: var(--category-column-width) !important;
		max-width: var(--category-column-width) !important;
		cursor: default;
		padding: 8px !important;
		text-align: center;
	}

	.category-badge {
		display: inline-block;
		padding: 8px 12px;
		border-radius: 8px;
		text-align: center;
		font-weight: 600;
		font-size: 13px;
		line-height: 1.4;
		min-width: 100px;
		box-shadow: var(--ui-badge-shadow, 0 1px 3px rgba(0,0,0,0.2));
		margin: 0 auto;
	}

	.category-badge-type {
		font-size: 13px;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 4px;
		opacity: 0.9;
	}

	.category-badge-period {
		font-size: 14px;
		font-weight: 700;
	}

	/* Category badge colors */
	.category-badge.bh {
		background-color: rgba(var(--bookkeeping-color), 0.4);
		color: #5a3a38;
	}

	.category-badge.lv {
		background-color: rgba(var(--payroll-color), 0.4);
		color: #3a4a5a;
	}

	.category-badge.ja {
		background-color: rgba(var(--annualaccount-color), 0.4);
		color: #4a3a5a;
	}

	.category-badge.wp {
		background-color: rgba(var(--auditing-color), 0.4);
		color: #3a5a4a;
	}

	.category-badge.br {
		background-color: rgba(var(--consultation-color), 0.4);
		color: #5a4a3a;
	}

	/* Category Hover Card */
	.category-hover-card {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		--card-arrow-bg: linear-gradient(135deg, #1a9fd8 0%, #158cba 50%, #127a9f 100%);
		background: white;
		border: 2px solid #158cba;
		border-radius: 12px;
		box-shadow: 0 12px 32px rgba(21, 140, 186, 0.2), 0 4px 12px rgba(0,0,0,0.15);
		padding: 0;
		min-width: 320px;
		max-width: 400px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		z-index: 200000;
		font-size: 13px;
	}

	.category-hover-card.transitioning {
		display: block;
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.category-hover-card.show {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: all;
		transform: translateY(0);
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.category-hover-card.position-above {
		transform: translateY(8px);
	}

	.category-hover-card.position-above.show {
		transform: translateY(0);
	}

	/* Category card arrows */
	.category-hover-card::before {
		content: '';
		position: absolute;
		top: -8px;
		left: var(--arrow-left, 50px);
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid #158cba;
	}

	.category-hover-card::after {
		content: '';
		position: absolute;
		top: -6px;
		left: calc(var(--arrow-left, 50px) + 1px);
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #158cba;
	}

	.category-hover-card.position-above::before {
		top: auto;
		bottom: -8px;
		border-bottom: none;
		border-top: 8px solid #158cba;
	}

	.category-hover-card.position-above::after {
		top: auto;
		bottom: -6px;
		border-bottom: none;
		border-top: 7px solid #158cba;
	}

	/* Category-specific header colors */
	.category-hover-card .card-header.bh {
		background: linear-gradient(135deg, rgba(var(--bookkeeping-color), 0.9) 0%, rgba(var(--bookkeeping-color), 0.7) 100%);
		color: #3a2a28;
	}

	.category-hover-card .card-header.lv {
		background: linear-gradient(135deg, rgba(var(--payroll-color), 0.9) 0%, rgba(var(--payroll-color), 0.7) 100%);
		color: #2a3a4a;
	}

	.category-hover-card .card-header.ja {
		background: linear-gradient(135deg, rgba(var(--annualaccount-color), 0.9) 0%, rgba(var(--annualaccount-color), 0.7) 100%);
		color: #3a2a4a;
	}

	.category-hover-card .card-header.wp {
		background: linear-gradient(135deg, rgba(var(--auditing-color), 0.9) 0%, rgba(var(--auditing-color), 0.7) 100%);
		color: #2a4a3a;
	}

	.category-hover-card .card-header.br {
		background: linear-gradient(135deg, rgba(var(--consultation-color), 0.9) 0%, rgba(var(--consultation-color), 0.7) 100%);
		color: #4a3a2a;
	}

	/* Match arrow fill to category-specific header colors */
	.category-hover-card.bh {
		--card-arrow-bg: linear-gradient(135deg, rgba(var(--bookkeeping-color), 0.9) 0%, rgba(var(--bookkeeping-color), 0.7) 100%);
	}

	.category-hover-card.lv {
		--card-arrow-bg: linear-gradient(135deg, rgba(var(--payroll-color), 0.9) 0%, rgba(var(--payroll-color), 0.7) 100%);
	}

	.category-hover-card.ja {
		--card-arrow-bg: linear-gradient(135deg, rgba(var(--annualaccount-color), 0.9) 0%, rgba(var(--annualaccount-color), 0.7) 100%);
	}

	.category-hover-card.wp {
		--card-arrow-bg: linear-gradient(135deg, rgba(var(--auditing-color), 0.9) 0%, rgba(var(--auditing-color), 0.7) 100%);
	}

	.category-hover-card.br {
		--card-arrow-bg: linear-gradient(135deg, rgba(var(--consultation-color), 0.9) 0%, rgba(var(--consultation-color), 0.7) 100%);
	}

	/* Receipts Column Styling */
	#receiptstab.receiptstab-layout-tablet {
		--receipts-column-width: clamp(148px, 13vw, 160px);
	}

	#receiptstab thead th.receipts-column-header {
		width: var(--receipts-column-width) !important;
		min-width: var(--receipts-column-width) !important;
		max-width: var(--receipts-column-width) !important;
	}

	.receipts-cell {
		width: var(--receipts-column-width) !important;
		min-width: var(--receipts-column-width) !important;
		max-width: var(--receipts-column-width) !important;
		padding: 8px !important;
	}

	.receipts-buttons {
		display: flex;
		gap: 5px;
		justify-content: center;
		margin-bottom: 5px;
	}

	.receipts-cell .receipt-btn {
		position: relative;
		overflow: visible;
		border-width: 1px;
		--receipt-tone-base: color-mix(in srgb, var(--progress-actual-base) 46%, #ffffff 54%);
		--receipt-tone-border: color-mix(in srgb, var(--progress-actual-base) 58%, #7aa9bf 42%);
		--receipt-tone-soft: color-mix(in srgb, var(--progress-actual-base) 10%, #ffffff 90%);
		--receipt-tone-text: color-mix(in srgb, var(--progress-actual-base) 52%, #24485f 48%);
	}

	.receipts-cell .receipt-btn.recorded {
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--receipt-tone-base) 76%, #e9f4fa 24%) 0%,
			color-mix(in srgb, var(--receipt-tone-base) 64%, var(--receipt-tone-border) 36%) 100%
		);
		border-color: color-mix(in srgb, var(--receipt-tone-border) 82%, #6d9eb5 18%);
		color: color-mix(in srgb, var(--receipt-tone-text) 84%, #173141 16%);
		box-shadow:
			0 2px 0 color-mix(in srgb, var(--receipt-tone-border) 64%, #3d718b 36%),
			0 5px 10px rgba(85, 120, 140, 0.24),
			inset 0 1px 0 rgba(255, 255, 255, 0.42),
			inset 0 -1px 0 rgba(0, 0, 0, 0.10);
	}

	.receipts-cell .receipt-btn.recorded::after {
		content: '\2713';
		position: absolute;
		right: -5px;
		top: -5px;
		width: 14px;
		height: 14px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		font-size: 9px;
		font-weight: 900;
		line-height: 1;
		background: #f7fafc;
		color: var(--receipt-tone-border);
		border: 1px solid color-mix(in srgb, var(--receipt-tone-border) 36%, #c8d4df 64%);
		box-shadow: 0 1px 2px rgba(35, 58, 74, 0.2);
	}

	.receipts-cell .receipt-btn.missing {
		background: linear-gradient(180deg, #ffffff 0%, var(--receipt-tone-soft) 100%);
		border-color: color-mix(in srgb, var(--receipt-tone-border) 56%, #bed2de 44%);
		border-style: dashed;
		color: color-mix(in srgb, var(--receipt-tone-text) 88%, #536271 12%);
		box-shadow:
			0 2px 0 color-mix(in srgb, var(--receipt-tone-border) 42%, #7b9fb3 58%),
			0 5px 10px rgba(106, 132, 146, 0.18),
			inset 0 1px 0 rgba(255, 255, 255, 0.96),
			inset 0 -1px 0 rgba(0, 0, 0, 0.02);
	}

	.receipts-cell .receipt-btn.recorded:hover {
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--receipt-tone-base) 82%, #eef6fb 18%) 0%,
			color-mix(in srgb, var(--receipt-tone-base) 68%, var(--receipt-tone-border) 32%) 100%
		);
		border-color: color-mix(in srgb, var(--receipt-tone-border) 84%, #6fa4bd 16%);
		color: color-mix(in srgb, var(--receipt-tone-text) 88%, #122f40 12%);
		box-shadow:
			0 3px 0 color-mix(in srgb, var(--receipt-tone-border) 66%, #366b85 34%),
			0 7px 13px rgba(79, 114, 133, 0.26),
			inset 0 1px 0 rgba(255, 255, 255, 0.50),
			inset 0 -1px 0 rgba(0, 0, 0, 0.08);
	}

	.receipts-cell .receipt-btn.missing:hover {
		background: linear-gradient(
			180deg,
			color-mix(in srgb, #ffffff 72%, var(--receipt-tone-soft) 28%) 0%,
			color-mix(in srgb, var(--receipt-tone-soft) 82%, white) 100%
		);
		border-color: color-mix(in srgb, var(--receipt-tone-border) 64%, #b6ccda 36%);
		border-style: dashed;
		color: color-mix(in srgb, var(--receipt-tone-text) 92%, #425361 8%);
		box-shadow:
			0 3px 0 color-mix(in srgb, var(--receipt-tone-border) 46%, #7397ad 54%),
			0 7px 13px rgba(102, 128, 143, 0.20),
			inset 0 1px 0 rgba(255, 255, 255, 0.98),
			inset 0 -1px 0 rgba(0, 0, 0, 0.02);
	}

	.receipts-cell .receipt-btn.recorded:active,
	.receipts-cell .receipt-btn.missing:active {
		box-shadow:
			0 1px 0 rgba(130, 148, 163, 0.52),
			0 2px 4px rgba(117, 136, 152, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.78);
	}

	.receipts-date {
		text-align: center;
		font-size: 12px;
		color: #666;
		line-height: 1.25;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2px;
		width: 26ch;
		max-width: calc(100% - 4px);
		margin: 0 auto;
		border: 0;
		border-radius: 7px;
		background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
		padding: 4px 6px;
		box-shadow: var(--ui-badge-shadow, 0 1px 3px rgba(0,0,0,0.2));
	}

	.receipts-date.is-warning-light,
	.receipts-date.is-deadline-delayed {
		border-color: var(--state-delayed-border);
		background: linear-gradient(180deg, var(--state-delayed-top) 0%, var(--state-delayed-base) 100%);
	}

	.receipts-date.is-warning-light .receipts-date-label,
	.receipts-date.is-deadline-delayed .receipts-date-label {
		color: var(--state-delayed-text);
	}

	.receipts-date.is-warning-light .receipts-date-value,
	.receipts-date.is-deadline-delayed .receipts-date-value {
		color: var(--state-delayed-text);
	}

	.receipts-date.is-deadline-outstanding {
		border-color: var(--state-outstanding-border);
		background: linear-gradient(180deg, var(--state-outstanding-top) 0%, var(--state-outstanding-base) 100%);
	}

	.receipts-date.is-deadline-outstanding .receipts-date-label {
		color: var(--state-outstanding-text);
	}

	.receipts-date.is-deadline-outstanding .receipts-date-value {
		color: var(--state-outstanding-text);
		font-weight: 700;
	}

	.receipts-date.is-warning-severe,
	.receipts-date.is-deadline-overdue {
		border-color: var(--state-overdue-border);
		background: linear-gradient(180deg, var(--state-overdue-top) 0%, var(--state-overdue-base) 100%);
	}

	.receipts-date.is-warning-severe .receipts-date-label,
	.receipts-date.is-deadline-overdue .receipts-date-label {
		color: var(--state-overdue-text);
	}

	.receipts-date.is-warning-severe .receipts-date-value,
	.receipts-date.is-deadline-overdue .receipts-date-value {
		color: var(--state-overdue-text);
		font-weight: 700;
	}

	.receipts-date.is-complete {
		border-color: var(--state-done-border);
		background: linear-gradient(180deg, var(--state-done-top) 0%, var(--state-done-base) 100%);
	}

	.receipts-date.is-complete .receipts-date-label {
		color: var(--state-done-text);
	}

	.receipts-date.is-complete .receipts-date-value {
		color: var(--state-done-text);
	}

	.receipts-date-label {
		display: block;
		width: 100%;
		text-align: center;
		font-weight: 600;
		color: #4f5e69;
		font-size: 10px;
		line-height: 1.15;
		white-space: nowrap;
	}

	.receipts-date-value {
		display: block;
		width: 100%;
		text-align: center;
		color: #2f3e4a;
		font-weight: 600;
	}

	.receipts-date-value-empty {
		color: #999;
		font-style: italic;
	}

	.receipts-date.empty {
		color: #999;
		font-style: italic;
	}

	/* Receipts Hover Card */
	.receipts-cell {
		position: relative;
		cursor: default;
	}

	.receipts-hover-card {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		--card-arrow-bg: linear-gradient(135deg, #1a9fd8 0%, #158cba 50%, #127a9f 100%);
		background: white;
		border: 2px solid #158cba;
		border-radius: 12px;
		box-shadow: 0 12px 32px rgba(21, 140, 186, 0.2), 0 4px 12px rgba(0,0,0,0.15);
		padding: 0;
		width: auto;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		z-index: 200000;
		font-size: 13px;
	}

	/* Planning & Performance Column Styling */
	.planning-column-header {
		width: auto !important;
		min-width: 144px;
		max-width: none !important;
	}

	.planning-cell {
		position: relative;
		width: auto !important;
		min-width: 144px;
		max-width: none !important;
		cursor: default;
		padding: 12px 8px !important;
		box-sizing: border-box;
	}

	.planning-cell .progress-bar-container {
		height: 29px;
		border-radius: 14px;
	}

	.planning-cell .progress-bar-total,
	.planning-cell .progress-bar-planned,
	.planning-cell .progress-bar-actual,
	.planning-cell .progress-bar-done {
		border-radius: 14px;
		border-top-left-radius: 14px;
		border-bottom-left-radius: 14px;
	}

	.progress-bar-container {
		width: 100%;
		height: 20px;
		background: var(--progress-track-base);
		border-radius: 9px;
		position: relative;
		overflow: visible;
		box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
	}

	/* Dedicated clipping layer for stacked fills so tiny overlays inherit
	   the container curvature and covered layers do not leak at the start cap. */
	.progress-bar-fill-clip {
		position: absolute;
		inset: 0;
		border-radius: inherit;
		overflow: hidden;
		z-index: 1;
		isolation: isolate;
	}

	/* Inline table bar reserves so edge labels stay visually inside the cell. */
	.progress-bar-container.compact-planning-progress {
		width: calc(100% - 38px);
		margin-left: auto;
		margin-right: auto;
		transform: translateX(var(--compact-visual-offset, 0px));
	}

	/* Keep Richtwert end dots touching the compact planning bar from outside. */
	.progress-bar-container.compact-planning-progress .progress-bar-target-line::after {
		box-shadow: 0 36px 0 0 var(--progress-target-base);
	}

	.progress-bar-container.compact-own-progress {
		width: calc(100% - 38px);
		margin-left: auto;
		margin-right: auto;
		overflow: visible;
		transform: translateX(var(--compact-visual-offset, 0px));
	}

	.progress-bar-container.compact-planning-progress .progress-bar-fill-clip > .progress-bar-total,
	.progress-bar-container.compact-planning-progress .progress-bar-fill-clip > .progress-bar-planned,
	.progress-bar-container.compact-planning-progress .progress-bar-fill-clip > .progress-bar-actual,
	.progress-bar-container.compact-planning-progress .progress-bar-fill-clip > .progress-bar-done,
	.progress-bar-container.compact-own-progress .progress-bar-fill-clip > .progress-bar-total,
	.progress-bar-container.compact-own-progress .progress-bar-fill-clip > .progress-bar-planned,
	.progress-bar-container.compact-own-progress .progress-bar-fill-clip > .progress-bar-actual,
	.progress-bar-container.compact-own-progress .progress-bar-fill-clip > .progress-bar-done {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 14px;
		border-bottom-right-radius: 14px;
		box-shadow: none;
	}

	.eigene-stunden-cell .progress-bar-container.compact-own-progress {
		overflow: visible;
	}

	/* Plan-mode fallback when there is no own planning: show a neutral empty bar. */
	.eigene-stunden-cell .progress-bar-container.compact-own-progress.is-empty {
		background: var(--progress-track-base);
		box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
		overflow: visible;
	}

	.progress-bar-planned {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		background: var(--progress-planned-gradient);
		border-radius: 9px;
		transition: all 0.3s ease;
		box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	}

	/* When used as container for hidden indicator, needs relative positioning */
	.progress-bar-container.large .progress-bar-planned,
	.progress-bar-container.large .progress-bar-actual,
	.progress-bar-container.large .progress-bar-done {
		position: absolute;
	}

	.progress-bar-actual {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		background: var(--progress-actual-gradient);
		border-radius: 9px;
		transition: all 0.3s ease;
		box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	}

	.progress-bar-done {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		background: var(--progress-done-gradient);
		border-radius: 9px;
		transition: all 0.3s ease;
		box-shadow: 0 1px 2px rgba(0,0,0,0.1);
		z-index: 4;
	}

	.progress-bar-target-line {
		position: absolute;
		top: -4px;
		bottom: -4px;
		width: 2px;
		background: var(--progress-target-dash);
		transition: left 0.3s ease;
		z-index: 2;
		cursor: pointer;
	}

	/* Larger invisible hitbox for easier hovering */
	.progress-bar-target-line::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: -8px;
		right: -8px;
		background: transparent;
		cursor: pointer;
	}

	/* Top and bottom dots - using a single element with box-shadow for the second dot */
	.progress-bar-target-line::after {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 6px;
		height: 6px;
		background: var(--progress-target-base);
		border-radius: 50%;
		box-shadow: 0 28px 0 0 var(--progress-target-base);
		pointer-events: none;
	}

	/* Larger version for hover card */
	.progress-bar-container.large .progress-bar-target-line {
		top: -8px;
		bottom: -8px;
		width: 3px;
	}

	.progress-bar-container.large .progress-bar-target-line::after {
		width: 11px;
		height: 11px;
		box-shadow: 0 51px 0 0 var(--progress-target-base);
	}

	/* Planning Hover Card */
	.planning-hover-card {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		--card-arrow-bg: linear-gradient(135deg, #1a9fd8 0%, #158cba 50%, #127a9f 100%);
		background: white;
		border: 2px solid #158cba;
		border-radius: 12px;
		box-shadow: 0 12px 32px rgba(21, 140, 186, 0.2), 0 4px 12px rgba(0,0,0,0.15);
		padding: 0;
		width: min(560px, calc(100vw - 24px));
		min-width: 320px;
		max-width: 560px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		z-index: 200000;
		font-size: 13px;
	}

	.planning-hover-card.transitioning {
		display: block;
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.planning-hover-card.show {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: all;
		transform: translateY(0);
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.planning-hover-card.position-above {
		transform: translateY(8px);
	}

	.planning-hover-card.position-above.show {
		transform: translateY(0);
	}

	/* Planning card arrows */
	.planning-hover-card::before {
		content: '';
		position: absolute;
		top: -8px;
		left: var(--arrow-left, 50px);
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid #158cba;
	}

	.planning-hover-card::after {
		content: '';
		position: absolute;
		top: -6px;
		left: calc(var(--arrow-left, 50px) + 1px);
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #158cba;
	}

	.planning-hover-card.position-above::before {
		top: auto;
		bottom: -8px;
		border-bottom: none;
		border-top: 8px solid #158cba;
	}

	.planning-hover-card.position-above::after {
		top: auto;
		bottom: -6px;
		border-bottom: none;
		border-top: 7px solid #158cba;
	}

	/* Planning Card Content */
	.planning-card-header {
		background: linear-gradient(135deg, #1a9fd8 0%, #158cba 50%, #127a9f 100%);
		color: white;
		padding: 16px;
		border-radius: 10px 10px 0 0;
		box-shadow: 0 2px 8px rgba(21, 140, 186, 0.3);
		text-align: center;
		font-size: 15px;
		font-weight: 600;
	}

	.planning-card-body {
		padding: 20px;
		overflow-x: hidden;
	}

	.planning-card-progress {
		margin-bottom: 20px;
	}

	/* Reserve side room so the Richtwert label stays centered on its line with edge padding. */
	.planning-hover-card .planning-card-progress > .progress-bar-container.large {
		width: calc(100% - 56px);
		margin-left: 28px;
		margin-right: 28px;
		margin-bottom: 26px;
	}

	.progress-bar-container.large {
		height: 35px;
		border-radius: 18px;
		margin-bottom: 16px;
	}

	.progress-bar-container.large .progress-bar-fill-clip {
		border-radius: 18px;
	}

	.progress-bar-container.large .progress-bar-total,
	.progress-bar-container.large .progress-bar-planned,
	.progress-bar-container.large .progress-bar-actual,
	.progress-bar-container.large .progress-bar-done {
		border-radius: 18px;
	}

	.progress-bar-container.large .progress-bar-fill-clip > .progress-bar-total,
	.progress-bar-container.large .progress-bar-fill-clip > .progress-bar-planned,
	.progress-bar-container.large .progress-bar-fill-clip > .progress-bar-actual,
	.progress-bar-container.large .progress-bar-fill-clip > .progress-bar-done {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 18px;
		border-bottom-right-radius: 18px;
	}

	/* Hidden bar indicator - dashed outline showing the exact shape of the hidden bar */
	.hidden-bar-indicator {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		border: 3px dashed;
		border-radius: inherit;
		pointer-events: none;
		z-index: 9;
		background: transparent;
		box-sizing: border-box;
		animation: indicator-pulse 1.5s ease-in-out infinite;
	}

	.hidden-bar-indicator.is-narrow-pill {
		top: 1px;
		bottom: 1px;
		border-width: 2px;
		border-radius: 999px;
	}

	.hidden-bar-indicator.is-narrow-pill .hidden-indicator-label {
		display: none !important;
	}

	.hidden-indicator-label {
		position: absolute;
		right: 6px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 10px;
		font-weight: 700;
		color: #1f2d3d;
		text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75);
		white-space: nowrap;
		display: none;
	}

	.hidden-bar-indicator.with-label .hidden-indicator-label {
		display: block;
	}

	@keyframes indicator-pulse {
		0%, 100% { opacity: 0.9; }
		50% { opacity: 1; }
	}

	.hidden-bar-indicator.planned-type {
		border-color: var(--progress-planned-indicator-border);
		box-shadow: 0 0 8px var(--progress-planned-glow), inset 0 0 6px color-mix(in srgb, var(--progress-planned-base) 25%, transparent);
		filter: drop-shadow(0 0 3px color-mix(in srgb, var(--progress-planned-base) 40%, transparent));
	}

	.hidden-bar-indicator.actual-type {
		border-color: var(--progress-actual-indicator-border);
		box-shadow: 0 0 8px var(--progress-actual-glow), inset 0 0 6px color-mix(in srgb, var(--progress-actual-base) 25%, transparent);
		filter: drop-shadow(0 0 3px color-mix(in srgb, var(--progress-actual-base) 45%, transparent));
	}

	.hidden-bar-indicator.done-type {
		border-color: var(--progress-done-indicator-border);
		box-shadow: 0 0 8px var(--progress-done-glow), inset 0 0 6px color-mix(in srgb, var(--progress-done-base) 25%, transparent);
		filter: drop-shadow(0 0 3px color-mix(in srgb, var(--progress-done-base) 40%, transparent));
	}

	.hidden-bar-indicator.total-type {
		border-color: var(--progress-total-indicator-border);
		box-shadow: 0 0 8px var(--progress-total-glow), inset 0 0 6px color-mix(in srgb, var(--progress-total-base) 25%, transparent);
		filter: drop-shadow(0 0 3px color-mix(in srgb, var(--progress-total-base) 40%, transparent));
	}

	.progress-bar-container.large .progress-bar-target-line {
		top: -8px;
		bottom: -8px;
		width: 3px;
	}

	.progress-bar-container.large .progress-bar-target-line::after {
		width: 11px;
		height: 11px;
		box-shadow: 0 51px 0 0 var(--progress-target-base);
	}

	.progress-bar-container.large .progress-bar-target-line::before {
		width: 13px;
		height: 13px;
	}

	.progress-bar-target-label {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: var(--progress-target-label-bg);
		color: var(--progress-target-label-text);
		padding: 5px 10px;
		border-radius: 5px;
		font-size: 12px;
		font-weight: 700;
		white-space: nowrap;
		z-index: 3;
		pointer-events: auto;
		cursor: pointer;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}

	/* Compact target marker label used in the table-row progress bar. */
	.progress-bar-target-label-compact {
		left: var(--target-position, 50%);
		transform: translate(-50%, -50%);
		padding: 4px 8px;
		font-size: 11px;
		font-weight: 700;
		line-height: 1.15;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,0.18);
		pointer-events: none;
	}

	/* Labels inside progress bars */
	.progress-bar-label {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		font-size: 12px;
		font-weight: 700;
		white-space: nowrap;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	.progress-bar-label.actual-label {
		left: 10px;
		color: white;
		text-shadow: 0 1px 2px rgba(0,0,0,0.3);
	}

	.progress-bar-label.done-label {
		left: 10px;
		color: white;
		text-shadow: 0 1px 2px rgba(0,0,0,0.3);
	}

	.progress-bar-label.planned-label {
		right: 10px;
		color: var(--progress-planned-label-text);
		text-shadow: 0 1px 1px rgba(255,255,255,0.5);
	}

	/* Hide labels in small progress bar container */
	.progress-bar-container:not(.large) .progress-bar-label {
		display: none;
	}

	/* Labels hidden by default, shown via JS when there's enough space */
	.progress-bar-label.hidden {
		opacity: 0;
	}

	/* Temporarily hidden while dashed hidden-indicator label is shown on top. */
	.progress-bar-label.suppressed-by-indicator {
		opacity: 0 !important;
	}

	.planning-legend {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.legend-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 12px;
		border-radius: 8px;
		transition: all 0.2s ease;
		cursor: pointer;
	}

	.legend-item:hover,
	.legend-item.hovered {
		background: var(--progress-track-base, #ECEBE7);
		transform: translateX(4px);
	}

	.legend-item.is-zero {
		opacity: 0.62;
		cursor: default;
		pointer-events: none;
	}

	.legend-item.is-zero:hover,
	.legend-item.is-zero.hovered {
		background: transparent;
		transform: none;
	}

	.legend-item-left {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.eigene-stunden-legend .legend-item-right {
		display: grid;
		grid-template-columns: 76px 66px 68px 44px;
		align-items: center;
		column-gap: 6px;
		margin-left: auto;
		margin-right: 0;
		min-width: 0;
		justify-items: end;
		flex: 0 0 auto;
	}

	.eigene-stunden-legend .legend-item-expandable {
		position: relative;
	}

	.eigene-stunden-legend .legend-item-expandable .legend-item-left {
		flex: 1;
		min-width: 0;
	}

	.eigene-stunden-legend .legend-item-right .legend-value {
		min-width: 68px;
		text-align: right;
		grid-column: 3;
		justify-self: end;
	}

	.eigene-stunden-legend .legend-item-right .legend-expand-toggle,
	.eigene-stunden-legend .legend-item-right .legend-expand-spacer {
		grid-column: 4;
		justify-self: center;
	}

	.eigene-stunden-legend .legend-expand-toggle,
	.stunden-helfer-staff-hover-summary .legend-expand-toggle {
		border: 1px solid #6f879f;
		background: linear-gradient(180deg, #ffffff 0%, #dce8f4 100%);
		color: #2f4c65;
		-webkit-appearance: none;
		appearance: none;
		background-origin: border-box;
		background-clip: border-box;
		border-radius: 999px;
		font-size: 0;
		font-weight: 800;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, filter 0.16s ease;
		width: 30px;
		min-width: 30px;
		max-width: 30px;
		height: 24px;
		min-height: 24px;
		max-height: 24px;
		line-height: 1;
		box-shadow: var(--ui-press-neutral-shadow);
	}

	.eigene-stunden-legend .legend-expand-text,
	.stunden-helfer-staff-hover-summary .legend-expand-text {
		display: none;
	}

	.eigene-stunden-legend .legend-expand-spacer,
	.stunden-helfer-staff-hover-summary .legend-expand-spacer {
		display: inline-block;
		width: 30px;
		height: 24px;
		opacity: 0;
		pointer-events: none;
	}

	.eigene-stunden-legend .legend-expand-toggle:hover,
	.stunden-helfer-staff-hover-summary .legend-expand-toggle:hover {
		transform: translateY(-1px);
		filter: none;
		box-shadow: var(--ui-press-neutral-hover-shadow);
	}

	.eigene-stunden-legend .legend-expand-toggle:active,
	.stunden-helfer-staff-hover-summary .legend-expand-toggle:active {
		transform: translateY(1px);
		filter: none;
		box-shadow: var(--ui-press-neutral-active-shadow);
	}

	.eigene-stunden-legend .legend-expand-toggle:focus,
	.stunden-helfer-staff-hover-summary .legend-expand-toggle:focus {
		outline: none;
		box-shadow: none;
	}

	.eigene-stunden-legend .legend-expand-toggle:focus-visible,
	.stunden-helfer-staff-hover-summary .legend-expand-toggle:focus-visible {
		outline: none;
		box-shadow: 0 0 0 2px rgba(61, 122, 169, 0.24);
	}

	.eigene-stunden-legend .legend-expand-icon,
	.stunden-helfer-staff-hover-summary .legend-expand-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		transform: rotate(90deg);
		transition: transform 0.2s ease;
	}

	.eigene-stunden-legend .legend-expand-icon::before,
	.stunden-helfer-staff-hover-summary .legend-expand-icon::before {
		content: none;
	}

	.eigene-stunden-legend .legend-item.expanded {
		background: linear-gradient(180deg, #fdfefe 0%, #f4f8fb 100%);
		transform: none;
		box-shadow: 0 1px 2px rgba(26, 49, 66, 0.08);
		filter: none;
	}

	.eigene-stunden-legend .legend-item.expanded .legend-expand-toggle {
		background: linear-gradient(180deg, #ffffff 0%, #dce8f4 100%);
	}

	.eigene-stunden-legend .legend-item.expanded .legend-expand-icon {
		transform: rotate(-90deg);
	}

	.stunden-helfer-staff-hover-summary .stunden-helfer-donut-summary-item.is-expanded .legend-expand-toggle {
		background: linear-gradient(180deg, #ffffff 0%, #dce8f4 100%);
	}

	.stunden-helfer-staff-hover-summary .stunden-helfer-donut-summary-item.is-expanded .legend-expand-icon {
		transform: rotate(-90deg);
	}

	/* Align Eigene-Stunden legend item visuals with Stunden-&-Helfer chips
	   while keeping expandable detail panels unchanged. */
	.eigene-stunden-legend {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.eigene-stunden-legend .legend-item {
		border: 1px solid transparent;
		border-radius: 8px;
		padding: 6px 11px;
		min-height: 32px;
		background: linear-gradient(180deg, #fdfefe 0%, #f4f8fb 100%);
		box-shadow: 0 1px 2px rgba(26, 49, 66, 0.08);
		transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
	}

	.eigene-stunden-legend .legend-item:hover,
	.eigene-stunden-legend .legend-item.hovered {
		background: linear-gradient(180deg, #fdfefe 0%, #f4f8fb 100%);
		transform: translateY(-1px);
		box-shadow: 0 0 0 2px rgba(58, 90, 115, 0.22), 0 3px 6px rgba(26, 49, 66, 0.16);
		filter: saturate(1.06);
	}

	.eigene-stunden-legend .legend-item.expanded {
		transform: none;
		box-shadow: 0 1px 2px rgba(26, 49, 66, 0.08);
		filter: none;
	}

	.eigene-stunden-legend .legend-item-left {
		gap: 0;
	}

	.eigene-stunden-legend .legend-color-box {
		display: none;
	}

	.eigene-stunden-legend .legend-label,
	.eigene-stunden-legend .legend-value {
		font-size: 12px;
		font-weight: 700;
		white-space: nowrap;
	}

	.eigene-stunden-legend .legend-label {
		color: #2f4c62;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.eigene-stunden-legend .legend-value {
		color: #2f4c62;
	}

	.eigene-stunden-legend .legend-item[data-type="total"] {
		border-color: var(--progress-total-indicator-border);
		background: var(--progress-total-gradient);
	}

	.eigene-stunden-legend .legend-item[data-type="total"] .legend-label,
	.eigene-stunden-legend .legend-item[data-type="total"] .legend-value {
		color: var(--progress-total-text);
		text-shadow: 0 1px 1px rgba(255,255,255,0.5);
	}

	.eigene-stunden-legend .legend-item[data-type="planned"] {
		border-color: var(--progress-planned-indicator-border);
		background: var(--progress-planned-gradient);
	}

	.eigene-stunden-legend .legend-item[data-type="planned"] .legend-label,
	.eigene-stunden-legend .legend-item[data-type="planned"] .legend-value {
		color: var(--progress-planned-label-text);
		text-shadow: 0 1px 1px rgba(255,255,255,0.45);
	}

	.eigene-stunden-legend .legend-item[data-type="actual"] {
		border-color: var(--progress-actual-indicator-border);
		background: var(--progress-actual-gradient);
	}

	.eigene-stunden-legend .legend-item[data-type="actual"] .legend-label,
	.eigene-stunden-legend .legend-item[data-type="actual"] .legend-value {
		color: var(--state-active-text);
		text-shadow: 0 1px 0 rgba(255,255,255,0.35);
	}

	.eigene-stunden-legend .legend-item[data-type="done"] {
		border-color: var(--progress-done-indicator-border);
		background: var(--progress-done-gradient);
	}

	.eigene-stunden-legend .legend-item[data-type="done"] .legend-label,
	.eigene-stunden-legend .legend-item[data-type="done"] .legend-value {
		color: var(--state-done-text);
		text-shadow: 0 1px 0 rgba(255,255,255,0.35);
	}

	.legend-color-box {
		width: 24px;
		height: 24px;
		border-radius: 6px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.2);
		transition: all 0.2s ease;
	}

	.legend-item:hover .legend-color-box,
	.legend-item.hovered .legend-color-box {
		transform: scale(1.2);
	}

	.legend-color-box.target {
		background: transparent;
		position: relative;
		box-shadow: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.legend-color-box.target::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 0;
		bottom: 0;
		width: 3px;
		background: var(--progress-target-dash);
		transform: translateX(-50%);
	}

	/* Dots at top and bottom of target legend line */
	.legend-color-box.target::after {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 6px;
		height: 6px;
		background: var(--progress-target-base);
		border-radius: 50%;
		box-shadow: 0 18px 0 0 var(--progress-target-base);
	}

	.legend-color-box.planned {
		background: var(--progress-planned-gradient);
	}

	.legend-color-box.actual {
		background: var(--progress-actual-gradient);
	}

	.legend-color-box.done {
		background: var(--progress-done-gradient);
	}

	.legend-item:hover .legend-color-box.planned,
	.legend-item.hovered .legend-color-box.planned {
		background: var(--progress-planned-hover-gradient);
		box-shadow: 0 2px 8px var(--progress-planned-glow);
	}

	.legend-item:hover .legend-color-box.actual,
	.legend-item.hovered .legend-color-box.actual {
		background: var(--progress-actual-hover-gradient);
		box-shadow: 0 2px 8px var(--progress-actual-glow);
	}

	.legend-item:hover .legend-color-box.done,
	.legend-item.hovered .legend-color-box.done {
		background: var(--progress-done-hover-gradient);
		box-shadow: 0 2px 8px var(--progress-done-glow);
	}

	.legend-item:hover .legend-color-box.target::before,
	.legend-item.hovered .legend-color-box.target::before {
		background: var(--progress-target-dash-hover);
	}

	.legend-item:hover .legend-color-box.target::after,
	.legend-item.hovered .legend-color-box.target::after {
		background: var(--progress-target-hover-base);
		box-shadow: 0 18px 0 0 var(--progress-target-hover-base);
	}

	.legend-label {
		font-weight: 600;
		color: #333;
		font-size: 13px;
	}

	.legend-value {
		font-weight: 700;
		color: #158cba;
		font-size: 14px;
	}

	/* Planning hover-card legend adopts the same pill language as
	   Stunden & Helfer summary labels. */
	.planning-hover-card .planning-legend {
		width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 6px 8px;
	}

	.planning-hover-card .planning-legend .legend-item {
		border: 1px solid transparent;
		border-radius: 999px;
		padding: 6px 11px;
		min-height: 36px;
		background: linear-gradient(180deg, #fdfefe 0%, #f4f8fb 100%);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		box-shadow: 0 1px 2px rgba(26, 49, 66, 0.08);
		transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
		cursor: pointer;
	}

	.planning-hover-card .planning-legend .legend-item:hover,
	.planning-hover-card .planning-legend .legend-item.hovered {
		transform: translateY(-1px);
		background: linear-gradient(180deg, #fdfefe 0%, #f4f8fb 100%);
		box-shadow: 0 0 0 2px rgba(58, 90, 115, 0.22), 0 3px 6px rgba(26, 49, 66, 0.16);
		filter: saturate(1.06);
	}

	.planning-hover-card .planning-legend .legend-item-left {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 0;
	}

	.planning-hover-card .planning-legend .legend-color-box {
		display: none;
	}

	.planning-hover-card .planning-legend .legend-label {
		font-size: 12px;
		font-weight: 700;
		color: #2f4c62;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.planning-hover-card .planning-legend .legend-value {
		font-size: 12px;
		font-weight: 700;
		color: #2f4c62;
		white-space: nowrap;
	}

	.planning-hover-card .planning-legend .legend-item[data-type="target"] {
		border: 1px dashed color-mix(in srgb, var(--progress-target-base) 82%, black);
		background: color-mix(in srgb, var(--progress-target-base) 8%, white);
	}

	.planning-hover-card .planning-legend .legend-item[data-type="target"] .legend-label,
	.planning-hover-card .planning-legend .legend-item[data-type="target"] .legend-value {
		color: var(--progress-target-base);
		text-shadow: none;
	}

	.planning-hover-card .planning-legend .legend-item[data-type="planned"] {
		border-color: var(--progress-planned-indicator-border);
		background: var(--progress-planned-gradient);
	}

	.planning-hover-card .planning-legend .legend-item[data-type="planned"] .legend-label,
	.planning-hover-card .planning-legend .legend-item[data-type="planned"] .legend-value {
		color: var(--progress-planned-label-text);
		text-shadow: 0 1px 1px rgba(255,255,255,0.45);
	}

	.planning-hover-card .planning-legend .legend-item[data-type="actual"] {
		border-color: var(--progress-actual-indicator-border);
		background: var(--progress-actual-gradient);
	}

	.planning-hover-card .planning-legend .legend-item[data-type="actual"] .legend-label,
	.planning-hover-card .planning-legend .legend-item[data-type="actual"] .legend-value {
		color: var(--state-active-text);
		text-shadow: 0 1px 0 rgba(255,255,255,0.35);
	}

	/* Highlight effect for progress bars on hover */
	.progress-bar-planned.highlighted {
		filter: brightness(1.15);
		box-shadow: 0 2px 6px var(--progress-planned-glow);
	}

	.progress-bar-actual.highlighted {
		filter: brightness(1.15);
		box-shadow: 0 2px 6px var(--progress-actual-glow);
	}

	.progress-bar-done.highlighted {
		filter: brightness(1.15);
		box-shadow: 0 2px 6px var(--progress-done-glow);
	}

	.progress-bar-target-line.highlighted {
		filter: brightness(1.2);
		box-shadow: 0 0 8px var(--progress-target-glow);
	}

	/* Eigener Status Column Styling */
	.eigener-status-column-header {
		width: auto !important;
		min-width: 148px;
		max-width: none !important;
		text-align: center;
	}

	.eigener-status-cell {
		width: auto;
		min-width: 148px;
		max-width: none;
		text-align: left;
		white-space: normal;
		position: relative;
		cursor: default;
		overflow: hidden;
		box-sizing: border-box;
	}

	.eigener-status-main-line {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 4px;
		flex-wrap: nowrap;
	}

	.eigener-status-action-row {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 8px;
	}

	.eigener-status-action-row.is-layout-spacer {
		visibility: hidden;
		pointer-events: none;
	}

	.eigener-status-badges {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		margin: 0;
	}

	.legend-status-btn.interval-done-toggle-btn {
		min-width: 112px;
		min-height: 24px;
		padding: 3px 10px;
		align-self: center;
	}

	.legend-status-btn.interval-done-toggle-btn .glyphicon {
		font-size: 12px;
	}

	.legend-status-btn.interval-done-toggle-btn .legend-status-btn-text {
		line-height: 1.2;
	}

	/* Tablet-density mode from JS layout profile: keep deadline pill icon only. */
	#receiptstab.receiptstab-layout-tablet td.eigener-status-cell .eigener-status-deadline-pill .eigener-status-label {
		display: none;
	}

	#receiptstab.receiptstab-layout-tablet td.eigener-status-cell .eigener-status-deadline-pill {
		padding-left: 6px;
		padding-right: 6px;
	}

	.eigener-status-cell.is-status-toggling .interval-done-toggle-btn {
		opacity: 0.65;
		pointer-events: none;
	}

	.eigener-status-cell.is-saving {
		opacity: 0.7;
		pointer-events: none;
	}

	.eigener-status-hover-card {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		--card-arrow-bg: linear-gradient(135deg, #1a9fd8 0%, #158cba 50%, #127a9f 100%);
		background: white;
		border: 2px solid #158cba;
		border-radius: 12px;
		box-shadow: 0 12px 32px rgba(21, 140, 186, 0.2), 0 4px 12px rgba(0,0,0,0.15);
		padding: 0;
		min-width: 360px;
		max-width: 460px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		z-index: 200000;
		font-size: 13px;
	}

	.eigener-status-hover-card.transitioning {
		display: block;
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.eigener-status-hover-card.show {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: all;
		transform: translateY(0);
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.eigener-status-hover-card.position-above {
		transform: translateY(8px);
	}

	.eigener-status-hover-card.position-above.show {
		transform: translateY(0);
	}

	.eigener-status-hover-card .card-body {
		max-height: 62vh;
	}

	.eigener-status-detail-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
		--eigener-status-pill-col-width: 132px;
	}

	.eigener-status-detail-row {
		display: grid;
		grid-template-columns: var(--eigener-status-pill-col-width) minmax(0, 1fr);
		gap: 8px;
		align-items: center;
	}

	.eigener-status-deadline-row.is-hidden {
		display: none;
	}

	.eigener-status-detail-row .eigener-status-pill {
		max-width: none;
		font-size: 11px;
		padding: 4px 10px;
		justify-self: start;
	}

	.eigener-status-detail-text {
		color: #465867;
		font-size: 12px;
		line-height: 1.35;
		padding-top: 0;
		align-self: center;
	}

	/* Eigene Stunden Column Styling */
	.eigene-stunden-column-header {
		width: auto !important;
		min-width: 144px;
		max-width: none !important;
	}

	.eigene-stunden-cell {
		position: relative;
		width: auto !important;
		min-width: 144px;
		max-width: none !important;
		cursor: default;
		padding: 8px 8px !important;
		box-sizing: border-box;
	}

	#receiptstab .eigene-stunden-row-height-anchor {
		min-height: 84px;
		display: flex;
		align-items: center;
		width: 100%;
	}

	#receiptstab .eigene-stunden-row-height-anchor > .progress-bar-container.compact-own-progress {
		flex: 0 0 auto;
	}

	.stunden-helfer-inline-meta {
		margin-top: 6px;
		font-size: 11px;
		line-height: 1.25;
		color: #5f7484;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}

	.stunden-helfer-carousel {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 8px;
		width: 100%;
		min-width: 0;
	}

	.stunden-helfer-carousel-cell {
		width: 100%;
		margin: 0 auto;
	}

	/* Keep table rows stable: cell carousel always uses the donut baseline height. */
	.stunden-helfer-carousel-cell .stunden-helfer-carousel-viewport {
		height: 84px;
		overflow: hidden;
	}

	.stunden-helfer-carousel-cell .stunden-helfer-carousel-slide {
		min-height: 84px;
	}

	.stunden-helfer-carousel-hover {
		width: 100%;
		column-gap: 10px;
	}

	.stunden-helfer-carousel-viewport {
		position: relative;
		overflow: hidden;
		min-width: 0;
	}

	.stunden-helfer-carousel-viewport.is-switching {
		transition: height 0.4s ease;
	}

	.stunden-helfer-carousel-slide {
		width: 100%;
		min-width: 0;
		transition: transform 0.4s ease, opacity 0.3s ease;
	}

	.stunden-helfer-carousel-slide.is-hidden {
		display: none;
	}

	.stunden-helfer-carousel-slide.slide-out-left,
	.stunden-helfer-carousel-slide.slide-out-right,
	.stunden-helfer-carousel-slide.slide-in-left,
	.stunden-helfer-carousel-slide.slide-in-right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.stunden-helfer-carousel-slide.slide-out-left {
		transform: translateX(-100%);
		opacity: 0;
	}

	.stunden-helfer-carousel-slide.slide-out-right {
		transform: translateX(100%);
		opacity: 0;
	}

	.stunden-helfer-carousel-slide.slide-in-left {
		transform: translateX(-100%);
		opacity: 0;
	}

	.stunden-helfer-carousel-slide.slide-in-right {
		transform: translateX(100%);
		opacity: 0;
	}

	.stunden-helfer-carousel-nav {
		position: relative;
		width: 30px;
		height: 24px;
		border-radius: 999px;
		border: 1px solid #afc5d5;
		background: linear-gradient(180deg, #f9fcfe 0%, #e8f2f8 100%);
		color: #2f5872;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-shadow: var(--ui-press-neutral-shadow);
		visibility: visible;
		transition:
			transform 0.16s ease,
			box-shadow 0.16s ease,
			border-color 0.16s ease,
			filter 0.16s ease,
			opacity 0.36s ease,
			visibility 0s linear 0s;
		z-index: 4;
	}

	.stunden-helfer-carousel-cell.is-nav-faded .stunden-helfer-carousel-nav {
		opacity: 0;
		visibility: hidden;
		transform: translateY(2px) scale(0.94);
		filter: saturate(0.82);
		pointer-events: none;
		transition:
			transform 0.26s ease,
			box-shadow 0.26s ease,
			border-color 0.26s ease,
			filter 0.26s ease,
			opacity 0.36s ease,
			visibility 0s linear 0.36s;
	}

	.stunden-helfer-carousel-nav.is-prev {
		left: auto;
	}

	.stunden-helfer-carousel-nav.is-next {
		right: auto;
	}

	.stunden-helfer-carousel-hover .stunden-helfer-carousel-nav {
		width: 34px;
		height: 26px;
		border-radius: 999px;
		font-size: 17px;
	}

	.stunden-helfer-carousel-hover .stunden-helfer-carousel-nav.is-prev {
		left: auto;
	}

	.stunden-helfer-carousel-hover .stunden-helfer-carousel-nav.is-next {
		right: auto;
	}

	.stunden-helfer-carousel-nav:hover:not(:disabled) {
		transform: translateY(-1px);
		border-color: #9bb8cc;
		filter: saturate(1.06) brightness(1.02);
		box-shadow: var(--ui-press-neutral-hover-shadow);
	}

	.stunden-helfer-carousel-nav:active:not(:disabled) {
		transform: translateY(1px);
		box-shadow: var(--ui-press-neutral-active-shadow);
	}

	.stunden-helfer-carousel-nav:disabled {
		opacity: 0.35;
		cursor: default;
		pointer-events: none;
		box-shadow: none;
	}

	.stunden-helfer-staff-compact-shell {
		width: 100%;
		height: 84px;
		margin: 0 auto;
		position: relative;
		min-width: 0;
	}

	.stunden-helfer-staff-compact-name {
		position: absolute;
		left: 0;
		right: 0;
		top: 5px;
		font-size: 11px;
		font-weight: 700;
		line-height: 1.2;
		color: #355268;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.stunden-helfer-staff-compact-progress {
		position: absolute;
		left: 10px;
		right: 26px;
		top: 50%;
		margin-top: -14.5px;
		width: auto !important;
		margin-right: 0;
	}

	.stunden-helfer-staff-compact-progress .own-hours-edge-label {
		font-size: 10px;
		padding: 2px 6px;
		transform: translate(-60%, -50%);
	}

	.stunden-helfer-staff-hover-panel {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding-top: 2px;
	}

	.stunden-helfer-staff-hover-name {
		font-size: 13px;
		font-weight: 700;
		line-height: 1.2;
		color: #2f4c62;
		text-align: center;
	}

	.stunden-helfer-staff-hover-progress {
		margin-right: 0;
		margin-bottom: 0;
	}

	.stunden-helfer-staff-hover-progress .progress-bar-container.large {
		margin-bottom: 0;
	}

	.stunden-helfer-staff-hover-summary {
		max-width: none;
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		padding: 2px 5px 6px;
	}

	.stunden-helfer-staff-hover-summary .stunden-helfer-donut-summary-item {
		align-items: center;
		min-height: 34px;
	}

	.stunden-helfer-staff-hover-summary .stunden-helfer-donut-summary-item.is-zero {
		opacity: 0.62;
		cursor: default;
		pointer-events: none;
		transform: none;
		filter: none;
	}

	.stunden-helfer-staff-hover-summary .legend-item-left {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 0;
	}

	.stunden-helfer-staff-hover-summary .legend-item-left .stunden-helfer-summary-label {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.stunden-helfer-staff-hover-summary .legend-item-right {
		display: grid;
		grid-template-columns: 68px 44px;
		align-items: center;
		column-gap: 6px;
		margin-left: auto;
		margin-right: 0;
		min-width: 0;
		justify-items: end;
		flex: 0 0 auto;
	}

	.stunden-helfer-staff-hover-summary .stunden-helfer-summary-value {
		min-width: 68px;
		text-align: right;
		grid-column: 1;
		justify-self: end;
	}

	.stunden-helfer-staff-hover-summary .legend-item-right .legend-expand-toggle,
	.stunden-helfer-staff-hover-summary .legend-item-right .legend-expand-spacer {
		grid-column: 2;
		justify-self: center;
	}

	.stunden-helfer-staff-hover-summary .sh-legend-inline-details {
		margin: 2px 0 6px 0;
	}

	.stunden-helfer-donut {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.stunden-helfer-donut-compact-shell {
		width: min(var(--receiptstab-donut-shell-width, 186px), 100%);
		height: 84px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	.stunden-helfer-donut-compact {
		width: 84px;
		height: 84px;
		flex: 0 0 auto;
	}

	.stunden-helfer-donut-hover {
		width: 244px;
		height: 244px;
		flex: 0 0 244px;
	}

	.stunden-helfer-donut-svg {
		width: 100%;
		height: 100%;
		display: block;
	}

	.stunden-helfer-donut-track,
	.stunden-helfer-donut-segment {
		fill: none;
		stroke-linecap: butt;
		transform-origin: 60px 60px;
		transform: rotate(-90deg);
		pointer-events: stroke;
	}

	.stunden-helfer-donut-target-outline-segment {
		fill: none;
		stroke: var(--progress-target-base);
		stroke-linecap: round;
		transform-origin: 60px 60px;
		transform: rotate(-90deg);
		filter: drop-shadow(0 0 1px color-mix(in srgb, var(--progress-target-base) 60%, transparent));
		opacity: 0.92;
		pointer-events: stroke;
	}

	.stunden-helfer-donut-compact .stunden-helfer-donut-target-outline-segment {
		stroke-width: 2.2;
	}

	.stunden-helfer-donut-hover .stunden-helfer-donut-target-outline-segment {
		stroke-width: 2.2;
	}

	.stunden-helfer-donut-track.is-planned {
		stroke: color-mix(in srgb, var(--progress-planned-base) 24%, white);
		stroke-width: 11;
	}

	.stunden-helfer-donut-track.is-actual {
		stroke: color-mix(in srgb, var(--progress-actual-base) 24%, white);
		stroke-width: 11;
	}

	.stunden-helfer-donut-track.is-done {
		stroke: color-mix(in srgb, var(--progress-done-base) 24%, white);
		stroke-width: 11;
	}

	.stunden-helfer-donut-segment.is-planned {
		stroke: var(--progress-planned-base);
		stroke-width: 11;
		filter: drop-shadow(0 0 1px var(--progress-planned-glow));
	}

	.stunden-helfer-donut-segment.is-actual {
		stroke: var(--progress-actual-base);
		stroke-width: 11;
		filter: drop-shadow(0 0 1px var(--progress-actual-glow));
	}

	.stunden-helfer-donut-segment.is-done {
		stroke: var(--progress-done-base);
		stroke-width: 11;
		filter: drop-shadow(0 0 1px var(--progress-done-glow));
	}

	.stunden-helfer-donut-compact .stunden-helfer-donut-track.is-planned,
	.stunden-helfer-donut-compact .stunden-helfer-donut-track.is-actual,
	.stunden-helfer-donut-compact .stunden-helfer-donut-track.is-done,
	.stunden-helfer-donut-compact .stunden-helfer-donut-segment.is-planned,
	.stunden-helfer-donut-compact .stunden-helfer-donut-segment.is-actual,
	.stunden-helfer-donut-compact .stunden-helfer-donut-segment.is-done {
		stroke-width: 13;
	}

	.stunden-helfer-donut-hover .stunden-helfer-donut-track.is-planned,
	.stunden-helfer-donut-hover .stunden-helfer-donut-track.is-actual,
	.stunden-helfer-donut-hover .stunden-helfer-donut-track.is-done,
	.stunden-helfer-donut-hover .stunden-helfer-donut-segment.is-planned,
	.stunden-helfer-donut-hover .stunden-helfer-donut-segment.is-actual,
	.stunden-helfer-donut-hover .stunden-helfer-donut-segment.is-done {
		stroke-width: 11;
	}

	.stunden-helfer-donut-hover .stunden-helfer-donut-track,
	.stunden-helfer-donut-hover .stunden-helfer-donut-segment,
	.stunden-helfer-donut-hover .stunden-helfer-donut-target-outline-segment {
		transition: opacity 0.18s ease, filter 0.18s ease, stroke-width 0.18s ease;
	}

	.stunden-helfer-donut-hover .stunden-helfer-donut-track.is-interaction-highlight,
	.stunden-helfer-donut-hover .stunden-helfer-donut-segment.is-interaction-highlight,
	.stunden-helfer-donut-hover .stunden-helfer-donut-target-outline-segment.is-interaction-highlight {
		opacity: 1;
		filter: brightness(1.06) saturate(1.08);
	}

	.stunden-helfer-donut-hover .stunden-helfer-donut-segment.is-interaction-highlight {
		stroke-width: 12 !important;
	}

	.stunden-helfer-donut-hover .stunden-helfer-donut-track.is-interaction-muted,
	.stunden-helfer-donut-hover .stunden-helfer-donut-segment.is-interaction-muted,
	.stunden-helfer-donut-hover .stunden-helfer-donut-target-outline-segment.is-interaction-muted {
		opacity: 0.24;
		filter: none;
	}

	.stunden-helfer-donut-center {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		pointer-events: none;
	}

	.stunden-helfer-donut-value {
		font-size: 14px;
		font-weight: 800;
		color: color-mix(in srgb, var(--progress-actual-base) 78%, #18384d);
	}

	.stunden-helfer-donut-hover .stunden-helfer-donut-value {
		font-size: 18px;
	}

	.stunden-helfer-donut-compact .stunden-helfer-donut-value {
		font-size: 13px;
	}

	.stunden-helfer-donut-label {
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: #647a8b;
	}

	.stunden-helfer-donut-hover .stunden-helfer-donut-label {
		font-size: 11px;
	}

	.stunden-helfer-donut-hover .stunden-helfer-donut-center {
		min-width: 46px;
		min-height: 46px;
		padding: 2px 6px;
		border-radius: 999px;
		line-height: 1.1;
		background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
		border: 1px solid #d5e0e8;
		box-shadow: 0 1px 3px rgba(26, 49, 66, 0.15);
	}

	.stunden-helfer-donut-interaction-center {
		position: absolute;
		inset: 0;
		margin: auto;
		width: 55px;
		height: 55px;
		box-sizing: border-box;
		border-radius: 999px;
		display: grid;
		place-items: center;
		background: linear-gradient(180deg, #ffffff 0%, #f3f8fc 100%);
		border: 2px solid #b8c8d6;
		box-shadow: 0 2px 6px rgba(26, 49, 66, 0.18);
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.12s ease, border-color 0.16s ease, box-shadow 0.16s ease;
		z-index: 3;
	}

	.stunden-helfer-donut-interaction-center.show {
		opacity: 1;
	}

	.stunden-helfer-donut-interaction-center.is-target {
		background: color-mix(in srgb, var(--progress-target-base) 8%, white);
		border: 2px dashed color-mix(in srgb, var(--progress-target-base) 82%, black);
		box-shadow: 0 2px 7px color-mix(in srgb, var(--progress-target-base) 26%, transparent);
	}

	.stunden-helfer-donut-interaction-center.is-planned {
		background: var(--progress-planned-gradient);
		border-color: var(--progress-planned-indicator-border);
		box-shadow: 0 2px 7px color-mix(in srgb, var(--progress-planned-base) 32%, transparent);
	}

	.stunden-helfer-donut-interaction-center.is-actual {
		background: var(--progress-actual-gradient);
		border-color: var(--progress-actual-indicator-border);
		box-shadow: 0 2px 7px color-mix(in srgb, var(--progress-actual-base) 32%, transparent);
	}

	.stunden-helfer-donut-interaction-center.is-done {
		background: var(--progress-done-gradient);
		border-color: var(--progress-done-indicator-border);
		box-shadow: 0 2px 7px color-mix(in srgb, var(--progress-done-base) 32%, transparent);
	}

	.stunden-helfer-donut-interaction-value {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: 800;
		line-height: 1;
		font-variant-numeric: tabular-nums;
		color: #4b6273;
		letter-spacing: 0.01em;
		text-align: center;
	}

	.stunden-helfer-donut-interaction-center.is-target .stunden-helfer-donut-interaction-value {
		color: var(--progress-target-base);
	}

	.stunden-helfer-donut-interaction-center.is-planned .stunden-helfer-donut-interaction-value {
		color: var(--progress-planned-label-text);
	}

	.stunden-helfer-donut-interaction-center.is-actual .stunden-helfer-donut-interaction-value {
		color: var(--state-active-text);
	}

	.stunden-helfer-donut-interaction-center.is-done .stunden-helfer-donut-interaction-value {
		color: var(--state-done-text);
	}

	.stunden-helfer-donut-compact-grid {
		flex: 1 1 auto;
		min-width: 0;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 5px;
		align-content: center;
	}

	.stunden-helfer-donut-badge {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		width: 100%;
		min-width: 0;
		padding: 3px 6px;
		min-height: 19px;
		border-radius: 999px;
		font-size: 9px;
		font-weight: 700;
		line-height: 1.1;
		white-space: nowrap;
		pointer-events: auto;
		box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	}

	.stunden-helfer-donut-badge-value {
		font-size: 10px;
		font-weight: 700;
		line-height: 1.1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.stunden-helfer-donut-badge.is-target {
		background: color-mix(in srgb, var(--progress-target-base) 8%, white);
		color: var(--progress-target-base);
		border: 1px dashed color-mix(in srgb, var(--progress-target-base) 82%, black);
		text-shadow: none;
	}

	.stunden-helfer-donut-badge.is-planned {
		background: var(--progress-planned-gradient);
		color: var(--progress-planned-label-text);
		text-shadow: 0 1px 1px rgba(255,255,255,0.45);
	}

	.stunden-helfer-donut-badge.is-actual {
		background: var(--progress-actual-gradient);
		color: var(--state-active-text);
		text-shadow: 0 1px 0 rgba(255,255,255,0.35);
	}

	.stunden-helfer-donut-badge.is-done {
		background: var(--progress-done-gradient);
		color: var(--state-done-text);
		text-shadow: 0 1px 0 rgba(255,255,255,0.35);
	}

	/* Tablet-density mode from JS layout profile: reduce own-hours chrome. */
	#receiptstab.receiptstab-layout-tablet .stunden-helfer-carousel-cell .stunden-helfer-donut-compact-shell {
		width: min(112px, 100%);
		gap: 0;
	}

	#receiptstab.receiptstab-layout-tablet .stunden-helfer-carousel-cell .stunden-helfer-donut-compact-grid {
		display: none;
	}

	.stunden-helfer-donut-panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-top: -8px;
	}

	.stunden-helfer-donut-hover-head {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

	.stunden-helfer-donut-summary-hover {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 240px;
	}

	.stunden-helfer-donut-summary {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px 8px;
	}

	/* Staff bar slide uses a vertical legend (one item per row), unlike the donut 2x2 summary. */
	.stunden-helfer-donut-summary.stunden-helfer-staff-hover-summary {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.stunden-helfer-donut-summary-item {
		border: 1px solid transparent;
		border-radius: 999px;
		padding: 6px 11px;
		min-height: 30px;
		background: linear-gradient(180deg, #fdfefe 0%, #f4f8fb 100%);
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 8px;
		box-shadow: 0 1px 2px rgba(26, 49, 66, 0.08);
		transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
	}

	.stunden-helfer-donut-summary.stunden-helfer-staff-hover-summary .stunden-helfer-donut-summary-item {
		align-items: center;
		min-height: 34px;
	}

	.stunden-helfer-donut-summary-item.is-interaction-highlight {
		transform: translateY(-1px);
		box-shadow: 0 0 0 2px rgba(58, 90, 115, 0.22), 0 3px 6px rgba(26, 49, 66, 0.16);
		filter: saturate(1.06);
	}

	.stunden-helfer-donut-summary-item.is-interaction-muted {
		opacity: 0.45;
	}

	.stunden-helfer-donut-summary-item.is-planned {
		border-color: var(--progress-planned-indicator-border);
		background: var(--progress-planned-gradient);
	}

	.stunden-helfer-donut-summary-item.is-actual {
		border-color: var(--progress-actual-indicator-border);
		background: var(--progress-actual-gradient);
	}

	.stunden-helfer-donut-summary-item.is-done {
		border-color: var(--progress-done-indicator-border);
		background: var(--progress-done-gradient);
	}

	.stunden-helfer-donut-summary-item.is-total {
		border-color: var(--progress-total-indicator-border);
		background: var(--progress-total-gradient);
	}

	.stunden-helfer-staff-hover-summary .stunden-helfer-donut-summary-item[data-sh-staff-summary="total"] {
		border-style: solid;
		border-color: var(--progress-total-indicator-border);
		background: var(--progress-total-gradient);
	}

	.stunden-helfer-donut-summary-item.is-target {
		border: 1px dashed color-mix(in srgb, var(--progress-target-base) 82%, black);
		background: color-mix(in srgb, var(--progress-target-base) 8%, white);
		box-shadow: 0 1px 2px rgba(26, 49, 66, 0.06);
	}

	.stunden-helfer-summary-label {
		font-size: 12px;
		font-weight: 700;
		color: #2f4c62;
	}

	.stunden-helfer-summary-value {
		font-size: 12px;
		font-weight: 700;
		color: #2f4c62;
		white-space: nowrap;
	}

	.stunden-helfer-donut-summary-item.is-target .stunden-helfer-summary-label,
	.stunden-helfer-donut-summary-item.is-target .stunden-helfer-summary-value {
		color: var(--progress-target-base);
		text-shadow: none;
	}

	.stunden-helfer-donut-summary-item.is-total .stunden-helfer-summary-label,
	.stunden-helfer-donut-summary-item.is-total .stunden-helfer-summary-value {
		color: var(--progress-total-text);
		text-shadow: 0 1px 1px rgba(255,255,255,0.5);
	}

	.stunden-helfer-donut-summary-item.is-planned .stunden-helfer-summary-label,
	.stunden-helfer-donut-summary-item.is-planned .stunden-helfer-summary-value {
		color: var(--progress-planned-label-text);
		text-shadow: 0 1px 1px rgba(255,255,255,0.45);
	}

	.stunden-helfer-donut-summary-item.is-actual .stunden-helfer-summary-label,
	.stunden-helfer-donut-summary-item.is-actual .stunden-helfer-summary-value,
	.stunden-helfer-donut-summary-item.is-done .stunden-helfer-summary-label,
	.stunden-helfer-donut-summary-item.is-done .stunden-helfer-summary-value {
		color: var(--state-active-text);
		text-shadow: 0 1px 0 rgba(255,255,255,0.35);
	}

	.stunden-helfer-donut-summary-item.is-done .stunden-helfer-summary-label,
	.stunden-helfer-donut-summary-item.is-done .stunden-helfer-summary-value {
		color: var(--state-done-text);
	}

	.stunden-helfer-donut-summary-item.is-expanded {
		transform: none;
		box-shadow: 0 1px 2px rgba(26, 49, 66, 0.08);
		filter: none;
	}

	.sh-legend-inline-details-stack {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.stunden-helfer-donut-staff-list {
		width: 100%;
		max-height: 164px;
		overflow-y: auto;
		border: none;
		background: transparent;
		padding: 2px 3px;
		box-sizing: border-box;
	}

	.stunden-helfer-donut-staff-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 8px 10px;
		margin-bottom: 6px;
		border: 1px solid #c7d4df;
		border-radius: 13px;
		background: linear-gradient(180deg, #f9fbfd 0%, #edf3f8 100%);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
		transition: opacity 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
	}

	.stunden-helfer-donut-staff-row:last-child {
		margin-bottom: 0;
	}

	.stunden-helfer-donut-staff-row .staff-name {
		font-size: 11px;
		font-weight: 700;
		color: #355268;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		transition: color 0.16s ease, text-shadow 0.16s ease, opacity 0.16s ease;
	}

	.stunden-helfer-donut-staff-row .staff-hours-group {
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		gap: 7px;
		white-space: nowrap;
	}

	.stunden-helfer-donut-staff-row .staff-hours-chip {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 4px 11px;
		min-height: 24px;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.2;
		box-shadow: 0 1px 2px rgba(26, 49, 66, 0.14);
		transition: opacity 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, filter 0.16s ease;
	}

	.stunden-helfer-donut-staff-row.is-interaction-highlight {
		border-color: #9cb4c7;
		background: linear-gradient(180deg, #f8fbfd 0%, #ebf2f7 100%);
		box-shadow: inset 0 0 0 1px rgba(72, 104, 130, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
		transform: none;
	}

	.stunden-helfer-donut-staff-row.is-interaction-muted {
		opacity: 0.6;
	}

	.stunden-helfer-donut-staff-row .staff-name.is-interaction-highlight {
		color: #1f5f82;
		text-shadow: 0 1px 0 rgba(255,255,255,0.45);
	}

	.stunden-helfer-donut-staff-row .staff-name.is-interaction-muted {
		opacity: 0.66;
	}

	.stunden-helfer-donut-staff-row .staff-hours-chip.is-interaction-highlight {
		box-shadow: inset 0 0 0 1px rgba(72, 104, 130, 0.26), 0 1px 2px rgba(26, 49, 66, 0.16);
		transform: none;
		filter: saturate(1.04) brightness(1.01);
	}

	.stunden-helfer-donut-staff-row .staff-hours-chip.is-interaction-muted {
		opacity: 0.48;
	}

	.stunden-helfer-donut-staff-row .staff-hours-chip.is-planned {
		background: var(--progress-planned-gradient);
		border: 1px solid var(--progress-planned-indicator-border);
		color: var(--progress-planned-label-text);
		text-shadow: 0 1px 1px rgba(255,255,255,0.45);
	}

	.stunden-helfer-donut-staff-row .staff-hours-chip.is-actual {
		background: var(--progress-actual-gradient);
		border: 1px solid var(--progress-actual-indicator-border);
		color: var(--state-active-text);
		text-shadow: 0 1px 0 rgba(255,255,255,0.35);
	}

	.stunden-helfer-donut-staff-row .staff-hours-chip.is-done {
		background: var(--progress-done-gradient);
		border: 1px solid var(--progress-done-indicator-border);
		color: var(--state-done-text);
		text-shadow: 0 1px 0 rgba(255,255,255,0.35);
	}

	.stunden-helfer-donut-staff-row.is-main .staff-name {
		color: #1f6c8f;
	}

	/* Hover-card trigger cursor zones (not full cells). */
	.client-display,
	.category-badge,
	.receipts-date,
	.progress-bar-container.compact-planning-progress,
	.progress-bar-container.compact-planning-progress .progress-bar-total,
	.progress-bar-container.compact-planning-progress .progress-bar-planned,
	.progress-bar-container.compact-planning-progress .progress-bar-actual,
	.progress-bar-container.compact-planning-progress .progress-bar-done,
	.progress-bar-container.compact-planning-progress .progress-bar-target-line,
	.progress-bar-container.compact-planning-progress .progress-bar-target-label-compact,
	.progress-bar-container.compact-own-progress.is-empty,
	.progress-bar-container.compact-own-progress.is-empty .progress-bar-fill-clip,
	.progress-bar-container.compact-own-progress .progress-bar-total,
	.progress-bar-container.compact-own-progress .progress-bar-planned,
	.progress-bar-container.compact-own-progress .progress-bar-actual,
	.progress-bar-container.compact-own-progress .progress-bar-done,
	.own-hours-edge-label,
	.stunden-helfer-donut,
	.stunden-helfer-donut-badge,
	.stunden-helfer-donut-summary-item,
	.stunden-helfer-donut-staff-row,
	.stunden-helfer-donut-staff-row .staff-name,
	.stunden-helfer-donut-staff-row .staff-hours-chip,
	.stunden-helfer-donut-target-outline-segment,
	.stunden-helfer-donut-segment,
	.eigener-status-pill,
	.eigener-status-message-inline {
		cursor: pointer;
	}

	.eigene-stunden-cell .progress-bar-container.compact-own-progress {
		height: 29px;
		border-radius: 14px;
		background: var(--progress-track-base);
		box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
		overflow: visible;
	}

	/* Keep carousel compact bars aligned with the shared compact bar height. */
	.eigene-stunden-cell .progress-bar-container.stunden-helfer-staff-compact-progress {
		height: 29px;
		border-radius: 14px;
	}

	.eigene-stunden-cell .progress-bar-container.compact-own-progress .progress-bar-fill-clip > .progress-bar-total,
	.eigene-stunden-cell .progress-bar-container.compact-own-progress .progress-bar-fill-clip > .progress-bar-planned,
	.eigene-stunden-cell .progress-bar-container.compact-own-progress .progress-bar-fill-clip > .progress-bar-actual,
	.eigene-stunden-cell .progress-bar-container.compact-own-progress .progress-bar-fill-clip > .progress-bar-done {
		border-top-right-radius: 14px;
		border-bottom-right-radius: 14px;
	}

	.eigene-stunden-hover-card .progress-bar-container.large {
		overflow: hidden;
	}

	.eigene-stunden-cell .progress-bar-total,
	.eigene-stunden-cell .progress-bar-planned,
	.eigene-stunden-cell .progress-bar-actual,
	.eigene-stunden-cell .progress-bar-done {
		border-radius: 14px;
		border-top-left-radius: 14px;
		border-bottom-left-radius: 14px;
		background-clip: padding-box;
		box-shadow: none;
	}

	.eigene-stunden-hover-card .progress-bar-total,
	.eigene-stunden-hover-card .progress-bar-planned,
	.eigene-stunden-hover-card .progress-bar-actual,
	.eigene-stunden-hover-card .progress-bar-done {
		border-top-left-radius: 16px;
		border-bottom-left-radius: 16px;
		background-clip: padding-box;
		box-shadow: none;
	}

	.eigene-stunden-cell .progress-bar-total {
		z-index: 1;
	}

	.eigene-stunden-cell .progress-bar-planned {
		z-index: 2;
	}

	.eigene-stunden-cell .progress-bar-actual {
		z-index: 3;
	}

	/* Right-edge value badge for the in-table own-hours bar. */
	.own-hours-edge-label {
		position: absolute;
		left: calc(100% - 2px);
		top: 50%;
		transform: translate(-52%, -50%);
		padding: 4px 8px;
		border-radius: 6px;
		font-size: 11px;
		font-weight: 700;
		line-height: 1.15;
		white-space: nowrap;
		pointer-events: none;
		z-index: 6;
		box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	}

	.own-hours-edge-label-total {
		background: var(--progress-total-gradient);
		color: var(--progress-total-text);
		text-shadow: 0 1px 1px rgba(255,255,255,0.55);
	}

	.own-hours-edge-label-planned {
		background: var(--progress-planned-gradient);
		color: var(--progress-planned-label-text);
		text-shadow: 0 1px 1px rgba(255,255,255,0.45);
	}

	.own-hours-edge-label-actual {
		background: var(--progress-actual-gradient);
		color: #fff;
		text-shadow: 0 1px 1px rgba(0,0,0,0.28);
	}

	.own-hours-edge-label-done {
		background: var(--progress-done-gradient);
		color: #fff;
		text-shadow: 0 1px 1px rgba(0,0,0,0.28);
	}

	.own-hours-edge-label-empty {
		background: #dce3ea;
		color: #7d8896;
		border: 1px solid #c4ced9;
		text-shadow: none;
		box-shadow: 0 1px 2px rgba(0,0,0,0.08);
		font-weight: 600;
	}

	/* Total planned hours bar (muted yellow base) */
	.progress-bar-total {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		background: var(--progress-total-gradient);
		border-radius: 9px;
		transition: all 0.3s ease;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05);
	}

	.progress-bar-total.highlighted {
		filter: brightness(1.08);
		box-shadow: 0 2px 6px var(--progress-total-glow);
	}

	/* Legend color box for total */
	.legend-color-box.total {
		background: var(--progress-total-gradient);
	}

	.legend-item:hover .legend-color-box.total,
	.legend-item.hovered .legend-color-box.total {
		background: var(--progress-total-hover-gradient);
		box-shadow: 0 2px 8px var(--progress-total-glow);
	}

	/* Total hours text outside bar */
	.total-hours-text {
		position: absolute;
		right: -24px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 10px;
		font-weight: 600;
		color: var(--progress-total-text);
		white-space: nowrap;
		transition: all 0.2s ease;
		cursor: pointer;
	}

	.total-hours-text.highlighted {
		color: var(--progress-total-text-hover);
		transform: translateY(-50%) scale(1.1);
	}

	/* Wrapper for progress bar with external text - in cell */
	.eigene-stunden-progress-wrapper {
		position: relative;
		margin-right: 26px;
	}

	/* Hover card version - full width bar with text to the right */
	.eigene-stunden-hover-card .eigene-stunden-progress-wrapper {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-right: 0;
		margin-bottom: 16px;
	}

	.eigene-stunden-hover-card .eigene-stunden-progress-wrapper .progress-bar-container {
		flex: 1;
		width: 100% !important;
		margin-bottom: 0;
	}

	.eigene-stunden-hover-card .eigene-stunden-progress-wrapper .total-hours-text {
		position: static;
		transform: none;
		font-size: 13px;
		flex-shrink: 0;
		line-height: 35px;
	}

	.eigene-stunden-hover-card .eigene-stunden-progress-wrapper .total-hours-text.is-empty {
		color: #7d8896;
		cursor: default;
		pointer-events: none;
	}

	.eigene-stunden-hover-card .eigene-stunden-progress-wrapper .total-hours-text.highlighted {
		transform: scale(1.1);
	}

	.eigene-stunden-hover-card .progress-bar-label.actual-label {
		left: auto;
		right: 10px;
		text-align: right;
	}

	/* Eigene Stunden Hover Card */
	.eigene-stunden-hover-card {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		--card-arrow-bg: linear-gradient(135deg, #1a9fd8 0%, #158cba 50%, #127a9f 100%);
		background: white;
		border: 2px solid #158cba;
		border-radius: 12px;
		box-shadow: 0 12px 32px rgba(21, 140, 186, 0.2), 0 4px 12px rgba(0,0,0,0.15);
		padding: 0;
		width: 520px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		z-index: 200000;
		font-size: 13px;
		overflow: visible;
	}

	.eigene-stunden-hover-card.is-main-staff-view {
		width: min(640px, calc(100vw - 24px));
	}

	.eigene-stunden-hover-card.transitioning {
		display: block;
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.eigene-stunden-hover-card.show {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: all;
		transform: translateY(0);
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.eigene-stunden-hover-card.position-above {
		transform: translateY(8px);
	}

	.eigene-stunden-hover-card.position-above.show {
		transform: translateY(0);
	}

	/* Eigene Stunden Hover Card Arrows */
	.eigene-stunden-hover-card::before {
		content: '';
		position: absolute;
		top: -8px;
		left: var(--arrow-left, 50px);
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid #158cba;
	}

	.eigene-stunden-hover-card::after {
		content: '';
		position: absolute;
		top: -6px;
		left: calc(var(--arrow-left, 50px) + 1px);
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #158cba;
	}

	.eigene-stunden-hover-card.position-above::before {
		top: auto;
		bottom: -8px;
		border-bottom: none;
		border-top: 8px solid #158cba;
	}

	.eigene-stunden-hover-card.position-above::after {
		top: auto;
		bottom: -6px;
		border-bottom: none;
		border-top: 7px solid #158cba;
	}

	/* Eigene Stunden Card Header */
	.eigene-stunden-card-header {
		background: linear-gradient(135deg, #1a9fd8 0%, #158cba 50%, #127a9f 100%);
		color: white;
		padding: 12px 16px;
		border-radius: 10px 10px 0 0;
		box-shadow: 0 2px 8px rgba(21, 140, 186, 0.3);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.eigene-stunden-card-header .header-title {
		font-size: 15px;
		font-weight: 600;
	}

	.eigene-stunden-card-header .header-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		cursor: pointer;
		padding: 4px 12px;
		min-height: 30px;
		border: 1px solid rgba(169, 216, 240, 0.82);
		border-radius: 999px;
		background: linear-gradient(180deg, rgba(124, 183, 218, 0.84) 0%, rgba(93, 161, 201, 0.88) 100%);
		color: #f3fbff;
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		text-shadow: 0 1px 0 rgba(18, 80, 115, 0.44);
		box-shadow:
			0 2px 0 rgba(225, 244, 255, 0.56),
			0 4px 9px rgba(229, 243, 255, 0.24),
			inset 0 1px 0 rgba(225, 244, 255, 0.46),
			inset 0 -1px 0 rgba(0, 0, 0, 0.07);
		transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
		touch-action: manipulation;
		user-select: none;
	}

	.eigene-stunden-card-header .header-toggle:hover {
		transform: translateY(-1px);
		border-color: rgba(191, 228, 247, 0.92);
		background: linear-gradient(180deg, rgba(145, 199, 228, 0.92) 0%, rgba(107, 174, 211, 0.94) 100%);
		filter: saturate(1.08) brightness(1.03);
		box-shadow:
			0 3px 0 rgba(225, 244, 255, 0.56),
			0 6px 12px rgba(229, 243, 255, 0.24),
			inset 0 1px 0 rgba(236, 248, 255, 0.58),
			inset 0 -1px 0 rgba(0, 0, 0, 0.05);
	}

	.eigene-stunden-card-header .header-toggle:active {
		transform: translateY(1px);
		filter: none;
		box-shadow:
			0 1px 0 rgba(22, 95, 134, 0.52),
			0 2px 4px rgba(8, 58, 86, 0.2),
			inset 0 1px 0 rgba(218, 239, 252, 0.4),
			inset 0 -1px 0 rgba(0, 0, 0, 0.09);
	}

	.eigene-stunden-card-header .header-toggle .toggle-icon {
		transition: transform 0.3s ease;
	}

	.eigene-stunden-card-header .header-toggle.active .toggle-icon {
		transform: rotate(180deg);
	}

	/* Verplant als info line */
	.verplant-als-info {
		padding: 12px 16px;
		background: #f8f9fa;
		border-bottom: 1px solid #e9ecef;
		font-size: 13px;
		color: #555;
	}

	.verplant-als-info strong {
		color: #333;
	}

	/* Card Body with view switching */
	.eigene-stunden-card-body {
		position: relative;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: none;
	}

	.eigene-stunden-card-body.view-switching {
		overflow-x: hidden;
		overflow-y: hidden;
		transition: height 0.4s ease;
		perspective: 1800px;
		transform-style: preserve-3d;
	}

	.eigene-stunden-card-body.sh-carousel-switching {
		overflow-x: hidden;
		overflow-y: hidden;
		transition: height 0.4s ease;
	}

	.eigene-stunden-card-body.details-resize-lock {
		overflow-y: hidden !important;
	}

	.eigene-stunden-view {
		padding: 20px;
		transition: transform 0.4s cubic-bezier(0.25, 0.78, 0.32, 1), opacity 0.3s ease, filter 0.4s ease;
		transform-style: preserve-3d;
		backface-visibility: hidden;
		will-change: transform, opacity, filter;
	}

	.eigene-stunden-view.progress-view {
		padding-top: 12px;
	}

	.eigene-stunden-view.hidden {
		display: none;
	}

	/* During the slide, the outgoing view is taken out of flow so it
	   doesn't inflate the card body height. */
	.eigene-stunden-view.flip-out-board {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		transform-origin: left center;
		transform: rotateY(-96deg) scale(0.985);
		opacity: 0.14;
		filter: brightness(1.06) saturate(0.88);
	}

	.eigene-stunden-view.flip-in-board {
		transform-origin: right center;
		transform: rotateY(96deg) scale(0.985);
		opacity: 0.14;
		filter: brightness(1.06) saturate(0.88);
	}

	.eigene-stunden-view.slide-out-left {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		transform: translateX(-100%);
		opacity: 0;
	}

	.eigene-stunden-view.slide-in-right {
		transform: translateX(100%);
		opacity: 0;
	}

	.eigene-stunden-view.slide-out-right {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		transform: translateX(100%);
		opacity: 0;
	}

	.eigene-stunden-view.slide-in-left {
		transform: translateX(-100%);
		opacity: 0;
	}

	/* Own-hours expandable legend details */
	.legend-inline-details {
		display: none;
		margin: -2px 0 6px 34px;
		border-radius: 8px;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transform: translateY(-4px);
		transition: max-height 0.34s ease, opacity 0.24s ease, transform 0.24s ease, margin 0.24s ease;
	}

	.legend-inline-details.is-mounted {
		display: block;
	}

	.legend-inline-details.is-mounted.show {
		max-height: 540px;
		opacity: 1;
		transform: translateY(0);
	}

	.legend-details-panel {
		background: linear-gradient(180deg, #f8fbfd 0%, #f2f8fc 100%);
		border: 1px solid #dceaf3;
		border-left-width: 4px;
		border-radius: 8px;
		padding: 10px 10px 8px;
		animation: eigeneLegendDetailsIn 0.18s ease;
	}

	.legend-details-panel.is-planned {
		border-left-color: var(--progress-planned-indicator-border);
	}

	.legend-details-panel.is-actual {
		border-left-color: #167ca2;
	}

	.legend-details-panel.is-done {
		border-left-color: #2fb043;
	}

	@keyframes eigeneLegendDetailsIn {
		from {
			opacity: 0;
			transform: translateY(-5px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.legend-details-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin-bottom: 8px;
	}

	.legend-details-title-wrap {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.legend-details-parent-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 1px 3px rgba(0,0,0,0.2);
	}

	/* Remove decorative dot before extended-section headings in both hover cards. */
	.legend-details-title-wrap {
		gap: 0;
	}

	.legend-details-parent-dot {
		display: none;
	}

	.legend-details-parent-dot.planned {
		background: var(--progress-planned-gradient);
	}

	.legend-details-parent-dot.actual {
		background: var(--progress-actual-gradient);
	}

	.legend-details-parent-dot.done {
		background: var(--progress-done-gradient);
	}

	.legend-details-title {
		font-size: 12px;
		font-weight: 700;
		color: #2c4653;
	}

	.legend-details-header-right {
		display: grid;
		grid-template-columns: 68px 79px 38px;
		align-items: center;
		column-gap: 6px;
		justify-content: end;
		padding-right: 4px;
	}

	.legend-details-header-right > .legend-details-total {
		grid-column: 1;
		justify-self: end;
	}

	.legend-details-header-right > .legend-row-status {
		grid-column: 2;
		justify-self: start;
	}

	.legend-details-header-right > .legend-row-action {
		grid-column: 2;
		justify-self: end;
	}

	.legend-details-total {
		font-size: 12px;
		font-weight: 700;
		color: #1d6e8d;
		white-space: nowrap;
	}

	.legend-task-list {
		display: flex;
		flex-direction: column;
		gap: 7px;
		overflow-y: auto;
		padding-right: 2px;
	}

	.legend-task-group {
		border: 1px solid #d8e8f1;
		border-radius: 8px;
		background: #ffffff;
	}

	.legend-task-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 35px 76px 34px;
		align-items: center;
		column-gap: 6px;
		padding: 7px 4px 7px 8px;
	}

	.legend-subtoggle {
		border: 1px solid #6f879f;
		background: linear-gradient(180deg, #ffffff 0%, #dce8f4 100%);
		color: #2f4c65;
		width: 24px;
		min-width: 24px;
		max-width: 24px;
		height: 20px;
		min-height: 20px;
		max-height: 20px;
		border-radius: 999px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		flex-shrink: 0;
		justify-self: center;
		align-self: center;
		grid-column: 4;
		grid-row: 1;
		line-height: 1;
		box-shadow: var(--ui-press-neutral-shadow);
		transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, filter 0.16s ease;
	}

	.legend-subtoggle:hover {
		transform: translateY(-1px);
		filter: none;
		box-shadow: var(--ui-press-neutral-hover-shadow);
	}

	.legend-subtoggle:active {
		transform: translateY(1px);
		filter: none;
		box-shadow: var(--ui-press-neutral-active-shadow);
	}

	.legend-subtoggle:focus {
		outline: none;
		box-shadow: none;
	}

	.legend-subtoggle:focus-visible {
		outline: none;
		box-shadow: 0 0 0 2px rgba(61, 122, 169, 0.24);
	}

	.legend-subtoggle-icon {
		font-size: 13px;
		font-weight: 700;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		line-height: 1;
		transform: rotate(90deg);
		transition: transform 0.2s ease;
	}

	.legend-task-group.expanded .legend-subtoggle-icon {
		transform: rotate(-90deg);
	}

	.legend-task-name {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
		font-size: 12px;
		font-weight: 600;
		color: #304c5a;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.legend-task-row > .legend-task-hours {
		grid-column: 2;
		grid-row: 1;
		margin-right: 4px;
	}

	.legend-task-row > .legend-row-action {
		grid-column: 3;
		grid-row: 1;
	}

	.legend-row-hours,
	.legend-task-hours,
	.legend-day-hours {
		font-size: 11px;
		font-weight: 700;
		color: #226f8f;
		white-space: nowrap;
		text-align: right;
		justify-self: end;
	}

	.legend-day-list {
		margin: 0 0 0 10px;
		padding-left: 10px;
		/* Reserve the missing subtoggle slot so day-row hours/actions stay aligned. */
		padding-right: 40px;
		border-left: 2px solid rgba(21, 140, 186, 0.22);
		display: flex;
		flex-direction: column;
		gap: 6px;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.28s ease, opacity 0.22s ease, margin 0.22s ease;
	}

	.legend-day-list.show {
		max-height: 420px;
		opacity: 1;
		margin-bottom: 8px;
	}

	.legend-day-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 68px 76px;
		align-items: center;
		column-gap: 6px;
		background: #f5fbff;
		border: 1px solid #e0eef6;
		border-radius: 6px;
		padding: 5px 4px 5px 7px;
		animation: legendDayListIn 0.16s ease;
	}

	.legend-day-row > .legend-day-date {
		grid-column: 1;
		grid-row: 1;
	}

	.legend-day-row > .legend-day-hours {
		grid-column: 2;
		grid-row: 1;
		margin-right: 4px;
	}

	.legend-day-row > .legend-row-action {
		grid-column: 3;
		grid-row: 1;
	}

	/* Stunden-&-Helfer details have no row action button column.
	   Collapse to hours + subtoggle only. */
	.stunden-helfer-staff-hover-panel .legend-row-action {
		display: none;
	}

	.stunden-helfer-staff-hover-panel .legend-task-row {
		grid-template-columns: minmax(0, 1fr) 68px 34px;
	}

	.stunden-helfer-staff-hover-panel .legend-subtoggle {
		grid-column: 3;
	}

	.stunden-helfer-staff-hover-panel .legend-day-row {
		grid-template-columns: minmax(0, 1fr) 68px;
	}

	/* Stunden-&-Helfer details have no header action button:
	   keep total hours flush-right without reserving action width. */
	.stunden-helfer-staff-hover-panel .legend-details-header-right {
		grid-template-columns: 68px 41px;
		column-gap: 6px;
		padding-right: 4px;
	}

	.stunden-helfer-staff-hover-panel .legend-details-header-right > .legend-row-status,
	.stunden-helfer-staff-hover-panel .legend-details-header-right > .legend-row-action {
		display: none;
	}

	/* Ist-Stunden rows have no status badge/action button: collapse those empty columns. */
	.legend-details-panel.is-actual .legend-details-header-right {
		grid-template-columns: 68px 41px;
		column-gap: 6px;
		padding-right: 4px;
	}

	.legend-details-panel.is-actual .legend-task-row {
		grid-template-columns: minmax(0, 1fr) 68px 34px;
	}

	.legend-details-panel.is-actual .legend-subtoggle {
		grid-column: 3;
	}

	.legend-details-panel.is-actual .legend-day-row {
		grid-template-columns: minmax(0, 1fr) 68px;
	}

	.legend-details-panel.is-actual .legend-details-header-right > .legend-row-status,
	.legend-details-panel.is-actual .legend-details-header-right > .legend-row-action,
	.legend-details-panel.is-actual .legend-task-row > .legend-row-status,
	.legend-details-panel.is-actual .legend-task-row > .legend-row-action,
	.legend-details-panel.is-actual .legend-day-row > .legend-row-status,
	.legend-details-panel.is-actual .legend-day-row > .legend-row-action {
		display: none;
	}

	/* Eigene-Stunden: swap row action button and hours in planned/done details. */
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-details-header-right,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-details-header-right {
		grid-template-columns: 1px 39px 37px;
	}

	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-details-header-right > .legend-row-action,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-details-header-right > .legend-row-action {
		grid-column: 1;
	}

	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-details-header-right > .legend-details-total,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-details-header-right > .legend-details-total {
		grid-column: 2;
		margin-right: 4px;
	}

	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-details-title-wrap,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-details-title-wrap {
		min-width: 0;
		flex: 1 1 auto;
	}

	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-details-title,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-details-title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-task-row,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-task-row {
		grid-template-columns: minmax(0, 1fr) 76px 39px 34px;
	}

	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-task-row > .legend-row-action,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-task-row > .legend-row-action {
		grid-column: 2;
	}

	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-task-row > .legend-task-hours,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-task-row > .legend-task-hours {
		grid-column: 3;
		margin-right: 4px;
	}

	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-day-row,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-day-row {
		grid-template-columns: minmax(0, 1fr) 76px 68px;
	}

	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-day-row > .legend-row-action,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-day-row > .legend-row-action {
		grid-column: 2;
	}

	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-day-row > .legend-day-hours,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-day-row > .legend-day-hours {
		grid-column: 3;
		margin-right: 4px;
	}

	@keyframes legendDayListIn {
		from {
			opacity: 0;
			transform: translateY(-3px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.legend-day-date {
		min-width: 0;
		font-size: 11px;
		color: #3f5a69;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.legend-day-link {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		max-width: 100%;
		color: #2f6e8f;
		font-weight: 600;
		text-decoration: none;
	}

	.legend-day-link .glyphicon {
		font-size: 10px;
		opacity: 0.85;
		flex-shrink: 0;
	}

	.legend-day-link .legend-day-link-label {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.legend-day-link:hover,
	.legend-day-link:focus {
		color: #127a9f;
		text-decoration: underline;
	}

	.legend-row-status,
	.legend-row-action {
		display: inline-flex;
		justify-content: flex-end;
		justify-self: end;
		min-width: 66px;
	}

	.legend-row-action {
		min-width: 76px;
	}

	.legend-row-status.is-empty,
	.legend-row-action.is-empty {
		visibility: hidden;
	}

	/* Nudge only "Alle Erledigt" in header details so its left edge aligns with row-level "Erledigt". */
	.legend-details-header-right .legend-status-btn.is-category.is-mark-done {
		transform: translateX(16px);
	}

	.legend-details-header-right .legend-status-btn.is-category.is-mark-done:hover {
		transform: translateX(16px) translateY(-1px);
	}

	.legend-details-header-right .legend-status-btn.is-category.is-mark-done:active {
		transform: translateX(16px) translateY(1px);
	}

	/* Eigene-Stunden planned/done header uses swapped button/hours order; no extra x-nudge. */
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-details-header-right .legend-status-btn.is-category.is-mark-done,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-details-header-right .legend-status-btn.is-category.is-mark-done {
		transform: none;
	}

	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-details-header-right .legend-status-btn.is-category.is-mark-done:hover,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-details-header-right .legend-status-btn.is-category.is-mark-done:hover {
		transform: translateY(-1px);
	}

	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-planned .legend-details-header-right .legend-status-btn.is-category.is-mark-done:active,
	.eigene-stunden-hover-card .legend-inline-details[data-legend-inline-details] .legend-details-panel.is-done .legend-details-header-right .legend-status-btn.is-category.is-mark-done:active {
		transform: translateY(1px);
	}

	.legend-details-empty {
		font-size: 11px;
		color: #647b88;
		padding: 7px 4px 4px;
	}

	.eigene-stunden-hover-card.legend-status-updating .legend-inline-details {
		opacity: 0.65;
		pointer-events: none;
	}

	/* Distribution View */
	.distribution-view {
		padding: 16px;
	}

	.distribution-source-subheading {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: -16px -16px 12px;
	}

	.distribution-source-select-input {
		flex: 1 1 auto;
		min-width: 0;
		border: 1px solid #cfd6de;
		border-radius: 10px;
		padding: 6px 10px;
		background: #fff;
		font-size: 12px;
		font-weight: 500;
		color: #334155;
		outline: none;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.distribution-source-select-input:focus {
		border-color: #7ab2cb;
		box-shadow: 0 0 0 3px rgba(21, 140, 186, 0.14);
	}

	.distribution-controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		flex-wrap: wrap;
		margin-bottom: 16px;
	}

	.distribution-nav {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.distribution-date-range {
		min-width: 180px;
		text-align: center;
		font-weight: 500;
		color: #333;
	}

	.distribution-nav-btn {
		width: 32px;
		height: 32px;
		border: none;
		background: var(--progress-track-base, #ECEBE7);
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
	}

	.distribution-nav-btn:hover {
		background: #e0e0e0;
		transform: scale(1.1);
	}

	.distribution-nav-btn:active {
		transform: scale(0.95);
	}

	.distribution-nav-btn:disabled {
		opacity: 0;
		pointer-events: none;
		cursor: default;
	}

	.distribution-view-toggle {
		display: flex;
		background: var(--progress-track-base, #ECEBE7);
		border-radius: 20px;
		padding: 3px;
	}

	.distribution-view-toggle button {
		border: none;
		background: transparent;
		padding: 6px 14px;
		border-radius: 17px;
		font-size: 12px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
		color: #666;
	}

	.distribution-view-toggle button.active {
		background: white;
		color: #158cba;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	}

	.distribution-view-toggle button:hover:not(.active) {
		color: #333;
	}

	/* Distribution Calendar Grid */
	.distribution-calendar {
		position: relative;
		overflow: visible;
	}

	.distribution-weeks-container {
		transition: transform 0.3s ease;
	}

	.distribution-week {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 4px;
		margin-bottom: 8px;
	}

	.distribution-week:last-child {
		margin-bottom: 0;
	}

	.distribution-day-header {
		text-align: center;
		font-size: 10px;
		font-weight: 600;
		color: #888;
		padding: 4px 0;
		text-transform: uppercase;
	}

	.distribution-day {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 6px 2px;
		border-radius: 6px;
		background: #f8f9fa;
		min-height: 80px;
		position: relative;
	}

	.distribution-day.today {
		background: color-mix(in srgb, var(--progress-actual-base, #52B2CF) 13%, #ffffff 87%);
		border: 1px solid color-mix(in srgb, var(--progress-actual-base, #52B2CF) 46%, #90caf9);
	}

	.distribution-day.is-detail-hovered {
		box-shadow: inset 0 0 0 1px #dde3e8;
	}

	.distribution-day.today.is-detail-hovered {
		border-color: #dde3e8;
	}

	.distribution-day-number {
		font-size: 11px;
		font-weight: 600;
		color: #555;
		margin-bottom: 4px;
	}

	.distribution-day.today .distribution-day-number {
		color: color-mix(in srgb, var(--progress-actual-base, #52B2CF) 72%, #18384d);
	}

	/* Vertical Bar Chart inside each day */
	.distribution-bars {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		gap: 3px;
		height: 85px;
		width: 100%;
		padding: 0 4px;
	}

	.distribution-bar {
		width: 14px;
		border-radius: 3px 3px 0 0;
		transition: height 0.5s ease, transform 0.2s ease;
		position: relative;
		min-height: 2px;
		z-index: 1;
	}

	.distribution-bar.planned {
		background: linear-gradient(to top, var(--distribution-planned-base), var(--distribution-planned-light));
	}

	.distribution-bar.planned-done {
		background: linear-gradient(to top, var(--distribution-planned-done-base), var(--distribution-planned-done-light));
	}

	.distribution-bar.planned-composite {
		background: transparent;
		display: flex;
		flex-direction: column-reverse;
	}

	.distribution-bar-segment {
		position: relative;
		width: 100%;
		flex: 0 1 auto;
	}

	.distribution-bar-segment:hover {
		z-index: 25;
	}

	.distribution-bar-segment.open {
		background: linear-gradient(to top, var(--distribution-planned-base), var(--distribution-planned-light));
		border-radius: 3px 3px 0 0;
	}

	.distribution-bar-segment.done {
		background: linear-gradient(to top, var(--distribution-planned-done-base), var(--distribution-planned-done-light));
	}

	.distribution-bar.actual {
		background: linear-gradient(to top, var(--distribution-actual-base), var(--distribution-actual-light));
	}

	.distribution-bar:hover {
		transform: scaleX(1.2);
		z-index: 24;
	}

	.distribution-bar-tooltip {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.9);
		background: rgba(19, 32, 40, 0.95);
		border: 1px solid rgba(255,255,255,0.2);
		color: white;
		padding: 1px 6px;
		border-radius: 999px;
		font-size: 9px;
		font-weight: 700;
		line-height: 1.5;
		white-space: nowrap;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.16s ease, transform 0.16s ease;
		pointer-events: none;
		box-shadow: 0 2px 8px rgba(0,0,0,0.25);
		z-index: 32;
	}

	.distribution-bar-tooltip.is-planned {
		background: color-mix(in srgb, var(--distribution-planned-base) 80%, black);
	}

	.distribution-bar-tooltip.is-done {
		background: color-mix(in srgb, var(--distribution-planned-done-base) 82%, black);
	}

	.distribution-bar-tooltip.is-actual {
		background: color-mix(in srgb, var(--distribution-actual-base) 82%, black);
	}

	.distribution-bar:hover > .distribution-bar-tooltip,
	.distribution-bar-segment:hover > .distribution-bar-tooltip {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, -50%) scale(1);
	}

	.distribution-hover-details {
		position: relative;
		display: block;
		max-height: 0;
		opacity: 0;
		overflow: visible;
		margin-top: 0;
		transform: translateY(-2px);
		transition: max-height 0.28s ease, opacity 0.2s ease, transform 0.2s ease, margin-top 0.2s ease;
		will-change: max-height, opacity, transform;
	}

	.distribution-hover-details::before {
		content: none;
	}

	.distribution-hover-details.is-visible {
		max-height: 220px;
		opacity: 1;
		margin-top: 0;
		transform: translateY(0);
	}

	.distribution-hover-details-surface {
		margin-top: 0;
		margin-left: var(--details-panel-left, 8px);
		background: #f8f9fa;
		border: 1px solid #dde3e8;
		border-radius: 8px;
		padding: 8px 10px;
		width: max-content;
		max-width: calc(100% - 16px);
		box-shadow: 0 2px 8px rgba(0,0,0,0.06);
		transition: margin-top 0.22s ease;
		will-change: width, height, margin-top;
	}

	.distribution-hover-details:not(.has-content) .distribution-hover-details-surface {
		display: none;
	}

	.distribution-hover-details.is-visible .distribution-hover-details-surface {
		margin-top: 6px;
	}

	.distribution-hover-details-content {
		min-width: 0;
	}

	.distribution-hover-details-heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: 12px;
		font-size: 10px;
		font-weight: 700;
		color: #5a6c76;
		background: #f1f3f5;
		border-radius: 6px;
		padding: 4px 6px;
		margin-bottom: 6px;
		letter-spacing: 0.2px;
	}

	.distribution-hover-details-heading-label {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.distribution-hover-details-heading-hours {
		font-size: 11px;
		font-weight: 700;
		color: #1f5f78;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.distribution-hover-details-heading.is-planned {
		background: color-mix(in srgb, var(--distribution-planned-base) 18%, white);
		color: color-mix(in srgb, var(--distribution-planned-base) 75%, black);
	}

	.distribution-hover-details-heading.is-planned .distribution-hover-details-heading-hours {
		color: color-mix(in srgb, var(--distribution-planned-base) 88%, black);
	}

	.distribution-hover-details-heading.is-done {
		background: color-mix(in srgb, var(--distribution-planned-done-base) 18%, white);
		color: color-mix(in srgb, var(--distribution-planned-done-base) 75%, black);
	}

	.distribution-hover-details-heading.is-done .distribution-hover-details-heading-hours {
		color: color-mix(in srgb, var(--distribution-planned-done-base) 88%, black);
	}

	.distribution-hover-details-heading.is-actual {
		background: color-mix(in srgb, var(--distribution-actual-base) 18%, white);
		color: color-mix(in srgb, var(--distribution-actual-base) 75%, black);
	}

	.distribution-hover-details-heading.is-actual .distribution-hover-details-heading-hours {
		color: color-mix(in srgb, var(--distribution-actual-base) 88%, black);
	}

	.distribution-hover-details-summary {
		display: flex;
		align-items: flex-start;
		gap: 6px;
		flex-wrap: nowrap;
	}

	.distribution-hover-details-section {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 120px;
		max-width: 140px;
	}

	.distribution-hover-details-section .distribution-hover-details-heading {
		margin-bottom: 0;
	}

	.distribution-hover-details-row.is-empty .distribution-hover-details-task {
		opacity: 0.65;
	}

	.distribution-hover-details-list {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.distribution-hover-details-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 12px;
		align-items: center;
	}

	.distribution-hover-details-task {
		font-size: 11px;
		color: #384f5b;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.distribution-hover-details-hours {
		font-size: 11px;
		font-weight: 700;
		color: #1f5f78;
		white-space: nowrap;
	}

	/* Distribution Legend */
	.distribution-legend {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 6px;
		padding-top: 8px;
		border-top: 1px solid #e9ecef;
	}

	.distribution-legend-item {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 11px;
		color: #666;
		padding: 2px 8px;
		border-radius: 999px;
		transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
	}

	.distribution-legend-item.is-hovered {
		color: #1f3d4d;
		box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
	}

	.distribution-legend-item[data-legend-key="planned"].is-hovered {
		background: color-mix(in srgb, var(--distribution-planned-base) 18%, white);
	}

	.distribution-legend-item[data-legend-key="done"].is-hovered {
		background: color-mix(in srgb, var(--distribution-planned-done-base) 18%, white);
	}

	.distribution-legend-item[data-legend-key="actual"].is-hovered {
		background: color-mix(in srgb, var(--distribution-actual-base) 18%, white);
	}

	.distribution-legend-color {
		width: 12px;
		height: 12px;
		border-radius: 3px;
	}

	.distribution-legend-color.planned {
		background: linear-gradient(135deg, var(--distribution-planned-light) 0%, var(--distribution-planned-base) 100%);
	}

	.distribution-legend-color.actual {
		background: linear-gradient(135deg, var(--distribution-actual-light) 0%, var(--distribution-actual-base) 100%);
	}

	.distribution-legend-color.done {
		background: linear-gradient(135deg, var(--distribution-planned-done-light) 0%, var(--distribution-planned-done-base) 100%);
	}

	/* Month view specific styles */
	.distribution-calendar.month-view .distribution-week {
		gap: 2px;
		margin-bottom: 2px;
	}

	.distribution-calendar.month-view .distribution-day {
		min-height: 50px;
		padding: 4px 1px;
	}

	.distribution-calendar.month-view .distribution-day-number {
		font-size: 9px;
	}

	/* Calendar container for smooth transitions */
	.distribution-calendar-container {
		position: relative;
		overflow-x: hidden;
		overflow-y: visible;
		min-height: 116px;
	}

	.distribution-calendar {
		position: absolute;
		width: 100%;
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
	}

	.distribution-calendar.active {
		position: relative;
		transform: translateX(0);
		opacity: 1;
	}

	.distribution-calendar.slide-out-left {
		transform: translateX(-100%);
		opacity: 0;
	}

	.distribution-calendar.slide-out-right {
		transform: translateX(100%);
		opacity: 0;
	}

	.distribution-calendar.slide-in-left {
		transform: translateX(-100%);
		opacity: 0;
	}

	.distribution-calendar.slide-in-right {
		transform: translateX(100%);
		opacity: 0;
	}

	/* Animation for bars appearing */
	@keyframes barGrow {
		from {
			height: 0;
		}
		to {
			height: var(--bar-height, 0);
		}
	}

	.distribution-bar.animate {
		animation: barGrow 0.5s ease forwards;
	}

	/* Week aggregate view styles */
	.distribution-week-aggregate {
		display: flex;
		gap: 8px;
		padding: 16px 8px;
		justify-content: center;
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.distribution-week-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 60px;
		flex-shrink: 0;
		padding: 6px 2px;
		border-radius: 6px;
		background: #f8f9fa;
		min-height: 80px;
	}

	.distribution-week-item.is-detail-hovered {
		box-shadow: inset 0 0 0 1px #dde3e8;
	}

	.distribution-week-label {
		font-size: 11px;
		font-weight: 600;
		color: #666;
		margin-bottom: 4px;
		cursor: pointer;
		transition: all 0.2s ease;
		text-align: center;
	}

	.distribution-week-label:hover {
		color: #158cba;
		text-decoration: underline;
	}

	/* Month aggregate view styles */
	.distribution-month-aggregate {
		display: flex;
		gap: 8px;
		padding: 16px 8px;
		justify-content: center;
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.distribution-month-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 60px;
		flex-shrink: 0;
		padding: 6px 2px;
		border-radius: 6px;
		background: #f8f9fa;
		min-height: 80px;
	}

	.distribution-month-item.is-detail-hovered {
		box-shadow: inset 0 0 0 1px #dde3e8;
	}

	.distribution-month-label {
		font-size: 11px;
		font-weight: 600;
		color: #666;
		margin-bottom: 4px;
		cursor: pointer;
		transition: all 0.2s ease;
		text-align: center;
	}

	.distribution-month-label:hover {
		color: #158cba;
		text-decoration: underline;
	}

	/* Day number label clickable */
	.distribution-day-number {
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.distribution-day-number:hover {
		color: #158cba;
		text-decoration: underline;
	}

	.receipts-hover-card.transitioning {
		display: block;
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.receipts-hover-card.show {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: all;
		transform: translateY(0);
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	.receipts-hover-card.position-above {
		transform: translateY(8px);
	}

	.receipts-hover-card.position-above.show {
		transform: translateY(0);
	}

	/* Arrow connectors - use CSS custom property for dynamic positioning */
	.receipts-hover-card::before {
		content: '';
		position: absolute;
		top: -8px;
		left: var(--arrow-left, 50px);
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid #158cba;
	}

	.receipts-hover-card::after {
		content: '';
		position: absolute;
		top: -6px;
		left: calc(var(--arrow-left, 50px) + 1px);
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #158cba;
	}

	.receipts-hover-card.position-above::before {
		top: auto;
		bottom: -8px;
		border-bottom: none;
		border-top: 8px solid #158cba;
	}

	.receipts-hover-card.position-above::after {
		top: auto;
		bottom: -6px;
		border-bottom: none;
		border-top: 7px solid #158cba;
	}

	/* Unified connector arrow: "layer mask" style extension from header/body */
	.client-hover-card::before,
	.client-hover-card::after,
	.category-hover-card::before,
	.category-hover-card::after,
	.receipts-hover-card::before,
	.receipts-hover-card::after,
	.planning-hover-card::before,
	.planning-hover-card::after,
	.eigene-stunden-hover-card::before,
	.eigene-stunden-hover-card::after,
	.row-actions-hover-card::before,
	.row-actions-hover-card::after,
	.eigener-status-hover-card::before,
	.eigener-status-hover-card::after {
		content: none;
	}

	/* Default orientation (card below trigger): arrow extends header fill exactly */
	.client-hover-card:not(.position-above) .card-header,
	.category-hover-card:not(.position-above) .card-header,
	.planning-hover-card:not(.position-above) .planning-card-header,
	.receipts-hover-card:not(.position-above) .receipts-calendar-header,
	.eigene-stunden-hover-card:not(.position-above) .eigene-stunden-card-header,
	.eigener-status-hover-card:not(.position-above) .card-header {
		position: relative;
		overflow: visible;
	}

	.client-hover-card:not(.position-above) .card-header::before,
	.category-hover-card:not(.position-above) .card-header::before,
	.planning-hover-card:not(.position-above) .planning-card-header::before,
	.receipts-hover-card:not(.position-above) .receipts-calendar-header::before,
	.eigene-stunden-hover-card:not(.position-above) .eigene-stunden-card-header::before,
	.eigener-status-hover-card:not(.position-above) .card-header::before {
		content: '';
		position: absolute;
		left: var(--arrow-left, 50px);
		top: -10px;
		width: 18px;
		height: 10px;
		transform: translateX(-50%);
		background: #158cba;
		clip-path: polygon(50% 0, 0 100%, 100% 100%);
		z-index: 2;
		pointer-events: none;
	}

	.client-hover-card:not(.position-above) .card-header::after,
	.category-hover-card:not(.position-above) .card-header::after,
	.planning-hover-card:not(.position-above) .planning-card-header::after,
	.receipts-hover-card:not(.position-above) .receipts-calendar-header::after,
	.eigene-stunden-hover-card:not(.position-above) .eigene-stunden-card-header::after,
	.eigener-status-hover-card:not(.position-above) .card-header::after {
		content: '';
		position: absolute;
		left: var(--arrow-left, 50px);
		top: -8px;
		width: 14px;
		height: 8px;
		transform: translateX(-50%);
		background: #158cba;
		clip-path: polygon(50% 0, 0 100%, 100% 100%);
		z-index: 3;
		pointer-events: none;
	}

	/* Above orientation (card above trigger): arrow extends white card body */
	.row-actions-hover-card:not(.position-above)::before {
		content: '';
		position: absolute;
		left: var(--arrow-left, 50px);
		top: -10px;
		width: 18px;
		height: 10px;
		transform: translateX(-50%);
		background: #158cba;
		clip-path: polygon(50% 0, 0 100%, 100% 100%);
		z-index: 2;
		pointer-events: none;
	}

	.row-actions-hover-card:not(.position-above)::after {
		content: '';
		position: absolute;
		left: var(--arrow-left, 50px);
		top: -8px;
		width: 14px;
		height: 8px;
		transform: translateX(-50%);
		background: #158cba;
		clip-path: polygon(50% 0, 0 100%, 100% 100%);
		z-index: 3;
		pointer-events: none;
	}

	/* Above orientation (card above trigger): arrow extends white card body */
	.client-hover-card.position-above::before,
	.category-hover-card.position-above::before,
	.receipts-hover-card.position-above::before,
	.planning-hover-card.position-above::before,
	.eigene-stunden-hover-card.position-above::before,
	.row-actions-hover-card.position-above::before,
	.eigener-status-hover-card.position-above::before {
		content: '';
		position: absolute;
		left: var(--arrow-left, 50px);
		bottom: -10px;
		width: 18px;
		height: 10px;
		transform: translateX(-50%) rotate(180deg);
		background: #158cba;
		clip-path: polygon(50% 0, 0 100%, 100% 100%);
		z-index: 2;
		pointer-events: none;
	}

	.client-hover-card.position-above::after,
	.category-hover-card.position-above::after,
	.receipts-hover-card.position-above::after,
	.planning-hover-card.position-above::after,
	.eigene-stunden-hover-card.position-above::after,
	.row-actions-hover-card.position-above::after,
	.eigener-status-hover-card.position-above::after {
		content: '';
		position: absolute;
		left: var(--arrow-left, 50px);
		bottom: -8px;
		width: 14px;
		height: 8px;
		transform: translateX(-50%) rotate(180deg);
		background: #158cba;
		clip-path: polygon(50% 0, 0 100%, 100% 100%);
		z-index: 3;
		pointer-events: none;
	}

	/* Calendar Container */
	.receipts-calendar-header {
		background: linear-gradient(135deg, #1a9fd8 0%, #158cba 50%, #127a9f 100%);
		color: #ffffff;
		padding: 16px;
		border-radius: 10px 10px 0 0;
		border-bottom: 1px solid #158cba;
		box-shadow: 0 2px 8px rgba(21, 140, 186, 0.3);
		text-align: center;
		font-size: 15px;
		font-weight: 600;
	}
	.receipts-hover-card:not(.position-above) .receipts-calendar-header::before,
	.receipts-hover-card:not(.position-above) .receipts-calendar-header::after {
		background: #158cba;
	}
	.receipts-hover-card.position-above::before,
	.receipts-hover-card.position-above::after {
		background: #158cba;
	}

	.receipts-calendars {
		display: flex;
		gap: 12px;
		padding: 16px;
		justify-content: flex-start;
		align-items: flex-start;
		background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
	}

	.receipts-calendar-month {
		flex: 0 0 auto;
		width: 160px;
	}

	.receipts-month-title {
		text-align: center;
		font-weight: 600;
		font-size: 12px;
		margin-bottom: 8px;
		color: #2f4c65;
	}

	.receipts-calendar-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 2px;
		margin-bottom: 12px;
	}

	.receipts-calendar-day-header {
		text-align: center;
		font-size: 10px;
		font-weight: 600;
		color: #6b8498;
		padding: 4px 2px;
	}

	.receipts-calendar-day {
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 11px;
		border-radius: 4px;
		border: 1px solid transparent;
		background: linear-gradient(180deg, #f7fafc 0%, #edf3f7 100%);
		color: #2a465d;
		position: relative;
		transition: all 0.15s ease;
	}

	.receipts-calendar-day.empty {
		background: transparent;
	}

	.receipts-calendar-day.today {
		font-weight: 700;
		color: color-mix(in srgb, var(--progress-actual-base, #52B2CF) 72%, #18384d);
		border-color: color-mix(in srgb, var(--progress-actual-base, #52B2CF) 72%, #1e93c4);
		box-shadow:
			inset 0 0 0 2px color-mix(in srgb, var(--progress-actual-base, #52B2CF) 72%, transparent),
			0 0 0 1px rgba(255, 255, 255, 0.85);
	}

	/* Date type colors - distinct with subtle 3D/plastic effect */
	.receipts-calendar-day.incoming-agreed {
		background: linear-gradient(135deg, #b3e5fc 0%, #81d4fa 100%);
		color: #01579b;
		font-weight: 600;
		box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	}

	.receipts-calendar-day.incoming-actual {
		background: linear-gradient(135deg, #80deea 0%, #4dd0e1 100%);
		color: #006064;
		font-weight: 700;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}

	.receipts-calendar-day.completion-agreed {
		background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
		color: #f57f17;
		font-weight: 600;
		box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	}

	.receipts-calendar-day.outgoing-actual {
		background: linear-gradient(135deg, #a5d6a7 0%, #81c784 100%);
		color: #1b5e20;
		font-weight: 700;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}

	.receipts-calendar-day.due-date {
		background: linear-gradient(135deg, #ffccbc 0%, #ffab91 100%);
		color: #bf360c;
		font-weight: 600;
		box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	}

	/* Legend section */
	.receipts-legend {
		padding: 0 16px 16px 16px;
	}

	.receipts-legend-columns {
		display: flex;
		gap: 16px;
		align-items: flex-start;
	}

	.receipts-legend-column {
		flex: 0 0 auto;
		width: 160px;
	}

	.receipts-legend-title {
		font-size: 11px;
		font-weight: 700;
		color: #365a72;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-top: 3px;
		margin-bottom: 8px;
		padding-bottom: 4px;
		border-bottom: 1px solid #d8e4ee;
	}

	.receipts-legend-item {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 10px;
		font-size: 12px;
	}

	.receipts-legend-item:last-child {
		margin-bottom: 0;
	}

	.receipts-legend-cell {
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 11px;
		border-radius: 4px;
		border: 1px solid transparent;
		flex-shrink: 0;
		font-weight: 600;
		transition: all 0.15s ease;
	}

	/* Match calendar day styling exactly - with plastic effect */
	.receipts-legend-cell.empty {
		background: linear-gradient(180deg, #f7fafc 0%, #edf3f7 100%);
		color: #2a465d;
	}

	.receipts-legend-cell.incoming-agreed {
		background: linear-gradient(135deg, #b3e5fc 0%, #81d4fa 100%);
		color: #01579b;
		font-weight: 600;
		box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	}

	.receipts-legend-cell.incoming-actual {
		background: linear-gradient(135deg, #80deea 0%, #4dd0e1 100%);
		color: #006064;
		font-weight: 700;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}

	.receipts-legend-cell.completion-agreed {
		background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
		color: #f57f17;
		font-weight: 600;
		box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	}

	.receipts-legend-cell.outgoing-actual {
		background: linear-gradient(135deg, #a5d6a7 0%, #81c784 100%);
		color: #1b5e20;
		font-weight: 700;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}

	.receipts-legend-cell.due-date {
		background: linear-gradient(135deg, #ffccbc 0%, #ffab91 100%);
		color: #bf360c;
		font-weight: 600;
		box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	}

	.receipts-legend-text {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
	}

	.receipts-legend-label {
		color: #38576b;
		text-align: left;
		line-height: 1.3;
	}

	.receipts-legend-date {
		color: #365a72;
		font-weight: 600;
		font-size: 11px;
		text-align: right;
		margin-top: 2px;
	}

	/* WP/BR simple variant for receipts hover card */
	.receipts-hover-card-simple {
		min-width: 340px;
		max-width: 380px;
	}

	.receipts-simple-body {
		padding: 14px;
		background: linear-gradient(180deg, #f9fcff 0%, #f3f8fc 100%);
		border-radius: 0 0 10px 10px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.receipts-simple-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 12px;
		border-radius: 9px;
		border: 1px solid #d8e6f0;
		background: #fff;
	}

	.receipts-simple-meta {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.receipts-simple-icon {
		width: 22px;
		height: 22px;
		border-radius: 999px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		font-size: 12px;
	}

	.receipts-simple-item.is-incoming .receipts-simple-icon {
		background: linear-gradient(135deg, #b3e5fc 0%, #81d4fa 100%);
		color: #01579b;
	}

	.receipts-simple-item.is-outgoing .receipts-simple-icon {
		background: linear-gradient(135deg, #a5d6a7 0%, #81c784 100%);
		color: #1b5e20;
	}

	.receipts-simple-label {
		font-size: 12px;
		font-weight: 700;
		line-height: 1.2;
		color: #2f4757;
		white-space: nowrap;
	}

	.receipts-simple-date {
		font-size: 12px;
		font-weight: 700;
		line-height: 1.2;
		color: #21485e;
		text-align: right;
		white-space: nowrap;
		margin-left: auto;
	}

	.receipts-simple-date.is-empty {
		color: #8a9aa7;
		font-style: italic;
	}

	/* JA timeline variant for receipts hover card */
	.receipts-hover-card-ja {
		min-width: 700px;
		max-width: 860px;
		--ja-balance-color: #1f2328;
		--ja-incoming-color: #81d4fa;
		--ja-incoming-text-color: #01579b;
		--ja-incoming-actual-color: #4dd0e1;
		--ja-incoming-actual-text-color: #006064;
		--ja-completion-color: #fff59d;
		--ja-completion-text-color: #f57f17;
		--ja-outgoing-actual-color: #81c784;
		--ja-outgoing-actual-text-color: #1b5e20;
		--ja-due-color: #ffab91;
		--ja-due-text-color: #bf360c;
	}

	.receipts-ja-body {
		padding: 16px;
		background: linear-gradient(180deg, #f9fcff 0%, #f3f8fc 100%);
		border-radius: 0 0 10px 10px;
		overflow: hidden;
	}

	.receipts-ja-timeline {
		position: relative;
		height: 130px;
		padding: 0 10px;
		border: 1px solid #d8e6f0;
		border-radius: 10px;
		background: #fff;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
		overflow: hidden;
	}

	.receipts-ja-track {
		position: absolute;
		left: 10px;
		right: 10px;
		top: 70px;
		height: 6px;
		border-radius: 999px;
		background: linear-gradient(180deg, #ddeaf2 0%, #cfdde8 100%);
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
	}

	.receipts-ja-months {
		position: absolute;
		inset: 0 10px 0 10px;
	}

	.receipts-ja-month {
		position: absolute;
		top: 79px;
		transform: translateX(-50%);
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}
	.receipts-ja-month.is-start { transform: translateX(0); }
	.receipts-ja-month.is-end { transform: translateX(-100%); }

	.receipts-ja-month-tick {
		width: 2px;
		height: 9px;
		background: #9ab3c4;
		border-radius: 2px;
	}

	.receipts-ja-month-label {
		font-size: 10px;
		font-weight: 700;
		color: #597182;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.receipts-ja-events {
		position: absolute;
		inset: 0 10px 0 10px;
		pointer-events: none;
		--ja-stack-step: 18px;
	}

	.receipts-ja-event {
		position: absolute;
		top: calc(34px - (var(--ja-label-level, 0) * var(--ja-stack-step)));
		transform: translateX(-50%);
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		z-index: calc(40 - var(--ja-label-level, 0));
	}
	.receipts-ja-event.is-left-edge { transform: translateX(0); align-items: flex-start; }
	.receipts-ja-event.is-right-edge { transform: translateX(-100%); align-items: flex-end; }

	.receipts-ja-event-date {
		position: relative;
		z-index: 2;
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		color: var(--ja-event-text-color, currentColor);
		white-space: nowrap;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
		background: rgba(255, 255, 255, 0.96);
		padding: 1px 4px;
		border-radius: 4px;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95);
	}

	.receipts-ja-event-line {
		position: relative;
		z-index: 1;
		width: 3px;
		height: calc(28px + (var(--ja-label-level, 0) * var(--ja-stack-step)));
		border-radius: 999px;
		background: currentColor;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
	}

	.receipts-ja-event-dot {
		margin-top: 0;
		width: 11px;
		height: 11px;
		border-radius: 50%;
		background: currentColor;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 1px 3px rgba(0, 0, 0, 0.22);
	}

	.receipts-ja-event.is-balance { color: var(--ja-balance-color); }
	.receipts-ja-event.is-incoming { color: var(--ja-incoming-color); --ja-event-text-color: var(--ja-incoming-text-color); }
	.receipts-ja-event.is-incoming-actual { color: var(--ja-incoming-actual-color); --ja-event-text-color: var(--ja-incoming-actual-text-color); }
	.receipts-ja-event.is-completion { color: var(--ja-completion-color); --ja-event-text-color: var(--ja-completion-text-color); }
	.receipts-ja-event.is-outgoing-actual { color: var(--ja-outgoing-actual-color); --ja-event-text-color: var(--ja-outgoing-actual-text-color); }
	.receipts-ja-event.is-due { color: var(--ja-due-color); --ja-event-text-color: var(--ja-due-text-color); }

	.receipts-ja-legend {
		margin-top: 12px;
		display: grid;
		grid-template-columns: repeat(var(--ja-legend-columns, 4), minmax(0, 1fr));
		gap: 6px;
	}

	.receipts-ja-legend-item {
		display: grid;
		grid-template-columns: 12px minmax(0, 1fr);
		column-gap: 8px;
		row-gap: 2px;
		padding: 7px 8px;
		border-radius: 9px;
		border: 1px solid #d9e6ef;
		background: #fff;
	}

	.receipts-ja-legend-swatch {
		grid-row: 1 / span 2;
		width: 10px;
		height: 10px;
		margin-top: 2px;
		border-radius: 50%;
		background: #9aa;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	}

	.receipts-ja-legend-name {
		font-size: 11px;
		font-weight: 700;
		color: #2f4757;
		line-height: 1.15;
		min-height: calc(2 * 1.15em);
		white-space: normal;
	}

	.receipts-ja-legend-date {
		font-size: 11px;
		font-weight: 600;
		color: #4f6777;
		text-align: right;
		width: 100%;
		justify-self: stretch;
	}

	.receipts-ja-legend-item.is-balance .receipts-ja-legend-swatch { background: var(--ja-balance-color); }
	.receipts-ja-legend-item.is-incoming .receipts-ja-legend-swatch { background: var(--ja-incoming-color); }
	.receipts-ja-legend-item.is-incoming-actual .receipts-ja-legend-swatch { background: var(--ja-incoming-actual-color); }
	.receipts-ja-legend-item.is-completion .receipts-ja-legend-swatch { background: var(--ja-completion-color); }
	.receipts-ja-legend-item.is-outgoing-actual .receipts-ja-legend-swatch { background: var(--ja-outgoing-actual-color); }
	.receipts-ja-legend-item.is-due .receipts-ja-legend-swatch { background: var(--ja-due-color); }
	.receipts-ja-legend-item.is-balance .receipts-ja-legend-name,
	.receipts-ja-legend-item.is-balance .receipts-ja-legend-date { color: var(--ja-balance-color); }
	.receipts-ja-legend-item.is-incoming .receipts-ja-legend-name,
	.receipts-ja-legend-item.is-incoming .receipts-ja-legend-date { color: var(--ja-incoming-text-color); }
	.receipts-ja-legend-item.is-incoming-actual .receipts-ja-legend-name,
	.receipts-ja-legend-item.is-incoming-actual .receipts-ja-legend-date { color: var(--ja-incoming-actual-text-color); }
	.receipts-ja-legend-item.is-completion .receipts-ja-legend-name,
	.receipts-ja-legend-item.is-completion .receipts-ja-legend-date { color: var(--ja-completion-text-color); }
	.receipts-ja-legend-item.is-outgoing-actual .receipts-ja-legend-name,
	.receipts-ja-legend-item.is-outgoing-actual .receipts-ja-legend-date { color: var(--ja-outgoing-actual-text-color); }
	.receipts-ja-legend-item.is-due .receipts-ja-legend-name,
	.receipts-ja-legend-item.is-due .receipts-ja-legend-date { color: var(--ja-due-text-color); }

	.receipts-ja-empty {
		padding: 18px 14px;
		text-align: center;
		font-size: 12px;
		color: #6d7f8c;
		background: #fff;
		border: 1px dashed #cfdee8;
		border-radius: 9px;
	}

	/* Gap indicator between months */
	.receipts-calendar-gap {
		display: flex;
		align-items: center;
		align-self: stretch;
		justify-content: center;
		padding: 0 8px;
		min-width: 30px;
		color: #999;
		font-size: 16px;
		letter-spacing: 2px;
	}

	/* Extra month styling (months outside default 3-month range) */
	.receipts-calendar-month.extra-month {
		opacity: 0.85;
		border: 1px dashed #b0bec5;
		border-radius: 6px;
		padding: 8px;
		background: #fafafa;
	}

	.receipts-calendar-month.extra-month .receipts-month-title {
		color: #607d8b;
		font-style: italic;
	}

	.receipts-legend-column.extra-month {
		opacity: 0.85;
		border-left: 2px dashed #b0bec5;
		padding-left: 12px;
	}

	.receipts-legend-column.extra-month .receipts-legend-title {
		color: #607d8b;
		font-style: italic;
	}

	/* Ensure empty legend columns still take up space */
	.receipts-legend-column {
		min-height: 60px;
	}

	/* Legend gap indicator - must match calendar gap width */
	.receipts-legend-gap {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding: 0 8px;
		padding-top: 24px; /* Align with content, not title */
		min-width: 30px;
		color: #999;
		font-size: 16px;
		letter-spacing: 2px;
	}

	.plan-flex {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		align-items: center;
	}

	.plan-chip {
		display: inline-flex;
		align-items: center;
		padding: 2px 8px;
		margin: 2px 0;
		font-size: 12px;
		line-height: 1.2;
		text-decoration: none !important;
		border: 1px solid;
		border-radius: 6px;
		white-space: nowrap;
	}

	.plan-chip.done   { background: #f6fbf8; border-color: #d8efe3; }
	.plan-chip.undone { background: #fff8f1; border-color: #ffe2c7; }
	.plan-chip .glyphicon { font-size: 11px; opacity: .75; margin-right: 4px; }

	#set-done-table td, #set-done-table th { vertical-align: top; }

	/* Card-only shape adjustments stay local to receipts hover views. */
	.stunden-helfer-donut-compact-grid .stunden-helfer-donut-badge,
	.stunden-helfer-donut-summary .stunden-helfer-donut-summary-item,
	.stunden-helfer-donut-staff-row .staff-hours-chip,
	.planning-hover-card .planning-legend .legend-item {
		border-radius: var(--ui-radius-chip, 8px);
	}

	/* Requested shape tweak: keep these badges less pill-like and closer to
	   the rectangular look used in "Bereich & Periode". */
	#receiptstab .eigener-status-cell .eigener-status-pill,
	.eigener-status-hover-card .eigener-status-pill {
		border-radius: 6px;
		border: 0;
		box-shadow: var(--ui-badge-shadow, 0 1px 3px rgba(0,0,0,0.2));
	}

	#receiptstab .stunden-helfer-donut-compact-grid .stunden-helfer-donut-badge,
	#receiptstab .stunden-helfer-donut-summary .stunden-helfer-donut-summary-item {
		border-radius: 6px;
		box-shadow: var(--ui-badge-shadow, 0 1px 3px rgba(0,0,0,0.2));
	}

	/* Receipts table sizing from former global user.css */
	.receiptstabstyle th.type_staff,
	.receiptstabstyle td.type_staff {
		width: 20px;
	}

	.receiptstabstyle th.support,
	.receiptstabstyle td.support {
		width: 90px;
	}

	.receiptstabstyle th.client_name,
	.receiptstabstyle td.client_name {
		word-break: break-word;
		overflow-wrap: anywhere;
	}