/* LaborShare shared stylesheet: migrated components + compatibility rules.
 * New UI MUST use the standard components at the end of this file.
 * Legacy rules retained only where source references them; not a new authoring API.
 */
/* LaborShare administration UI. Original stylesheet order preserved for cascade compatibility.
   Edit shared components here; do not add page-level CSS. See UI_STANDARD.md. */

/* --- Existing component rules: laborshare.css --- */
:root {
	color-scheme: light;
	--laborshare_deep_harbor_navy: #1b354c;
	--laborshare_marina_blue: #2a4a66;
	--laborshare_bay_blue: #507193;
	--laborshare_marsh_sage: #8e9b70;
	--laborshare_weathered_stone: #9fa49c;
	--laborshare_driftwood_sand: #ccccb5;
	--laborshare_mist_gray: #e3e7e3;
	--laborshare_charcoal: #2a322a;
	/* role tokens follow the look shared with Vericol (brand blue buttons, navy header) */
	--laborshare_primary: #1f5edb;
	--laborshare_primary_hover: #163f94;
	--laborshare_primary_light: #e9eef8;
	--laborshare_secondary: var(--laborshare_text);
	--laborshare_secondary_hover: #000000;
	--laborshare_focus: #1f5edb;
	--laborshare_background: #f6f7fa;
	--laborshare_surface: #ffffff;
	--laborshare_text: #1b2330;
	--laborshare_text_muted: #5b6576;
	--laborshare_border: #dce1ea;
	--laborshare_error: #b42318;
	--laborshare_warning_background: var(--laborshare_driftwood_sand);
	--laborshare_success_background: var(--laborshare_mist_gray);
	--laborshare_shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 8px rgba(16, 24, 40, 0.04);
	--laborshare_radius: var(--laborshare_radius_value);
	--laborshare_font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--laborshare_font_mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

html {
	min-height: 100%;
	background: var(--laborshare_background);
}

body {
	min-height: 100%;
	margin: 0;
	background: var(--laborshare_background);
	color: var(--laborshare_text);
	font-family: var(--laborshare_font);
	line-height: 1.5;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

form {
	min-height: 100vh;
	margin: 0;
}

a {
	color: var(--laborshare_secondary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--laborshare_secondary_hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: 3px solid var(--laborshare_focus);
	outline-offset: 3px;
}

.laborshare_skip_link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 10000;
	padding: 0.65rem 0.9rem;
	border-radius: 6px;
	background: var(--laborshare_surface);
	color: var(--laborshare_text);
	font-weight: 700;
	transform: translateY(-200%);
}

.laborshare_skip_link:focus {
	transform: translateY(0);
}

.laborshare_public_main {
	min-height: 100vh;
}

.laborshare_login_shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.laborshare_login_card {
	width: 100%;
	max-width: 430px;
	padding: 2rem;
	border: 1px solid var(--laborshare_border);
	border-radius: var(--laborshare_radius);
	background: var(--laborshare_surface);
	box-shadow: var(--laborshare_shadow);
}

.laborshare_brand {
	margin: 0 0 0.2rem;
	color: var(--laborshare_primary);
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.laborshare_heading {
	margin: 1.5rem 0 0.25rem;
	color: var(--laborshare_text);
	font-size: 1.5rem;
	font-weight: 650;
	line-height: 1.2;
}

.laborshare_intro {
	margin: 0 0 1.5rem;
	color: var(--laborshare_text_muted);
	font-size: 1rem;
}

.laborshare_login_card .field {
	margin-bottom: 1.15rem;
}

.laborshare_login_card .label {
	color: var(--laborshare_text);
}

.laborshare_login_card .input {
	min-height: 46px;
	border-color: var(--laborshare_border);
	color: var(--laborshare_text);
}

.laborshare_login_card .input:hover {
	border-color: var(--laborshare_text_muted);
}

.laborshare_login_card .input:focus,
.laborshare_login_card .input:focus-visible {
	border-color: var(--laborshare_secondary);
	box-shadow: 0 0 0 1px var(--laborshare_secondary);
}

.laborshare_login_card .icon {
	color: var(--laborshare_text_muted);
}

.laborshare_login_card .button.is-primary {
	min-height: 46px;
	border-color: var(--laborshare_primary);
	background: var(--laborshare_primary);
	color: #ffffff;
	font-weight: 700;
}

.laborshare_login_card .button.is-primary:hover,
.laborshare_login_card .button.is-primary:active {
	border-color: var(--laborshare_primary_hover);
	background: var(--laborshare_primary_hover);
	color: #ffffff;
}

.laborshare_login_card .button.is-primary:focus-visible {
	border-color: var(--laborshare_primary_hover);
	background: var(--laborshare_primary_hover);
	color: #ffffff;
	box-shadow: none;
}

.laborshare_logout_card .laborshare_brand {
	margin-bottom: 1.35rem;
}

.laborshare_logout_heading {
	margin: 0 0 0.45rem;
	color: var(--laborshare_text);
	font-size: 1.55rem;
	font-weight: 750;
	line-height: 1.2;
}

/* Administration shell */

.laborshare_administration_body {
	/* clip, not hidden: hidden makes the body a scroll box of its own, so the save bar could not float */
	overflow-x: clip;
}

.laborshare_administration_shell {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	grid-template-rows: 72px minmax(calc(100vh - 72px), auto);
	width: 100%;
	min-height: 100vh;
}

.laborshare_administration_header {
	position: sticky;
	z-index: 40;
	top: 0;
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
	padding: 0 1.5rem;
	border-bottom: 1px solid var(--laborshare_border);
	background: var(--laborshare_surface);
}

.laborshare_administration_header_left,
.laborshare_administration_header_right {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 1rem;
}

.laborshare_administration_brand {
	color: var(--laborshare_text);
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.04em;
}

.laborshare_administration_user_name {
	color: var(--laborshare_charcoal);
	font-weight: 650;
}

.laborshare_administration_avatar {
	display: inline-flex;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--laborshare_mist_gray);
	color: var(--laborshare_text);
	font-weight: 800;
}

.laborshare_administration_sidebar {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: 1.35rem 1rem;
	border-right: 1px solid var(--laborshare_border);
	background: #f7f7f6;
}

.laborshare_administration_navigation {
	display: grid;
	gap: 0.4rem;
}

.laborshare_administration_navigation a,
.laborshare_administration_navigation span,
.laborshare_administration_sidebar_footer a {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	min-height: 46px;
	padding: 0.75rem 0.9rem;
	border-radius: 8px;
	color: var(--laborshare_text);
	font-weight: 650;
}

.laborshare_administration_navigation a:hover,
.laborshare_administration_navigation a.is_active {
	background: #e8ebed;
	color: var(--laborshare_text);
}

.laborshare_administration_navigation .is_disabled {
	opacity: 0.55;
}

.laborshare_administration_sidebar_footer {
	padding-top: 1rem;
	border-top: 1px solid var(--laborshare_border);
}

.laborshare_administration_content {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	padding: 2.25rem;
	background: #ffffff;
}

@media screen and (max-width: 900px) {
	.laborshare_arc_workspace_grid { grid-template-columns: 1fr; }
	.laborshare_original_submission_body { align-items: stretch; flex-direction: column; }
}

.laborshare_administration_metric_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.laborshare_administration_metric_grid.is_four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.laborshare_administration_metric {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 155px;
	flex-direction: column;
	justify-content: center;
	padding: 1.4rem 1.5rem 1.4rem 1.75rem;
	overflow: hidden;
	border: 1px solid var(--laborshare_border);
	border-radius: var(--laborshare_radius);
	background: var(--laborshare_surface);
	box-shadow: var(--laborshare_shadow);
	color: var(--laborshare_text_muted);
	transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.laborshare_administration_metric::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	background: var(--laborshare_bay_blue);
	content: "";
}

.laborshare_administration_metric:hover,
.laborshare_administration_metric:focus-visible {
	border-color: var(--laborshare_bay_blue);
	box-shadow: 0 15px 35px rgba(27, 53, 76, 0.13);
	color: var(--laborshare_text_muted);
	transform: translateY(-1px);
}

.laborshare_administration_metric strong {
	margin: 0.2rem 0 0.35rem;
	color: var(--laborshare_text);
	font-size: 2.65rem;
	font-weight: 850;
	line-height: 1;
}

.laborshare_administration_metric_label {
	color: var(--laborshare_text);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.laborshare_administration_table_detail {
	color: var(--laborshare_text_muted);
	font-size: 0.82rem;
}

.laborshare_visually_hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.laborshare_screen_status {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.9rem;
	align-items: flex-start;
	margin: 0 0 1.25rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--laborshare_border);
	border-left-width: 5px;
	border-radius: 0;
	background: var(--laborshare_surface);
	box-shadow: var(--laborshare_shadow);
	color: var(--laborshare_charcoal);
}

.laborshare_screen_status.is_success {
	border-color: var(--laborshare_marsh_sage);
	background: #f4f7f1;
}

.laborshare_screen_status.is_information {
	border-color: var(--laborshare_bay_blue);
	background: #f2f6fa;
}

.laborshare_screen_status.is_warning {
	border-color: var(--laborshare_driftwood_sand);
	background: #faf8ef;
}

.laborshare_screen_status.is_error {
	border-color: #9f4b45;
	background: #fbf3f2;
}

.laborshare_screen_status_icon {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--laborshare_mist_gray);
	color: var(--laborshare_text);
}

.laborshare_screen_status.is_success .laborshare_screen_status_icon {
	background: var(--laborshare_marsh_sage);
	color: var(--laborshare_text);
}

.laborshare_screen_status.is_error .laborshare_screen_status_icon {
	background: #9f4b45;
	color: #ffffff;
}

.laborshare_screen_status_content strong {
	display: block;
	margin-bottom: 0.12rem;
	color: var(--laborshare_text);
}

.laborshare_screen_status_content time {
	display: block;
	margin-top: 0.35rem;
	color: var(--laborshare_text_muted);
	font-size: 0.76rem;
	font-weight: 650;
}

.laborshare_screen_status_close {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--laborshare_text_muted);
	cursor: pointer;
}

.laborshare_screen_status_close:hover,
.laborshare_screen_status_close:focus-visible {
	background: rgba(27, 53, 76, 0.08);
	color: var(--laborshare_text);
}

.laborshare_back_link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
	color: var(--laborshare_text);
	font-weight: 750;
}

.laborshare_property_form_panel {
	max-width: 1050px;
}

.laborshare_property_identifier {
	display: inline-flex;
	padding: 0.32rem 0.7rem;
	border-radius: 999px;
	background: var(--laborshare_mist_gray);
	color: var(--laborshare_charcoal);
	font-size: 0.78rem;
	font-weight: 750;
	white-space: nowrap;
}

.laborshare_property_identifier_group {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem;
}

.laborshare_property_active_field {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.75rem 0;
}

.laborshare_property_active_field input {
	width: 1.05rem;
	height: 1.05rem;
}

.laborshare_property_active_field label {
	color: var(--laborshare_charcoal);
	font-weight: 700;
}

.laborshare_temporary_password {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.25rem;
	align-items: center;
	max-width: 1050px;
	margin-bottom: 1.25rem;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--laborshare_marsh_sage);
	border-left-width: 5px;
	border-radius: 8px;
	background: #f4f7f1;
	box-shadow: var(--laborshare_shadow);
}

.laborshare_temporary_password strong {
	color: var(--laborshare_text);
}

.laborshare_temporary_password p {
	margin-top: 0.2rem;
	color: var(--laborshare_text_muted);
}

.laborshare_temporary_password dl {
	display: flex;
	gap: 1.5rem;
	margin: 0;
}

.laborshare_temporary_password dt {
	color: var(--laborshare_text_muted);
	font-size: 0.74rem;
	font-weight: 750;
	text-transform: uppercase;
}

.laborshare_temporary_password dd {
	margin: 0.15rem 0 0;
	color: var(--laborshare_text);
	font-family: var(--laborshare_font_mono);
	font-size: 1rem;
	font-weight: 800;
}

.laborshare_administration_overlay {
	position: fixed;
	z-index: 45;
	inset: 72px 0 0;
	background: rgba(27, 53, 76, 0.45);
}

@media (max-width: 950px) {
	.laborshare_administration_metric_grid,
.laborshare_administration_metric_grid.is_four {
		grid-template-columns: 1fr;
	}

	

 

	
}

@media (max-width: 768px) {
	.laborshare_administration_shell {
		display: block;
	}

	.laborshare_administration_header {
		min-height: 72px;
		padding: 0 1rem;
	}

	.laborshare_administration_user_name,
.laborshare_homeowner_link span,
.laborshare_logout_link span {
		display: none;
	}

	.laborshare_administration_sidebar {
		position: fixed;
		z-index: 50;
		top: 72px;
		bottom: 0;
		left: 0;
		width: min(86vw, 290px);
		transform: translateX(-105%);
		transition: transform 160ms ease;
	}

	.laborshare_administration_menu_open .laborshare_administration_sidebar {
		transform: translateX(0);
	}

	.laborshare_administration_content {
		padding: 1.5rem 1rem 2rem;
	}

	

 

	

	

	

	

	.laborshare_temporary_password {
		grid-template-columns: 1fr;
	}

	.laborshare_temporary_password dl {
		flex-direction: column;
		gap: 0.75rem;
	}
}

/* Homeowner application shell */

.laborshare_menu_button {
	display: none;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--laborshare_border);
	border-radius: 9px;
	background: var(--laborshare_surface);
	color: var(--laborshare_text);
	cursor: pointer;
	font-size: 1rem;
}

.laborshare_logout_link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid transparent;
	border-radius: 9px;
	color: var(--laborshare_secondary);
	font-size: 0.86rem;
	font-weight: 700;
	text-decoration: none;
}

.laborshare_logout_link:hover {
	border-color: var(--laborshare_border);
	background: var(--laborshare_mist_gray);
	color: var(--laborshare_secondary_hover);
	text-decoration: none;
}

.laborshare_logout_link {
	min-width: 42px;
	min-height: 42px;
	justify-content: center;
}

.button.is_disabled,
.button.is_disabled:hover {
	border-color: var(--laborshare_border);
	background: var(--laborshare_mist_gray);
	color: var(--laborshare_text_muted);
	cursor: not-allowed;
	opacity: 0.82;
}

.laborshare_status,
.laborshare_pill,
.laborshare_count_tag {
	display: inline-flex;
	min-height: 30px;
	align-items: center;
	justify-content: center;
	padding: 0.28rem 0.68rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 750;
}

.laborshare_pill,
.laborshare_count_tag,
.laborshare_status.is_draft,
.laborshare_status.is_closed {
	background: var(--laborshare_mist_gray);
	color: var(--laborshare_charcoal);
}

.laborshare_status.is_submitted {
	background: var(--laborshare_mist_gray);
	color: var(--laborshare_text);
}

.laborshare_status.is_ready {
	border: 1px solid var(--laborshare_marsh_sage);
	background: var(--laborshare_mist_gray);
	color: var(--laborshare_text);
}

.laborshare_status.is_assessed {
	background: var(--laborshare_bay_blue);
	color: #ffffff;
}

.laborshare_status.is_approved {
	border: 1px solid var(--laborshare_marsh_sage);
	background: var(--laborshare_mist_gray);
	color: var(--laborshare_text);
}

.laborshare_status.is_attention {
	background: var(--laborshare_warning_background);
	color: var(--laborshare_text);
}

.laborshare_empty_icon {
	display: inline-flex;
	width: 54px;
	height: 54px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--laborshare_primary_light);
	color: var(--laborshare_primary);
	font-size: 1.25rem;
}

/* Homeowner manage application */

@media (max-width: 1050px) {

	.laborshare_menu_button {
		display: inline-flex;
	}

	.laborshare_current_application_grid {
		grid-template-columns: 1fr;
	}

	.laborshare_stage_progress {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {

	.laborshare_logout_link span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.laborshare_dashboard_page_header,
	.laborshare_dashboard_card_header {
		align-items: stretch;
		flex-direction: column;
		width: 100%;
		min-width: 0;
	}

	.laborshare_dashboard_page_header > .button,
	.laborshare_dashboard_card_header > .button {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: auto;
		justify-content: center;
		padding: 0.75rem 0.9rem;
		white-space: normal;
	}

	.laborshare_dashboard_page_header h1,
	.laborshare_dashboard_page_header p,
	.laborshare_dashboard_card h2,
	.laborshare_dashboard_card h3,
	.laborshare_dashboard_card p {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.laborshare_application_date {
		grid-template-columns: 1fr;
	}

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

	.laborshare_history_row {
		grid-template-columns: 1fr;
	}

	.laborshare_history_action {
		align-items: flex-start;
		text-align: left;
	}

	.laborshare_history_status_row,
	.laborshare_history_button_row {
		justify-content: flex-start;
	}

	.laborshare_history_button_row {
		align-items: flex-start;
	}

	.laborshare_empty_state {
		padding: 2rem 1rem;
	}
}

@media (max-width: 900px) {
	.laborshare_manage_grid {
		grid-template-columns: 1fr;
	}

	.laborshare_manage_status_line {
		grid-template-columns: 1fr;
		gap: 0.8rem;
		align-items: start;
	}

	.laborshare_manage_activity_row {
		grid-template-columns: minmax(0, 1fr) 125px auto;
	}
}

@media (max-width: 620px) {
	.laborshare_manage_activity_row {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}

	.laborshare_manage_read {
		justify-content: flex-start;
	}
}

@media (max-width: 480px) {
	.laborshare_login_shell {
		align-items: flex-start;
		padding: 1rem;
	}

	.laborshare_login_card {
		margin-top: 5vh;
		padding: 1.4rem;
	}

	.laborshare_logout_shell {
		align-items: flex-start;
		padding: 1rem;
	}

	.laborshare_logout_card {
		margin-top: 5vh;
		padding: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Administration application review */

[data-review-panel][hidden],[data-review-aside][hidden] { display: none !important; }

@media (max-width: 1180px) { .laborshare_review_layout { grid-template-columns: 1fr; } .laborshare_review_change { grid-row: 1; } }
@media (max-width: 700px) { .laborshare_review_section_heading { display: block; } .laborshare_review_section_heading .button { margin-top: .75rem; } .laborshare_review_field_grid,.laborshare_review_summary_grid { grid-template-columns: 1fr; } .laborshare_review_field_grid > div { grid-column: 1 / -1; border-right: 0; } .laborshare_review_identity { display: grid; } .laborshare_review_activity_list article { grid-template-columns: 1fr; } .laborshare_review_file_list article { grid-template-columns: 42px minmax(0,1fr); } .laborshare_review_file_action { grid-column: 2; justify-content: flex-start; } .laborshare_snapshot_list article { grid-template-columns: 56px 1fr; } .laborshare_snapshot_list article > a:last-child { grid-column: 2; } }

/* Homeowner dashboard application actions */

@media (max-width: 768px) {
	.laborshare_application_action_group {
		justify-content: flex-start;
	}
}

/* LaborShare application summary chips */

/* Tom Select aligned with Bulma / LaborShare form styling */

@media (max-width: 1180px) {
	.laborshare_review_workspace > .laborshare_review_sidebar {
		grid-row: 1;
	}

	.laborshare_review_workspace > main {
		grid-row: 2;
	}
}

/* Administration dashboard: search-first layout */

/* Decision outcome chips */

/* Native details behavior for the compact administration work queue. */

/* 2026-09-02 header, administration navigation, search, and work queue cleanup */
.laborshare_administration_brand,
.laborshare_homeowner_brand {
	color: var(--laborshare_text);
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	text-decoration: none;
}

.laborshare_administration_brand:hover,
.laborshare_homeowner_brand:hover {
	color: var(--laborshare_text);
	text-decoration: none;
}

/* Only direct navigation children are menu rows. Styling every descendant span
	 caused the text spans themselves to receive row padding/min-height. */
.laborshare_administration_navigation > a,
.laborshare_administration_navigation > span,
.laborshare_administration_sidebar_footer > a {
	display: grid;
	grid-template-columns: 1.35rem minmax(0, 1fr);
	align-items: center;
	column-gap: 0.8rem;
	min-height: 46px;
	padding: 0.75rem 0.9rem;
	border-radius: 8px;
	color: var(--laborshare_text);
	font-weight: 650;
	text-decoration: none;
	text-align: left;
}

.laborshare_administration_navigation > a > i,
.laborshare_administration_navigation > span > i,
.laborshare_administration_sidebar_footer > a > i {
	width: 1.35rem;
	text-align: center;
}

.laborshare_administration_navigation > a > span,
.laborshare_administration_navigation > span > span,
.laborshare_administration_sidebar_footer > a > span {
	display: block;
	min-height: 0;
	padding: 0;
	border-radius: 0;
	color: inherit;
	font-weight: inherit;
	text-align: left;
}

.laborshare_administration_navigation > a:hover,
.laborshare_administration_navigation > a.is_active {
	background: #e8ebed;
	color: var(--laborshare_text);
	text-decoration: none;
}

/* --- Existing component rules: laborshare_application.css --- */

/* Simplified application: unmistakable, compact instructions, not a form card. */

/* Optional simplified fields are tucked away until the homeowner requests them. */

@media (max-width: 700px) {
	.laborshare_application_page_header_with_identifier,
.laborshare_application_action{ align-items: stretch; flex-direction: column; }
	.laborshare_application_header_identifier_group{ justify-content: flex-start; }
	.laborshare_application_wizard{ grid-template-columns: 1fr; }
	.laborshare_application_wizard li{ display: none; }
	.laborshare_application_wizard li.is_complete,
.laborshare_application_wizard li.is_current{ display: flex; }
	
	
	.laborshare_application_action > div{ flex-direction: column; }
	.laborshare_application_action .button{ width: 100%; white-space: normal; }
	
	
	
	.laborshare_application_document_body{ padding-right: 1rem; padding-left: 1rem; }
	.laborshare_application_document_list{ padding-right: 1rem; padding-left: 1rem; }
	.laborshare_application_document_row{ grid-template-columns: auto minmax(0, 1fr); }
	.laborshare_document_remove_button{ grid-column: 1 / -1; width: 100%; }
	.laborshare_application_record_header{ align-items: stretch; flex-direction: column; padding: 1.15rem; }
	.laborshare_application_record_identity{ flex-direction: column; }
	
	
	.laborshare_application_record_document > header{ align-items: flex-start; flex-direction: column; }
	.laborshare_application_record_document_preview{ padding: 0.75rem; }
	.laborshare_application_record_pdf{ height: 65vh; min-height: 430px; }
}

@media print {
	@page { margin: 0.40in; }
	body{ background: #ffffff !important; }
	.laborshare_homeowner_header,
.laborshare_homeowner_sidebar,
.laborshare_homeowner_overlay,
.laborshare_print_hide,
.laborshare_screen_status{ display: none !important; }
	.laborshare_application_page_header{ margin-bottom: 0.25in; }
	.laborshare_application_record_header{ padding: 0.2in; border: 1px solid #9fa49c; border-top: 5px solid #1b354c; background: #ffffff !important; }
	.laborshare_dashboard_card{
		break-inside: avoid;
		border: 1px solid #9fa49c !important;
		box-shadow: none !important;
	}
	.laborshare_application_record_pdf{ display: none !important; }
	.laborshare_application_record_pdf_print{
		display: block !important;
		padding: 0.15in;
		border: 1px solid #9fa49c;
		color: #2a322a;
		font-weight: 700;
	}
}

/* A property co-owner can read an application without being its submitting applicant. */

/* --- Existing component rules: laborshare_google.css --- */
/* LaborShare clean interface layer - 2026-09-02
	 Loaded after Bulma and the legacy LaborShare styles so new screens can migrate safely. */

:root {
}

.laborshare_administration_body,
.laborshare_homeowner_body {
	background: var(--laborshare_color_surface);
	color: var(--laborshare_color_text);
	font-family: var(--laborshare_font);
	-webkit-font-smoothing: antialiased;
}

.laborshare_administration_body a,
.laborshare_homeowner_body a {
	text-decoration: none;
}

/* Shared top application shell */
.laborshare_administration_shell,
.laborshare_homeowner_shell {
	grid-template-columns: var(--laborshare_color_sidebar) minmax(0, 1fr);
	grid-template-rows: 64px minmax(calc(100vh - 64px), auto);
}

.laborshare_administration_header,
.laborshare_homeowner_header {
	height: 64px;
	padding: 0 24px 0 18px;
	border-bottom: 1px solid var(--laborshare_color_border);
	background: #fff;
}

.laborshare_administration_header_left,
.laborshare_administration_header_right,
.laborshare_homeowner_header_left,
.laborshare_homeowner_header_right {
	gap: 10px;
}

.laborshare_menu_button {
	width: 38px;
	height: 38px;
	min-width: 38px;
	min-height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--laborshare_color_muted);
	box-shadow: none;
}

.laborshare_menu_button:hover {
	background: var(--laborshare_color_hover);
	color: var(--laborshare_color_text);
}

.laborshare_administration_brand,
.laborshare_homeowner_brand {
	color: var(--laborshare_color_text);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.laborshare_administration_brand:hover,
.laborshare_homeowner_brand:hover {
	color: var(--laborshare_color_text);
}

.laborshare_administration_user_name,
.laborshare_homeowner_user_name {
	color: var(--laborshare_color_muted);
	font-size: 13px;
	font-weight: 400;
}

.laborshare_administration_version {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-right: 12px;
	border-right: 1px solid var(--laborshare_color_border);
	color: var(--laborshare_color_muted);
	font-size: 10px;
	line-height: 1.25;
	white-space: nowrap;
}

.laborshare_administration_version span:first-child {
	color: var(--laborshare_color_text);
}

.laborshare_administration_avatar,
.laborshare_homeowner_avatar {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: var(--laborshare_color_blue);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

.laborshare_logout_link {
	width: 36px;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--laborshare_color_muted);
}

.laborshare_logout_link span {
	display: none;
}

.laborshare_logout_link:hover {
	border: 0;
	background: var(--laborshare_color_hover);
	color: var(--laborshare_color_text);
}

/* Shared left navigation */
.laborshare_administration_sidebar,
.laborshare_homeowner_sidebar {
	top: 64px;
	height: calc(100vh - 64px);
	padding: 14px 10px 24px 0;
	border-right: 1px solid var(--laborshare_color_border);
	background: #fff;
}

.laborshare_administration_navigation,
.laborshare_homeowner_navigation {
	gap: 2px;
}

.laborshare_administration_navigation a,
.laborshare_administration_navigation span,
.laborshare_administration_sidebar_footer a,
.laborshare_homeowner_navigation a,
.laborshare_homeowner_navigation > span,
.laborshare_homeowner_sidebar_footer a {
	min-height: 40px;
	gap: 14px;
	padding: 0 18px 0 24px;
	border-radius: 0 20px 20px 0;
	color: #3c4043;
	font-size: 14px;
	font-weight: 500;
}

.laborshare_administration_navigation i,
.laborshare_homeowner_navigation i,
.laborshare_administration_sidebar_footer i,
.laborshare_homeowner_sidebar_footer i {
	width: 20px;
	color: var(--laborshare_color_muted);
	text-align: center;
}

.laborshare_administration_navigation a:hover,
.laborshare_administration_sidebar_footer a:hover,
.laborshare_homeowner_navigation a:hover,
.laborshare_homeowner_sidebar_footer a:hover {
	background: var(--laborshare_color_hover);
	color: var(--laborshare_color_text);
}

.laborshare_homeowner_navigation a.is_active {
	background: var(--laborshare_color_blue_soft);
	color: var(--laborshare_color_blue_dark);
	font-weight: 500;
}

.laborshare_homeowner_navigation a.is_active i {
	color: var(--laborshare_color_blue_dark);
}

.laborshare_administration_sidebar_footer,
.laborshare_homeowner_sidebar_footer {
	padding-top: 12px;
	border-top: 1px solid var(--laborshare_color_line);
}

.laborshare_administration_content {
	padding: 30px 36px 56px;
	background: #fff;
}

/* Shared typography */
.laborshare_eyebrow {
	margin-bottom: 6px;
	color: var(--laborshare_color_muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Google-style shared controls. Bulma remains loaded as a compatibility layer. */
.laborshare_administration_body .input,
.laborshare_administration_body .textarea,
.laborshare_administration_body .select select,
.laborshare_homeowner_body .input,
.laborshare_homeowner_body .textarea,
.laborshare_homeowner_body .select select {
	border: 1px solid var(--laborshare_color_border);
	border-radius: 4px;
	background: #fff;
	color: var(--laborshare_color_text);
	box-shadow: none;
	font-family: inherit;
}

.laborshare_administration_body .input:focus,
.laborshare_administration_body .textarea:focus,
.laborshare_administration_body .select select:focus,
.laborshare_homeowner_body .input:focus,
.laborshare_homeowner_body .textarea:focus,
.laborshare_homeowner_body .select select:focus {
	border-color: var(--laborshare_color_blue);
	box-shadow: inset 0 0 0 1px var(--laborshare_color_blue);
}

.laborshare_administration_body .label,
.laborshare_homeowner_body .label {
	color: var(--laborshare_color_muted);
	font-size: 11px;
	font-weight: 600;
}

.laborshare_administration_body .button,
.laborshare_homeowner_body .button,
.laborshare_google_button {
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--laborshare_color_border);
	border-radius: 4px;
	background: #fff;
	color: var(--laborshare_color_blue);
	box-shadow: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.laborshare_administration_body .button:hover,
.laborshare_homeowner_body .button:hover,
.laborshare_google_button:hover {
	border-color: var(--laborshare_color_border);
	background: var(--laborshare_color_hover);
	color: var(--laborshare_color_blue_dark);
}

.laborshare_administration_body .laborshare_button_primary,
.laborshare_homeowner_body .laborshare_primary_button,
.laborshare_google_button_primary {
	border-color: var(--laborshare_color_blue);
	background: var(--laborshare_color_blue);
	color: #fff;
}

.laborshare_administration_body .laborshare_button_primary:hover,
.laborshare_homeowner_body .laborshare_primary_button:hover,
.laborshare_google_button_primary:hover {
	border-color: var(--laborshare_color_blue_dark);
	background: var(--laborshare_color_blue_dark);
	color: #fff;
}

/* Administration dashboard */

.laborshare_administration_table_detail {
	margin-top: 2px;
	color: var(--laborshare_color_muted);
	font-size: 11.5px;
}

.laborshare_google_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.laborshare_google_button_small {
	min-height: 32px;
	padding: 0 11px;
	font-size: 12px;
}

/* Homeowner dashboard */

.laborshare_status,
.laborshare_pill,
.laborshare_count_tag {
	min-height: 24px;
	padding: 3px 8px;
	border: 0;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
}

.laborshare_status.is_draft,
.laborshare_status.is_closed,
.laborshare_pill,
.laborshare_count_tag {
	background: var(--laborshare_color_hover);
	color: var(--laborshare_color_text);
}

.laborshare_status.is_submitted,
.laborshare_status.is_ready,
.laborshare_status.is_assessed {
	border: 0;
	background: var(--laborshare_color_blue_soft);
	color: var(--laborshare_color_blue_dark);
}

.laborshare_status.is_approved {
	border: 0;
	background: var(--laborshare_color_green_soft);
	color: var(--laborshare_color_green);
}

.laborshare_status.is_attention {
	background: var(--laborshare_color_amber_soft);
	color: var(--laborshare_color_amber);
}

/* Carry the clean language through existing admin/homeowner pages. */
.laborshare_arc_workspace,
.laborshare_original_submission {
	border-color: var(--laborshare_color_border);
	border-radius: var(--laborshare_color_radius);
	box-shadow: none;
}

.laborshare_administration_metric {
	min-height: 120px;
	border-color: var(--laborshare_color_border);
	border-radius: var(--laborshare_color_radius);
	box-shadow: none;
}

.laborshare_administration_metric::before {
	width: 3px;
	background: var(--laborshare_color_blue);
}

.laborshare_administration_metric:hover,
.laborshare_administration_metric:focus-visible {
	border-color: var(--laborshare_color_border);
	box-shadow: 0 1px 3px rgba(60, 64, 67, 0.18);
	transform: none;
}

@media (max-width: 1100px) {
	

	.laborshare_work_queue_panel {
		max-width: none;
	}

	
}

@media (max-width: 760px) {
	.laborshare_administration_content,
	.laborshare_homeowner_content {
		padding: 22px 18px 40px;
	}

	

	.laborshare_google_search_field {
		grid-column: 1 / -1;
	}

	

	.laborshare_section_title_row {
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
	}

	.laborshare_dashboard_page_header {
		align-items: flex-start;
		flex-direction: column;
	}

	.laborshare_current_application_grid,
	.laborshare_history_row {
		grid-template-columns: 1fr;
	}

	.laborshare_history_action,
	.laborshare_history_button_row,
	.laborshare_history_status_row {
		align-items: flex-start;
		justify-content: flex-start;
		text-align: left;
	}

	.laborshare_stage_progress {
		grid-template-columns: 1fr;
	}

	.laborshare_stage_progress li {
		border-right: 0;
		border-bottom: 1px solid var(--laborshare_color_line);
	}

	.laborshare_stage_progress li:last-child {
		border-bottom: 0;
	}
}

/* Public authentication screens */
.laborshare_public_body {
	margin: 0;
	background: #fff;
	color: var(--laborshare_color_text);
	font-family: var(--laborshare_font);
	-webkit-font-smoothing: antialiased;
}

.laborshare_public_body .laborshare_public_main {
	min-height: 100vh;
	background: #fff;
}

.laborshare_auth_shell {
	display: flex;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	padding: 36px 24px;
	background: #fff;
}

.laborshare_auth_panel {
	width: 100%;
	max-width: 460px;
	background: #fff;
}

.laborshare_auth_header {
	display: flex;
	min-height: 48px;
	align-items: center;
	gap: 12px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--laborshare_color_border);
}

.laborshare_auth_brand {
	color: var(--laborshare_color_text);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.5px;
	text-decoration: none;
}

.laborshare_auth_brand:hover {
	color: var(--laborshare_color_text);
}

.laborshare_auth_area {
	padding-left: 12px;
	border-left: 1px solid var(--laborshare_color_border);
	color: var(--laborshare_color_muted);
	font-size: 13px;
	font-weight: 400;
}

.laborshare_auth_content {
	padding: 34px 0 0;
}

.laborshare_auth_content h1 {
	margin: 0;
	color: var(--laborshare_color_text);
	font-size: 28px;
	font-weight: 500;
	letter-spacing: -0.6px;
	line-height: 1.2;
}

.laborshare_auth_intro {
	margin: 8px 0 26px;
	color: var(--laborshare_color_muted);
	font-size: 14px;
	line-height: 1.55;
}

.laborshare_auth_field {
	margin: 0 0 18px;
}

.laborshare_auth_field label {
	display: block;
	margin: 0 0 7px;
	color: var(--laborshare_color_muted);
	font-size: 12px;
	font-weight: 600;
}

.laborshare_auth_input_wrap {
	position: relative;
}

.laborshare_auth_input_wrap > i {
	position: absolute;
	top: 50%;
	left: 14px;
	z-index: 1;
	color: var(--laborshare_color_muted);
	font-size: 14px;
	transform: translateY(-50%);
	pointer-events: none;
}

.laborshare_auth_input {
	display: block;
	width: 100%;
	height: 46px;
	padding: 0 14px 0 42px;
	border: 1px solid var(--laborshare_color_border);
	border-radius: 4px;
	outline: none;
	background: #fff;
	color: var(--laborshare_color_text);
	box-shadow: none;
	font: inherit;
	font-size: 14px;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.laborshare_auth_input:hover {
	border-color: #bdc1c6;
}

.laborshare_auth_input:focus {
	border-color: var(--laborshare_color_blue);
	box-shadow: inset 0 0 0 1px var(--laborshare_color_blue);
}

.laborshare_auth_primary_button {
	display: inline-flex;
	width: 100%;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
	padding: 9px 18px;
	border: 1px solid var(--laborshare_color_blue);
	border-radius: 4px;
	background: var(--laborshare_color_blue);
	color: #fff;
	box-shadow: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.laborshare_auth_primary_button:hover,
.laborshare_auth_primary_button:focus {
	border-color: var(--laborshare_color_blue_dark);
	background: var(--laborshare_color_blue_dark);
	color: #fff;
}

.laborshare_auth_primary_button:focus-visible {
	outline: 3px solid rgba(26, 115, 232, 0.2);
	outline-offset: 2px;
}

.laborshare_auth_button_link {
	text-decoration: none;
}

.laborshare_auth_note {
	margin: 22px 0 0;
	color: var(--laborshare_color_faint);
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}

.laborshare_auth_note i {
	margin-right: 5px;
	color: var(--laborshare_color_muted);
}

.laborshare_logout_content {
	text-align: left;
}

.laborshare_auth_success_icon {
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	margin: 0 0 20px;
	border-radius: 50%;
	background: var(--laborshare_color_green_soft);
	color: var(--laborshare_color_green);
	font-size: 16px;
}

/* Normalize the shared status component on the public auth pages. */
.laborshare_public_body .notification {
	margin: 0 0 20px;
	padding: 12px 14px;
	border: 1px solid var(--laborshare_color_border);
	border-radius: 4px;
	box-shadow: none;
	font-size: 13px;
}

.laborshare_public_body .notification.is-danger,
.laborshare_public_body .notification.is-warning {
	border-color: #f4c7c3;
	background: var(--laborshare_color_red_soft);
	color: #8c1d18;
}

.laborshare_public_body .notification.is-success {
	border-color: #ceead6;
	background: var(--laborshare_color_green_soft);
	color: var(--laborshare_color_green);
}

@media (max-width: 540px) {
	.laborshare_auth_shell {
		align-items: flex-start;
		padding: 28px 20px;
	}

	.laborshare_auth_header {
		padding-bottom: 16px;
	}

	.laborshare_auth_content {
		padding-top: 28px;
	}

	.laborshare_auth_content h1 {
		font-size: 26px;
	}

	.laborshare_auth_area {
		font-size: 12px;
	}
}

/* Administration application review - clean UI treatment only.
	 Workflow, content, control order, and behavior remain unchanged. */

.laborshare_google_review_page .laborshare_back_link {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	gap: 8px;
	padding: 0 10px;
	border-radius: 4px;
	color: var(--laborshare_color_blue);
	font-size: 13px;
	font-weight: 500;
}

.laborshare_google_review_page .laborshare_back_link:hover {
	background: var(--laborshare_color_blue_soft);
	color: var(--laborshare_color_blue_dark);
}

.laborshare_google_review_page .laborshare_screen_status,
.laborshare_google_review_page .notification {
	border-radius: 4px !important;
	box-shadow: none !important;
}

/* Mobile shell alignment and touch-target refinements - 2026-09-02 */

@media (max-width: 768px) {
	.laborshare_administration_version {
		display: none;
	}

	.laborshare_administration_header,
	.laborshare_homeowner_header {
		height: 64px;
		min-height: 64px;
	}

	.laborshare_administration_sidebar {
		top: 64px;
		height: calc(100vh - 64px);
	}

	.laborshare_administration_overlay {
		inset: 64px 0 0;
	}

	.laborshare_menu_button,
	.laborshare_logout_link {
		width: 44px;
		min-width: 44px;
		height: 44px;
		min-height: 44px;
	}

	.laborshare_homeowner_link,
.laborshare_administration_navigation a,
.laborshare_administration_navigation span,
.laborshare_administration_sidebar_footer a,
.laborshare_homeowner_navigation a,
.laborshare_homeowner_navigation > span,
.laborshare_homeowner_sidebar_footer a {
		min-height: 44px;
	}

	.laborshare_administration_body .button,
	.laborshare_administration_body button,
	.laborshare_administration_body input[type="submit"],
	.laborshare_administration_body input[type="button"],
	.laborshare_homeowner_body .button,
	.laborshare_homeowner_body button,
	.laborshare_homeowner_body input[type="submit"],
	.laborshare_homeowner_body input[type="button"] {
		min-height: 44px;
	}
}

/* Homeowner mobile viewport containment - 2026-09-02
	 Prevent any legacy child from widening the document and causing mobile browsers
	 to scale the complete homeowner UI down to fit. */

@media (max-width: 768px) {

	.laborshare_history_row {
		overflow-wrap: anywhere;
	}
}

/* Homeowner mobile full-width content correction - 2026-09-02
	 The homeowner header was spanning the viewport while main dashboard content
	 could retain a shrink-to-fit/grid-item width. Force the mobile main area and
	 its dashboard sections to stretch to the viewport. */

/* Homeowner application workflow - clean UI treatment only.
	 Keep the existing workflow and control order; normalize the legacy Bulma presentation. */

.laborshare_homeowner_body .laborshare_back_link {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	gap: 7px;
	margin: 0 0 8px;
	padding: 0 8px;
	border-radius: 4px;
	color: var(--laborshare_color_blue);
	font-size: 13px;
	font-weight: 500;
}

.laborshare_homeowner_body .laborshare_back_link:hover {
	background: var(--laborshare_color_blue_soft);
	color: var(--laborshare_color_blue_dark);
}

/* Preserve the homeowner workflow layouts. Generic Bulma boxes remain padded;
	 only structured LaborShare form cards use full-bleed headers/bodies. */

.laborshare_homeowner_body .laborshare_application_form_card > .laborshare_dashboard_card_header {
	margin: 0 !important;
	padding: 16px 18px;
	border-bottom: 1px solid var(--laborshare_color_border);
	background: #fff;
}

/* Let Bulma's existing workflow columns keep their intended proportions while
	 allowing long controls/text to shrink inside those columns. */

/* Administration application workflow tabs/pages.
	 All application tabs now share the same UI treatment as the review workspace. */

/* Property administration - same clean system without changing the property workflow. */
.laborshare_administration_body .laborshare_property_form_panel {
	max-width: 1180px;
	border-radius: 8px;
}

.laborshare_administration_body .laborshare_read_only_value {
	min-height: 42px;
	padding: 8px 10px;
	border-color: var(--laborshare_color_border);
	border-radius: 4px;
	background: var(--laborshare_color_surface_subtle);
	color: var(--laborshare_color_text);
	font-weight: 500;
}

.laborshare_administration_body .laborshare_property_identifier {
	padding: 5px 9px;
	border: 1px solid var(--laborshare_color_border);
	border-radius: 4px;
	background: var(--laborshare_color_surface_subtle);
	color: var(--laborshare_color_muted);
	font-size: 11px;
	font-weight: 600;
}

.laborshare_administration_body .laborshare_count_tag {
	border: 1px solid var(--laborshare_color_border);
	border-radius: 4px;
	background: var(--laborshare_color_surface_subtle);
	color: var(--laborshare_color_muted);
	font-weight: 600;
}

@media (max-width: 760px) {

	.laborshare_homeowner_body .laborshare_application_wizard li,
	.laborshare_homeowner_body .laborshare_application_wizard li.is_complete,
	.laborshare_homeowner_body .laborshare_application_wizard li.is_current {
		display: none;
		border-right: 0;
	}

	.laborshare_homeowner_body .laborshare_application_wizard li.is_current {
		display: flex;
	}

	.laborshare_homeowner_body .columns {
		margin-left: 0;
		margin-right: 0;
	}

	.laborshare_homeowner_body .columns > .column {
		padding-left: 0;
		padding-right: 0;
	}

	.laborshare_administration_body .laborshare_property_identifier_group {
		justify-content: flex-start;
	}
}

/* Start Application keeps the same 60/40 information layout without relying on
	 Bulma width utilities that can produce horizontal overflow inside the app shell. */

/* Shared status / validation messages - flat Google-style message bars. */

.laborshare_status_message,
.laborshare_screen_status {
	--laborshare_status_accent: var(--laborshare_color_blue);
	--laborshare_status_background: #e8f0fe;
	position: relative;
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) 36px;
	gap: 12px;
	align-items: start;
	width: 100%;
	min-width: 0;
	padding: 14px 10px 14px 16px;
	border: 0;
	border-radius: 0;
	background: var(--laborshare_status_background);
	color: var(--laborshare_color_text);
	box-shadow: none;
}

.laborshare_status_message[hidden],
.laborshare_screen_status[hidden] {
	display: none !important;
}

.laborshare_status_message_icon,
.laborshare_screen_status_icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	color: var(--laborshare_status_accent);
	font-size: 18px;
	line-height: 1;
}

.laborshare_status_message_icon::before,
.laborshare_screen_status_icon::before {
	display: none;
}

.laborshare_status_message_icon i,
.laborshare_screen_status_icon i {
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	color: var(--laborshare_status_accent) !important;
	font-size: inherit;
	box-shadow: none;
}

.laborshare_status_message_content,
.laborshare_screen_status_content {
	min-width: 0;
	color: var(--laborshare_color_text);
	font-size: 14px;
	line-height: 1.4;
}

.laborshare_status_message_title,
.laborshare_screen_status_content > strong {
	display: block;
	margin: 0 0 2px;
	color: var(--laborshare_color_text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.laborshare_status_message_text,
.laborshare_screen_status_content > div {
	color: var(--laborshare_color_muted);
}

.laborshare_status_message_text i,
.laborshare_screen_status_content time {
	display: block;
	margin-top: 3px;
	color: var(--laborshare_color_faint);
	font-size: 11px;
	font-style: normal;
	line-height: 1.3;
}

.laborshare_status_message_close,
.laborshare_screen_status_close {
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	margin: -7px -4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--laborshare_color_muted);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}

.laborshare_status_message_close:hover,
.laborshare_status_message_close:focus-visible,
.laborshare_screen_status_close:hover,
.laborshare_screen_status_close:focus-visible {
	background: rgba(60, 64, 67, 0.08);
	color: var(--laborshare_color_text);
	outline: none;
}

.laborshare_status_message.is_error .laborshare_status_message_icon i,
.laborshare_screen_status.is_error .laborshare_screen_status_icon i {
	font-size: 19px;
	color: #c5221f !important;
}

.laborshare_status_message.is_success,
.laborshare_screen_status.is_success {
	--laborshare_status_accent: #137333;
	--laborshare_status_background: #e6f4ea;
}

.laborshare_status_message.is_error,
.laborshare_screen_status.is_error {
	--laborshare_status_accent: #c5221f;
	--laborshare_status_background: #fce8e6;
}

.laborshare_status_message.is_warning,
.laborshare_screen_status.is_warning {
	--laborshare_status_accent: #b06000;
	--laborshare_status_background: #fef7e0;
}

.laborshare_status_message.is_information,
.laborshare_screen_status.is_information {
	--laborshare_status_accent: #1a73e8;
	--laborshare_status_background: #e8f0fe;
}

.laborshare_screen_status {
	margin: 0 0 18px;
}

.laborshare_screen_status_content .laborshare_google_button {
	margin-top: 8px;
}

@media (max-width: 700px) {
	.laborshare_homeowner_body .box {
		padding: 18px;
	}

	.laborshare_status_message,
	.laborshare_screen_status {
		grid-template-columns: 20px minmax(0, 1fr) 36px;
		gap: 10px;
		padding: 12px 8px 12px 14px;
	}

	.laborshare_status_message_icon,
	.laborshare_screen_status_icon {
		width: 20px;
		height: 20px;
		font-size: 17px;
	}
}

/* Status icon reset: neutralize legacy circular icon wrappers from laborshare.css. */
.laborshare_screen_status .laborshare_screen_status_icon,
.laborshare_screen_status.is_success .laborshare_screen_status_icon,
.laborshare_screen_status.is_error .laborshare_screen_status_icon,
.laborshare_screen_status.is_warning .laborshare_screen_status_icon,
.laborshare_screen_status.is_information .laborshare_screen_status_icon {
	width: 22px;
	height: 22px;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--laborshare_status_accent) !important;
	box-shadow: none !important;
}

.laborshare_screen_status.is_error .laborshare_screen_status_icon i {
	color: #c5221f !important;
	font-size: 18px;
}

/* Activity filters and badges - Material-style chips. */

/* --- Existing component rules: laborshare_pay.css --- */
/* LaborShare pay screens: navigation state for the LaborShare sections and the time sheet grid. */
/* v2: numbers right align. bulma's "table td:not([align])" (0,1,2) outranks a bare class, so number rules lead with "table". */

/* period picker and filters */
.laborshare_toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 16px;
}

.laborshare_toolbar .field {
	margin-bottom: 0;
}

.laborshare_period_name {
	font-weight: 600;
	padding: 0 4px;
	white-space: nowrap;
}

/* time sheet header */
.laborshare_time_sheet_header {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px 16px;
	margin-bottom: 16px;
}

.laborshare_time_sheet_header .field {
	margin-bottom: 0;
}

.laborshare_status_tag {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	background: var(--laborshare_color_hover);
	color: var(--laborshare_color_muted);
	white-space: nowrap;
}

.laborshare_status_tag.is_posted {
	background: var(--laborshare_color_green_soft);
	color: var(--laborshare_color_green);
}

.laborshare_status_tag.is_changed {
	background: var(--laborshare_color_amber_soft);
	color: var(--laborshare_color_amber);
}

/* time sheet grid */
.laborshare_time_sheet_grid_wrap {
	overflow-x: auto;
	border: 1px solid var(--laborshare_color_border);
	border-radius: var(--laborshare_color_radius);
	margin-bottom: 16px;
}

.laborshare_time_sheet_grid {
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
}

table.laborshare_time_sheet_grid th,
table.laborshare_time_sheet_grid td {
	border-bottom: 1px solid var(--laborshare_color_line);
	padding: 6px 8px;
	text-align: right;
	vertical-align: top;
	white-space: nowrap;
}

.laborshare_time_sheet_grid th:first-child,
.laborshare_time_sheet_grid td:first-child {
	text-align: left;
	position: sticky;
	left: 0;
	background: var(--laborshare_color_surface);
	min-width: 190px;
}

.laborshare_time_sheet_grid thead th {
	background: var(--laborshare_color_surface_subtle);
	font-weight: 600;
	color: var(--laborshare_color_muted);
}

.laborshare_time_sheet_grid thead th:first-child {
	background: var(--laborshare_color_surface_subtle);
}

/* weekend days: the whole column is lightly shaded yellow, header through totals */
table.laborshare_time_sheet_grid td.laborshare_day_weekend,
table.laborshare_time_sheet_grid tr.laborshare_gross_pay_row td.laborshare_day_weekend {
	background: #fffae6;
}

table.laborshare_time_sheet_grid thead th.laborshare_day_weekend,
table.laborshare_time_sheet_grid tr.laborshare_total_row td.laborshare_day_weekend {
	background: #fdf2c9;
}

.laborshare_time_sheet_grid tr.laborshare_gross_pay_row td {
	background: var(--laborshare_color_blue_soft);
}

.laborshare_time_sheet_grid tr.laborshare_total_row td {
	font-weight: 600;
	background: var(--laborshare_color_surface_subtle);
}

.laborshare_time_sheet_grid input.input {
	width: 84px;
	text-align: right;
	padding: 2px 6px;
	height: 30px;
}

.laborshare_time_sheet_grid input.laborshare_hour_input {
	width: 64px;
}

.laborshare_row_action {
	margin-left: 6px;
	color: var(--laborshare_color_muted);
}

.laborshare_row_action:hover {
	color: var(--laborshare_color_red);
}

.laborshare_add_resource {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 16px;
}

table th.laborshare_number,
table td.laborshare_number,
.laborshare_number {
	text-align: right;
	white-space: nowrap;
}

/* every number box right aligns: time sheet, labor percentage, multiplier, pay rate, ratio factor, lookup numbers */
.input[inputmode="decimal"],
.input[inputmode="numeric"] {
	text-align: right;
}

/* payroll */
.laborshare_payroll_table th,
.laborshare_payroll_table td {
	white-space: nowrap;
}

.laborshare_payroll_table td.laborshare_number,
.laborshare_payroll_table th.laborshare_number {
	text-align: right;
}

.laborshare_payroll_table tfoot td {
	font-weight: 600;
	border-top: 2px solid var(--laborshare_color_border);
}

/* lookup editor */
.laborshare_lookup_grid input.input {
	width: 110px;
	text-align: left;
}

.laborshare_lookup_grid input.input.laborshare_lookup_wide {
	width: 200px;
}

table.laborshare_lookup_grid th,
table.laborshare_lookup_grid td {
	text-align: left;
}

/* quickbooks payroll report */
table.laborshare_quickbooks_table tr.laborshare_quickbooks_subtotal td {
	font-weight: 600;
	background: var(--laborshare_color_surface_subtle);
	border-bottom: 2px solid var(--laborshare_color_border);
}

.laborshare_report_heading {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 12px;
}

/* dashboard: crews list beside the payroll card */
.laborshare_dashboard_layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 16px;
	align-items: start;
}

@media (max-width: 1100px) {
	.laborshare_dashboard_layout {
		grid-template-columns: 1fr;
	}
}

.laborshare_dashboard_payroll h2 {
	font-size: 16px;
	font-weight: 600;
	margin: 2px 0 12px;
}

.laborshare_dashboard_payroll_total {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--laborshare_color_text);
}

.laborshare_dashboard_payroll_detail {
	color: var(--laborshare_color_muted);
	margin: 4px 0 14px;
}

.laborshare_dashboard_payroll_action {
	display: grid;
	gap: 8px;
}

/* default crew check boxes on the resource group pages */
.laborshare_member_list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 6px 16px;
}

.laborshare_member_list label {
	margin-left: 6px;
}

/* dashboard payroll card spacing and crew finder */
.laborshare_card.laborshare_dashboard_payroll {
	padding: 20px 22px 22px;
}

.laborshare_dashboard_payroll_total {
	margin-top: 4px;
}

.laborshare_dashboard_payroll_detail {
	margin: 6px 0 18px;
}

.laborshare_dashboard_payroll .notification {
	margin: 0 0 16px;
	padding: 10px 12px;
}

.laborshare_dashboard_payroll_action {
	gap: 10px;
}

/* keep the payroll card inside its grid column */
.laborshare_dashboard_layout > * {
	min-width: 0;
	box-sizing: border-box;
}

/* 2026-09-25 time-entry cleanup */
.laborshare_time_sheet_header {
	grid-template-columns: minmax(220px, 1fr) auto auto 130px;
	align-items: end;
}

.laborshare_time_sheet_division {
	min-width: 220px;
}

.laborshare_time_sheet_numeric_setting {
	text-align: right;
}

.laborshare_time_sheet_small_input,
.laborshare_time_sheet_small_input.input,
.laborshare_time_sheet_numeric_setting .input {
	width: 105px;
	max-width: 105px;
	margin-left: auto;
}

.laborshare_labor_available {
	text-align: right;
	width: 130px;
	justify-self: end;
}

.laborshare_labor_available strong {
	display: block;
	font-size: 18px;
	line-height: 30px;
}

.laborshare_labor_available .help {
	white-space: normal;
}

.laborshare_total_column {
	width: 130px;
	min-width: 110px;
}

.laborshare_row_action_first {
	margin-left: 0;
	margin-right: 7px;
}

.laborshare_add_resource .field {
	margin-bottom: 0;
}

.laborshare_resource_search {
	width: 320px;
	max-width: 70vw;
}

.laborshare_time_sheet_quick_search {
	max-width: 560px;
	margin-top: 4px;
}

.laborshare_period_toolbar {
	margin-bottom: 18px;
}

@media (max-width: 900px) {
	.laborshare_time_sheet_header {
		grid-template-columns: 1fr 1fr;
	}

	.laborshare_time_sheet_numeric_setting,
	.laborshare_labor_available {
		text-align: left;
		justify-self: start;
	}

	.laborshare_time_sheet_small_input,
	.laborshare_time_sheet_small_input.input,
	.laborshare_time_sheet_numeric_setting .input {
		margin-left: 0;
	}
}

/* Division stays compact; remaining sheet settings stay aligned to the right. */
.laborshare_time_sheet_header {
  grid-template-columns: max-content 1fr auto 130px;
}
.laborshare_time_sheet_division { min-width: 0; width: max-content; max-width: 100%; }
.laborshare_time_sheet_division .select,
.laborshare_time_sheet_division select { width: auto; max-width: 100%; }
.laborshare_time_sheet_numeric_setting { justify-self: end; }
@media (max-width: 900px) {
  .laborshare_time_sheet_header { grid-template-columns: 1fr 1fr; }
  .laborshare_time_sheet_numeric_setting { justify-self: start; }
}

/* division picker + Start / Add button (time sheet dashboard and sheet) */
.laborshare_division_start {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.laborshare_division_start .select {
	margin: 0;
}

.laborshare_division_tab_label {
	font-size: 12px;
	font-weight: 500;
	color: var(--laborshare_color_muted);
	white-space: nowrap;
}

/* time sheet: crew's division sheets this week */
.laborshare_time_sheet_title_division {
	color: var(--laborshare_color_muted);
	font-weight: 400;
}

.laborshare_division_tab_bar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.laborshare_division_tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: 1px solid var(--laborshare_color_border);
	border-radius: 16px;
	color: var(--laborshare_color_text);
	background: #ffffff;
	font-size: 14px;
	white-space: nowrap;
}

a.laborshare_division_tab:hover,
a.laborshare_division_tab:focus-visible {
	background: var(--laborshare_color_hover);
	color: var(--laborshare_color_text);
}

.laborshare_division_tab.is_current {
	border-color: var(--laborshare_color_blue);
	background: var(--laborshare_color_blue_soft);
	color: var(--laborshare_color_blue_dark);
	font-weight: 500;
}

.laborshare_division_tab_hour {
	font-size: 12px;
	color: var(--laborshare_color_muted);
}

.laborshare_division_tab_add {
	margin-left: auto;
}

@media (max-width: 900px) {
	.laborshare_division_tab_add {
		margin-left: 0;
	}
}

/* time sheet dashboard: one row per crew */
.laborshare_crew_progress {
	margin-bottom: 12px;
	color: var(--laborshare_color_muted);
}

.laborshare_crew_progress strong {
	color: var(--laborshare_color_text);
	font-size: 18px;
}

.laborshare_crew_week_table td {
	vertical-align: middle;
}

.laborshare_division_tab_bar__list {
	margin-bottom: 0;
	gap: 6px;
}

.laborshare_division_tab.is_saved .fa-check {
	color: var(--laborshare_color_green);
}

.laborshare_division_tab.is_changed {
	border-color: var(--laborshare_color_amber);
}

.laborshare_division_tab.is_changed .fa-circle-exclamation {
	color: var(--laborshare_color_amber);
}

/* time sheet: crew pay panel under the grid */
.laborshare_sheet_pay {
	margin-top: 16px;
}

.laborshare_sheet_pay > summary {
	cursor: pointer;
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.laborshare_sheet_pay_title {
	font-size: 16px;
	font-weight: 500;
}

.laborshare_sheet_pay_pool {
	margin: 12px 0;
}

/* time sheet dashboard: start control in the "Time sheets this week" column; chip status in words */
.laborshare_crew_start {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.laborshare_crew_start_label {
	color: var(--laborshare_color_muted);
	font-size: 14px;
}

.laborshare_division_tab_name {
	font-weight: 500;
}

.laborshare_division_tab_state {
	font-size: 12px;
	color: var(--laborshare_color_muted);
	white-space: nowrap;
}

.laborshare_division_tab.is_saved .laborshare_division_tab_state {
	color: var(--laborshare_color_green);
}

.laborshare_division_tab.is_changed .laborshare_division_tab_state {
	color: var(--laborshare_color_amber);
	font-weight: 500;
}

a.laborshare_division_tab {
	text-decoration: none;
}

a.laborshare_division_tab:hover .laborshare_division_tab_name {
	text-decoration: underline;
}

/* payroll list paging */
.laborshare_pager {
	justify-content: space-between;
	margin-top: 12px;
}

/* dashboard: crews with no hours last week */

/* dashboard step cards (time entered, payroll): the panel has no padding of its own */
.laborshare_card.laborshare_dashboard_step {
	padding: 20px 22px 22px;
}

.laborshare_dashboard_step h2 {
	font-size: 16px;
	font-weight: 600;
	margin: 2px 0 12px;
}

.laborshare_dashboard_step .notification {
	margin: 0 0 16px;
	padding: 10px 12px;
}

.laborshare_dashboard_step .laborshare_crew_progress {
	margin: 0 0 12px;
}

.laborshare_dashboard_step p.laborshare_dashboard_this_week {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--laborshare_color_line);
	font-size: 14px;
}

/* space between the step cards and the panels below them */
.laborshare_dashboard_layout {
	margin-bottom: 16px;
}

/* dashboard: clickable crew links, compact enough for a full weekly roster */
.laborshare_dashboard_missing {
	margin-bottom: 10px;
}

.laborshare_crew_chip_list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 4px;
}

a.laborshare_crew_chip {
	display: inline-block;
	padding: 2px 9px;
	border: 1px solid var(--laborshare_color_border);
	border-radius: 12px;
	background: var(--laborshare_color_hover);
	color: var(--laborshare_color_blue_dark);
	font-size: 13px;
	line-height: 1.45;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 2px;
}

a.laborshare_crew_chip:hover,
a.laborshare_crew_chip:focus-visible {
	border-color: var(--laborshare_color_blue);
	background: var(--laborshare_color_blue_soft);
	color: var(--laborshare_color_blue_dark);
}

/* Dashboard exception banner: preview is dismissible and separate from normal Step 1 progress. */
.laborshare_dashboard_payroll_column {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.laborshare_dashboard_alert {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 10px 12px;
	background: #fff8e6;
	border: 1px solid #e0bf71;
	color: #594113;
	font-size: 13px;
	line-height: 1.4;
}

.laborshare_dashboard_alert_icon {
	flex: 0 0 auto;
	margin-top: 2px;
}

.laborshare_dashboard_alert_body {
	flex: 1 1 auto;
	min-width: 0;
}

.laborshare_dashboard_alert_close {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	padding: 2px 4px;
	line-height: 1;
}

.laborshare_dashboard_alert_close:hover,
.laborshare_dashboard_alert_close:focus-visible {
	background: #f8eac7;
}

/* Timesheet dirty-state visibility: migrated from page CSS. */
#laborshare_unsaved[hidden] { display: none !important; }

/* System management direct_sql: migrated from page CSS, selectors preserved. */

/* System management release_note: migrated from page CSS, selectors preserved. */
.laborshare_release_block { border-top: 1px solid #d5dbe1; padding: 1rem 0 0.5rem 0; }
		.laborshare_release_block:first-child { border-top: 0; padding-top: 0; }
		.laborshare_release_head { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; margin-bottom: 0.25rem; }
		.laborshare_release_head h3 { margin: 0; }
		.laborshare_release_meta { color: #5b6b7c; font-size: 0.85rem; }
		.laborshare_release_note { margin: 0.75rem 0 0.75rem 0; }
		.laborshare_release_note h4 { font-weight: 600; margin: 0 0 0.2rem 0; }
		.laborshare_release_label { color: #5b6b7c; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.4rem; }
		.laborshare_release_text { white-space: pre-line; }
		.laborshare_release_script { color: #44505c; font-size: 0.85rem; margin-top: 0.5rem; }

/* Reusable small data / utility patterns migrated from page markup. */
.laborshare_short_input { max-width: 240px; }
.laborshare_align_end { align-self: flex-end; }
.laborshare_preserved_small_text { white-space: pre-line; font-size: 12px; }
.laborshare_wrapped_pre { white-space: pre-wrap; word-break: break-word; }
.laborshare_email_safety { border-radius: 0; background: #f2f4f6; border-left: 5px solid #64748b; }

/* Keep the native hidden state authoritative for shared filters and dismiss controls. */
[hidden] { display: none !important; }

/* Report totals are markup-level presentation, not HTML emitted by code-behind. */
.laborshare_payroll_table tr.laborshare_report_total td {
  font-weight: 700;
  border-top: 2px solid currentColor;
}

/* Shared wide, calculation-transparent payroll table; preserve all detail on scroll. */
.laborshare_pay_detail_table { min-width: 1550px; }
.laborshare_pay_detail_table th { white-space: nowrap; }
.laborshare_pay_detail_table td { white-space: nowrap; }

/* Sheet-pay disclosure spacing uses the common card body below. */
.laborshare_sheet_pay > summary { padding: var(--laborshare_space_4) var(--laborshare_card_inset); }
.laborshare_sheet_pay > summary + .laborshare_card_body { padding-top: 0; }

/* Standard component tokens imported from the proven EasyARC vocabulary. */
:root {
  /* One general look, shared with Vericol (vericol_ui.css section 0): same palette, font and elevation. Tokens are
     named by role. Pages never use literal colors; components use these. */
  --laborshare_color_text: var(--laborshare_text, #1b2330);
  --laborshare_color_text_body: #3a4456;
  --laborshare_color_muted: var(--laborshare_text_muted, #5b6576);
  --laborshare_color_faint: #8a94a6;
  --laborshare_color_text_inverse: #ffffff;
  --laborshare_color_header: #172a4a;
  --laborshare_color_header_line: rgba(255, 255, 255, 0.25);
  --laborshare_color_header_hover: rgba(255, 255, 255, 0.12);
  --laborshare_color_page: #f6f7fa;
  --laborshare_color_border: #dce1ea;
  --laborshare_color_border_strong: #c4cbd8;
  --laborshare_color_line: #eef1f6;
  --laborshare_color_surface: var(--laborshare_surface, #fff);
  --laborshare_color_surface_subtle: #fafbfd;
  --laborshare_color_surface_sunken: #eef1f6;
  --laborshare_color_hover: #eef1f6;
  --laborshare_color_backdrop: rgba(23, 42, 74, 0.45);
  --laborshare_color_accent: var(--laborshare_primary, #1f5edb);
  --laborshare_color_accent_dark: var(--laborshare_primary_hover, #163f94);
  --laborshare_color_accent_soft: #e9eef8;
  --laborshare_color_success: #15803d;
  --laborshare_color_success_soft: #dcfce7;
  --laborshare_color_warning: #c2410c;
  --laborshare_color_warning_soft: #fff4e5;
  --laborshare_color_danger: #b42318;
  --laborshare_color_danger_strong: #7f1d1d;
  --laborshare_color_danger_soft: #fdecea;
  --laborshare_color_danger_border_soft: #f7caca;
  --laborshare_shadow_card: var(--laborshare_shadow);
  --laborshare_shadow_bar: 0 -4px 12px rgba(16, 24, 40, 0.06);
  --laborshare_shadow_overlay: 0 24px 48px rgba(16, 24, 40, 0.24);
  --laborshare_space_1: 4px;
  --laborshare_space_2: 8px;
  --laborshare_space_3: 12px;
  --laborshare_space_4: 16px;
  --laborshare_space_5: 24px;
  --laborshare_space_6: 32px;
  --laborshare_card_inset: 18px;
  --laborshare_color_blue: var(--laborshare_color_accent);
  --laborshare_color_blue_dark: var(--laborshare_color_accent_dark);
  --laborshare_color_blue_soft: var(--laborshare_color_accent_soft);
  --laborshare_color_green: var(--laborshare_color_success);
  --laborshare_color_green_soft: var(--laborshare_color_success_soft);
  --laborshare_color_red: var(--laborshare_color_danger);
  --laborshare_color_red_soft: var(--laborshare_color_danger_soft);
  --laborshare_color_amber: var(--laborshare_color_warning);
  --laborshare_color_amber_soft: var(--laborshare_color_warning_soft);
  --laborshare_color_sidebar: 238px;
  --laborshare_color_radius: 8px;
  --laborshare_font_small: 12px;
  --laborshare_font_body: 14px;
  --laborshare_font_title: 17px;
  --laborshare_font_control: 13px;
  --laborshare_radius_value: 2px;
  --laborshare_aside_width: 310px;
  --laborshare_sidebar_width: 238px;
  --laborshare_header_height: 64px;

  /* Bulma, pointed at the tokens above (hsl of #1f5edb) */
  --bulma-family-primary: var(--laborshare_font);
  --bulma-family-code: var(--laborshare_font_mono);
  --bulma-primary-h: 220deg;
  --bulma-primary-s: 75%;
  --bulma-primary-l: 49%;
  --bulma-link-h: 220deg;
  --bulma-link-s: 75%;
  --bulma-link-l: 49%;
  --bulma-radius: var(--laborshare_radius_value);
  --bulma-body-color: var(--laborshare_color_text_body);
  --bulma-text-strong: var(--laborshare_color_text);
}

/* ---------- EasyARC-derived reusable component standard ---------- */
/* ---------- layout ---------- */

/* Vertical stack of cards or blocks with standard spacing. */
.laborshare_stack { display: flex; flex-direction: column; gap: var(--laborshare_space_4); }
.laborshare_stack > * { margin: 0; }

/* Main column with a fixed-width side column (notes, summaries). */
.laborshare_layout_main_aside { display: grid; grid-template-columns: minmax(0, 1fr) var(--laborshare_aside_width); gap: 20px; align-items: start; }

/* Two columns. Default equal; is_narrow_wide = editor beside a larger preview. */
.laborshare_layout_split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--laborshare_space_5); align-items: start; }
.laborshare_layout_split.is_narrow_wide { grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr); }

/* A column that stays in view while the other one scrolls. */
.laborshare_layout_sticky { position: sticky; top: var(--laborshare_space_4); }

@media (max-width: 1050px) {
	.laborshare_layout_main_aside,
	.laborshare_layout_split,
	.laborshare_layout_split.is_narrow_wide,
	.laborshare_layout_split.is_wide_narrow { grid-template-columns: minmax(0, 1fr); }
	.laborshare_layout_sticky { position: static; }
}

/* ---------- card ----------
   Structure: card > [header] > [intro] > (body | list | table | empty)+ > [footer]
   Content never goes directly in .laborshare_card; it goes in one of its parts. */
/* cards lift off the page a little, as the sign-in card does (one general look, shared with Vericol) */
.laborshare_card { margin: 0 0 var(--laborshare_space_4); border: 1px solid var(--laborshare_color_border); border-radius: var(--laborshare_radius); background: var(--laborshare_color_surface); color: var(--laborshare_color_text); min-width: 0; box-shadow: var(--laborshare_shadow_card); }
.laborshare_stack > .laborshare_card { margin: 0; }

.laborshare_card_header { display: flex; align-items: center; justify-content: space-between; gap: var(--laborshare_space_3); padding: var(--laborshare_space_3) var(--laborshare_card_inset); border-bottom: 1px solid var(--laborshare_color_line); }
.laborshare_card .laborshare_card_header h2 { margin: 0; padding: 0; border: 0; color: var(--laborshare_color_text); font-size: var(--laborshare_font_title); font-weight: 500; letter-spacing: -0.2px; line-height: 1.3; }
.laborshare_card .laborshare_card_header p { margin: var(--laborshare_space_1) 0 0; color: var(--laborshare_color_muted); font-size: var(--laborshare_font_small); line-height: 1.5; }
.laborshare_card_header_actions { display: flex; flex: none; flex-wrap: wrap; gap: var(--laborshare_space_2); }

.laborshare_card .laborshare_card_intro { margin: 0; padding: var(--laborshare_space_3) var(--laborshare_card_inset); border-bottom: 1px solid var(--laborshare_color_line); color: var(--laborshare_color_muted); font-size: var(--laborshare_font_small); line-height: 1.55; }

/* Body: padded; everything inside is spaced evenly, so content needs no margins of its own. */
.laborshare_card_body { padding: var(--laborshare_space_4) var(--laborshare_card_inset); min-width: 0; font-size: var(--laborshare_font_body); line-height: 1.5; }
.laborshare_card .laborshare_card_body > * { margin-top: 0; margin-bottom: 0; }
.laborshare_card .laborshare_card_body > * + * { margin-top: var(--laborshare_space_4); }
.laborshare_card .laborshare_card_body > input[type="hidden"] + * { margin-top: 0; }
.laborshare_card_body + .laborshare_card_body,
.laborshare_card_body + .laborshare_card_list,
.laborshare_card_body + .laborshare_card_table,
.laborshare_card_body + .laborshare_card_empty { border-top: 1px solid var(--laborshare_color_line); }

/* List: full-width rows, each padded like the body. */
.laborshare_card_list { margin: 0; padding: 0; list-style: none; }
.laborshare_card_list_item { padding: var(--laborshare_space_3) var(--laborshare_card_inset); font-size: var(--laborshare_font_body); line-height: 1.5; }
.laborshare_card_list_item:not([hidden]) ~ .laborshare_card_list_item:not([hidden]) { border-top: 1px solid var(--laborshare_color_line); }

/* Table: full width; the card is the frame, so the table has no border of its own. */
.laborshare_card_table { overflow-x: auto; }
.laborshare_card .laborshare_card_table table { width: 100%; margin: 0; border: 0; }
.laborshare_card .laborshare_card_table th { background: var(--laborshare_color_surface_subtle); color: var(--laborshare_color_muted); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.laborshare_card .laborshare_card_table td { color: var(--laborshare_color_text); font-size: var(--laborshare_font_body); }
.laborshare_card .laborshare_card_table th:first-child,
.laborshare_card .laborshare_card_table td:first-child { padding-left: var(--laborshare_card_inset); }
.laborshare_card .laborshare_card_table th:last-child,
.laborshare_card .laborshare_card_table td:last-child { padding-right: var(--laborshare_card_inset); }

.laborshare_card .laborshare_card_empty { margin: 0; padding: var(--laborshare_space_4) var(--laborshare_card_inset); color: var(--laborshare_color_muted); font-size: var(--laborshare_font_body); }

.laborshare_card_footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--laborshare_space_2); padding: var(--laborshare_space_3) var(--laborshare_card_inset) var(--laborshare_space_4); border-top: 1px solid var(--laborshare_color_line); }

/* Payroll card toolbars: keep actions inside the card inset, including on narrow screens. */
.laborshare_card > .laborshare_payroll_toolbar {
    padding: var(--laborshare_space_3) var(--laborshare_card_inset);
    margin: 0;
    align-items: center;
}
.laborshare_card > .laborshare_payroll_toolbar .laborshare_period_name {
    padding: 0;
    margin: 0;
}

/* ---------- content ---------- */

/* Row of buttons or links. */
.laborshare_actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--laborshare_space_2); }
.laborshare_card .laborshare_actions .button { margin: 0; }

/* Several checkboxes or radios, one per line. */
.laborshare_choice_list { display: flex; flex-direction: column; gap: var(--laborshare_space_2); }
.laborshare_choice_list .checkbox,
.laborshare_choice_list .radio { display: flex; align-items: center; gap: var(--laborshare_space_2); margin: 0; }

/* Bulleted list in running text (Bulma removes bullets by default). */
.laborshare_card .laborshare_bullets, .laborshare_bullets { margin-left: 0; padding-left: 20px; list-style: disc; }
.laborshare_bullets > li + li { margin-top: var(--laborshare_space_1); }

/* Small muted note: Bulma p.help under a field, p.laborshare_help under any other block. One look for both. */
.laborshare_help { margin: var(--laborshare_space_1) 0 0; color: var(--laborshare_color_muted); font-size: var(--laborshare_font_small); line-height: 1.5; }

/* Small uppercase label above a block ("Letter preview"). */
.laborshare_section_label { margin: 0 0 var(--laborshare_space_2); color: var(--laborshare_color_muted); font-size: var(--laborshare_font_small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* Keep the line breaks the person typed (addresses, descriptions). */
.laborshare_text_lines { white-space: pre-line; }

/* Label / value pairs. */
.laborshare_field_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--laborshare_space_3) var(--laborshare_space_5); margin: 0; }
.laborshare_field_grid > div.is_full { grid-column: 1 / -1; }
.laborshare_field_grid dt { color: var(--laborshare_color_muted); font-size: var(--laborshare_font_small); }
.laborshare_field_grid dd { margin: 2px 0 0; color: var(--laborshare_color_text); font-size: var(--laborshare_font_body); }

/* Plain-text facts in a line, separated by dots: "Application 123 . Full . Ready for Decision". */
.laborshare_meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; color: var(--laborshare_color_muted); font-size: 13px; }
.laborshare_meta > li + li::before { content: "\00B7"; margin: 0 var(--laborshare_space_2); color: var(--laborshare_color_faint); }

/* Status label. Modifiers: is_success, is_warning, is_danger, is_info. */
.laborshare_badge { display: inline-block; padding: 1px var(--laborshare_space_2); border-radius: var(--laborshare_radius); background: var(--laborshare_color_hover); color: var(--laborshare_color_muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.laborshare_badge.is_success { background: var(--laborshare_color_success_soft); color: var(--laborshare_color_success); }
.laborshare_badge.is_warning { background: var(--laborshare_color_warning_soft); color: var(--laborshare_color_warning); }
.laborshare_badge.is_danger { background: var(--laborshare_color_danger_soft); color: var(--laborshare_color_danger); }
.laborshare_badge.is_info { background: var(--laborshare_color_accent_soft); color: var(--laborshare_color_accent); }

/* A document shown as paper (letter preview). The document's own CSS comes from the class that also
   builds its PDF, so the preview and the PDF cannot drift apart. */
.laborshare_document_preview { max-width: 816px; min-height: 1000px; margin: 0 auto; padding: 56px 68px; border: 1px solid var(--laborshare_color_border); background: var(--laborshare_color_surface); box-shadow: 0 2px 10px rgba(60, 64, 67, 0.12); }
@media (max-width: 1050px) { .laborshare_document_preview { padding: var(--laborshare_space_6) 28px; } }

/* Monospaced block for markup, SQL or other code. */
.laborshare_code { margin: 0; padding: var(--laborshare_space_3); overflow-x: auto; border: 1px solid var(--laborshare_color_line); border-radius: var(--laborshare_radius); background: var(--laborshare_color_surface_subtle); color: var(--laborshare_color_text); font-family: var(--laborshare_font_mono); font-size: var(--laborshare_font_small); line-height: 1.5; white-space: pre; tab-size: 2; }

/* ---------- page header ---------- */

/* Top of a record page: back link and actions, title, facts. */
.laborshare_page_header { display: flex; flex-direction: column; gap: var(--laborshare_space_2); margin: 0 0 var(--laborshare_space_4); }
.laborshare_page_header .laborshare_page_subtitle { margin: 0; color: var(--laborshare_color_muted); font-size: var(--laborshare_font_body); line-height: 1.5; }
.laborshare_page_header .laborshare_page_title { margin: 0; color: var(--laborshare_color_text); font-size: 26px; font-weight: 500; letter-spacing: -0.3px; line-height: 1.25; }
.laborshare_back_link { display: inline-flex; align-items: center; gap: var(--laborshare_space_2); color: var(--laborshare_color_accent); font-size: 13px; font-weight: 500; text-decoration: none; }
.laborshare_back_link:hover, .laborshare_back_link:focus-visible { text-decoration: underline; }

/* A row: main part takes the room, the rest sits at the end. Wraps on small screens. */
.laborshare_row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--laborshare_space_2) var(--laborshare_space_4); }
.laborshare_row_main { flex: 1 1 260px; min-width: 0; }
.laborshare_row_main > * { margin: 0; }
.laborshare_row_main > * + * { margin-top: 2px; }

/* Tabs between the pages of one record. Active link: is_active (and aria-current="page"). */
.laborshare_tabs { display: flex; flex-wrap: wrap; gap: 0 var(--laborshare_space_1); margin: 0 0 var(--laborshare_space_4); border-bottom: 1px solid var(--laborshare_color_border); }
.laborshare_tabs a { display: inline-flex; align-items: center; padding: var(--laborshare_space_3) var(--laborshare_space_3) 10px; border-bottom: 3px solid transparent; color: var(--laborshare_color_muted); font-size: var(--laborshare_font_body); font-weight: 500; text-decoration: none; }
.laborshare_tabs a:hover, .laborshare_tabs a:focus-visible { background: var(--laborshare_color_hover); color: var(--laborshare_color_text); }
.laborshare_tabs a.is_active { border-bottom-color: var(--laborshare_color_accent); color: var(--laborshare_color_accent); }

/* ---------- lists ---------- */

/* Toggle buttons that filter a list. Selected: is_active and aria-pressed="true". */
.laborshare_filter_bar { display: flex; flex-wrap: wrap; gap: var(--laborshare_space_2); padding: var(--laborshare_space_3) var(--laborshare_card_inset); border-bottom: 1px solid var(--laborshare_color_line); }
.laborshare_filter_bar button { padding: var(--laborshare_space_1) var(--laborshare_space_3); border: 1px solid var(--laborshare_color_border); border-radius: var(--laborshare_radius); background: var(--laborshare_color_surface); color: var(--laborshare_color_muted); cursor: pointer; font: inherit; font-size: var(--laborshare_font_small); }
.laborshare_filter_bar button:hover { background: var(--laborshare_color_hover); }
.laborshare_filter_bar button.is_active { border-color: var(--laborshare_color_accent); background: var(--laborshare_color_accent_soft); color: var(--laborshare_color_accent); }

/* Dated events, newest first: when on the left, what on the right. */
.laborshare_timeline_item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--laborshare_space_4); padding: var(--laborshare_space_3) var(--laborshare_card_inset); font-size: var(--laborshare_font_body); line-height: 1.5; }
.laborshare_timeline_item:not([hidden]) ~ .laborshare_timeline_item:not([hidden]) { border-top: 1px solid var(--laborshare_color_line); }
.laborshare_timeline_item > time { color: var(--laborshare_color_muted); font-size: var(--laborshare_font_small); }
.laborshare_timeline_item p { margin: 2px 0 0; }
@media (max-width: 700px) { .laborshare_timeline_item { grid-template-columns: minmax(0, 1fr); gap: var(--laborshare_space_1); } }

/* Small muted text inside a row or item (who, when). */
.laborshare_note_text { color: var(--laborshare_color_muted); font-size: var(--laborshare_font_small); }

/* ---------- forms ----------
   The one definition of how form controls look, on every page. Markup is plain Bulma:
     <div class="field">
       <label class="label" for="x">Label</label>
       <div class="control"><input id="x" class="input" /></div>
       <p class="help">Help text.</p>
     </div>
   Buttons: class="button laborshare_button_primary" (main action) or "button laborshare_button_secondary".
   Nothing else styles these: no page, wrapper or card may restyle a control. */
.label { margin-bottom: var(--laborshare_space_1); color: var(--laborshare_color_muted); font-size: 11px; font-weight: 600; }
.input, .textarea, .select select { border: 1px solid var(--laborshare_color_border); border-radius: var(--laborshare_radius); background: var(--laborshare_color_surface); color: var(--laborshare_color_text); box-shadow: none; font-family: inherit; font-size: var(--laborshare_font_control); }
.textarea { padding: 9px 10px; }
.input:focus, .textarea:focus, .select select:focus,
.input:focus-visible, .textarea:focus-visible, .select select:focus-visible { border-color: var(--laborshare_color_accent); box-shadow: inset 0 0 0 1px var(--laborshare_color_accent); }
.help { margin-top: var(--laborshare_space_1); color: var(--laborshare_color_muted); font-size: var(--laborshare_font_small); line-height: 1.5; }
.checkbox, .radio { color: var(--laborshare_color_text); font-size: var(--laborshare_font_body); }
.checkbox input, .radio input { margin-right: var(--laborshare_space_1); }

.button { min-height: 38px; padding: 0 14px; border: 1px solid var(--laborshare_color_border); border-radius: var(--laborshare_radius); background: var(--laborshare_color_surface); color: var(--laborshare_color_accent); box-shadow: none; font-family: inherit; font-size: 13px; font-weight: 500; text-decoration: none; }
.button:hover, .button:focus-visible { border-color: var(--laborshare_color_border); background: var(--laborshare_color_hover); color: var(--laborshare_color_accent_dark); }
.button.laborshare_button_secondary { border-color: var(--laborshare_color_border); background: var(--laborshare_color_surface); color: var(--laborshare_color_accent); }
.button.laborshare_button_primary { border-color: var(--laborshare_color_accent); background: var(--laborshare_color_accent); color: #fff; }
.button.laborshare_button_primary:hover, .button.laborshare_button_primary:focus-visible { border-color: var(--laborshare_color_accent_dark); background: var(--laborshare_color_accent_dark); color: #fff; }
/* Destructive action (delete, remove). */
.button.laborshare_button_danger { border-color: #e6c3c0; color: var(--laborshare_color_danger); }
.button.laborshare_button_danger:hover, .button.laborshare_button_danger:focus-visible { border-color: var(--laborshare_color_danger); background: var(--laborshare_color_danger_soft); color: var(--laborshare_color_danger); }
.button[disabled], .button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Invalid field: is-danger on the control and its help text. */
.input.is-danger, .textarea.is-danger, .select.is-danger select { border-color: var(--laborshare_color_danger); }
.help.is-danger { color: var(--laborshare_color_danger); }
@media (max-width: 768px) { .button { min-height: 44px; } }
/* Searchable dropdown (Tom Select): looks like the other controls. Markup: <select class="laborshare_searchable_select">. */
.ts-wrapper { width: 100%; }
.ts-wrapper .ts-control { min-height: 38px; padding: 7px 10px; border: 1px solid var(--laborshare_color_border); border-radius: var(--laborshare_radius); background: var(--laborshare_color_surface); box-shadow: none; color: var(--laborshare_color_text); font: inherit; font-size: var(--laborshare_font_control); }
.ts-wrapper.focus .ts-control { border-color: var(--laborshare_color_accent); box-shadow: inset 0 0 0 1px var(--laborshare_color_accent); }
.ts-wrapper.multi .ts-control > div.item { display: inline-flex; align-items: center; gap: var(--laborshare_space_1); margin: 2px var(--laborshare_space_1) 2px 0; padding: 2px var(--laborshare_space_1) 2px var(--laborshare_space_2); border: 1px solid var(--laborshare_color_border); border-radius: var(--laborshare_radius); background: var(--laborshare_color_accent_soft); color: var(--laborshare_color_text); font-weight: 500; }
.ts-wrapper.plugin-remove_button .ts-control > .item .remove { border-left: 1px solid var(--laborshare_color_border); color: var(--laborshare_color_muted); }
.ts-dropdown { border: 1px solid var(--laborshare_color_border); border-radius: var(--laborshare_radius); font-size: var(--laborshare_font_control); }
.ts-dropdown .active { background: var(--laborshare_color_hover); color: var(--laborshare_color_text); }

/* ---------- messages ---------- */

/* A message on the page. Modifiers: is_success, is_warning, is_danger, is_info.
   Markup: div.laborshare_notice > div.laborshare_notice_main (strong + p) + optional actions / close button. */
.laborshare_notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--laborshare_space_2) var(--laborshare_space_4); margin: 0 0 var(--laborshare_space_4); padding: var(--laborshare_space_3) var(--laborshare_space_4); border: 1px solid var(--laborshare_color_border); border-left-width: 3px; border-radius: var(--laborshare_radius); background: var(--laborshare_color_surface_subtle); color: var(--laborshare_color_text); font-size: var(--laborshare_font_body); line-height: 1.5; }
.laborshare_notice > i { flex: none; align-self: flex-start; margin-top: 3px; }
.laborshare_notice.is_success > i { color: var(--laborshare_color_success); }
.laborshare_notice.is_warning > i { color: var(--laborshare_color_warning); }
.laborshare_notice.is_danger > i { color: var(--laborshare_color_danger); }
.laborshare_notice.is_info > i { color: var(--laborshare_color_accent); }
.laborshare_notice_main { flex: 1 1 260px; min-width: 0; }
.laborshare_notice_main > * { margin: 0; }
.laborshare_notice_main > * + * { margin-top: 2px; }
.laborshare_notice_title { font-size: 15px; font-weight: 600; }
.laborshare_notice_close { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: 0.7; }
.laborshare_notice_close:hover, .laborshare_notice_close:focus-visible { background: rgba(0, 0, 0, 0.06); opacity: 1; }
.laborshare_notice.is_success { border-color: #cfe5d6; border-left-color: var(--laborshare_color_success); background: var(--laborshare_color_success_soft); }
.laborshare_notice.is_success .laborshare_notice_title { color: var(--laborshare_color_success); }
.laborshare_notice.is_warning { border-color: #f0e2b8; border-left-color: var(--laborshare_color_warning); background: var(--laborshare_color_warning_soft); }
.laborshare_notice.is_warning .laborshare_notice_title { color: var(--laborshare_color_warning); }
.laborshare_notice.is_danger { border-color: #f1cfcb; border-left-color: var(--laborshare_color_danger); background: var(--laborshare_color_danger_soft); }
.laborshare_notice.is_danger .laborshare_notice_title { color: var(--laborshare_color_danger); }
.laborshare_notice.is_info { border-color: #cfdcf3; border-left-color: var(--laborshare_color_accent); background: var(--laborshare_color_accent_soft); }
.laborshare_notice.is_info .laborshare_notice_title { color: var(--laborshare_color_accent); }
.laborshare_card_body > .laborshare_notice { margin-bottom: 0; }

/* A highlighted line inside a card ("You voted Approve on ..."). */
.laborshare_callout { padding: 10px var(--laborshare_space_3); border-left: 3px solid var(--laborshare_color_faint); background: var(--laborshare_color_surface_subtle); color: var(--laborshare_color_text); font-size: var(--laborshare_font_body); line-height: 1.5; }

/* ---------- progress and figures ---------- */

/* Steps of a process. Each li: is_done or is_current (aria-current="step"); the span draws the dot. */
.laborshare_stepper { display: flex; margin: 0; padding: 0; list-style: none; }
.laborshare_stepper li { position: relative; flex: 1; padding-top: 28px; color: var(--laborshare_color_faint); font-size: var(--laborshare_font_small); text-align: center; }
.laborshare_stepper li::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 3px; background: var(--laborshare_color_line); }
.laborshare_stepper li:first-child::before { left: 50%; }
.laborshare_stepper li:last-child::before { right: 50%; }
.laborshare_stepper li span { position: absolute; top: 3px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border: 3px solid var(--laborshare_color_line); border-radius: 50%; background: var(--laborshare_color_surface); box-sizing: border-box; }
.laborshare_stepper li.is_done { color: var(--laborshare_color_success); }
.laborshare_stepper li.is_done::before, .laborshare_stepper li.is_current::before { background: var(--laborshare_color_success); }
.laborshare_stepper li.is_done span { border-color: var(--laborshare_color_success); background: var(--laborshare_color_success); }
.laborshare_stepper li.is_current { color: var(--laborshare_color_accent); font-weight: 600; }
.laborshare_stepper li.is_current span { border-color: var(--laborshare_color_accent); }

/* Numbers with labels (vote tally, counts). An item with is_success shows its number in green. */
.laborshare_stat_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--laborshare_space_2); margin: 0; padding: 0; list-style: none; }
.laborshare_stat_grid > li { padding: var(--laborshare_space_2) 10px; border: 1px solid var(--laborshare_color_line); border-radius: var(--laborshare_radius); background: var(--laborshare_color_surface_subtle); color: var(--laborshare_color_muted); font-size: var(--laborshare_font_small); }
.laborshare_stat_grid > li > strong { display: block; color: var(--laborshare_color_text); font-size: 18px; font-weight: 500; line-height: 1.2; }
.laborshare_stat_grid > li.is_success > strong { color: var(--laborshare_color_success); }

/* ---------- lists of things ---------- */

/* Done items with a check mark (acknowledgements, confirmations). */
.laborshare_check_list { margin: 0; padding: 0; list-style: none; }
.laborshare_check_list > li { display: flex; gap: var(--laborshare_space_2); align-items: baseline; }
.laborshare_check_list > li + li { margin-top: var(--laborshare_space_2); }
.laborshare_check_list > li > i { flex: none; color: var(--laborshare_color_success); }

/* File icon in a square, at the start of a row. */
.laborshare_icon_box { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--laborshare_radius); background: var(--laborshare_color_accent_soft); color: var(--laborshare_color_accent); font-size: 16px; }

/* A file shown inline (image, or PDF first page with a button). */
.laborshare_file_preview { text-align: center; }
.laborshare_file_preview iframe { display: block; width: 100%; height: 800px; margin: 0 0 var(--laborshare_space_3); border: 1px solid var(--laborshare_color_border); }
.laborshare_file_preview img { display: block; width: auto; max-width: 100%; max-height: 850px; margin: 0 auto var(--laborshare_space_3); object-fit: contain; }

/* ---------- show more ---------- */

/* A card that opens and closes: details.laborshare_card > summary.laborshare_card_header. */
details.laborshare_card > summary.laborshare_card_header { cursor: pointer; list-style: none; }
details.laborshare_card > summary.laborshare_card_header::-webkit-details-marker { display: none; }
details.laborshare_card > summary.laborshare_card_header::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--laborshare_color_muted); font-size: 12px; }
details.laborshare_card[open] > summary.laborshare_card_header::after { content: "\f077"; }
details.laborshare_card:not([open]) > summary.laborshare_card_header { border-bottom: 0; }

/* Less-used actions behind a link inside a card: details.laborshare_disclosure > summary + content. */
.laborshare_disclosure > summary { color: var(--laborshare_color_accent); cursor: pointer; font-size: 13px; font-weight: 500; }
.laborshare_disclosure[open] > summary { margin-bottom: var(--laborshare_space_3); }
.laborshare_disclosure > summary ~ * + * { margin-top: var(--laborshare_space_4); }

/* A button that cannot be used yet: the wrapper explains why (title / data-message) and a click shows it. */
.laborshare_blocked_action { display: inline-block; }
.laborshare_blocked_action.is_blocked { cursor: not-allowed; }
.laborshare_blocked_action.is_blocked > .button { pointer-events: none; opacity: 0.45; filter: grayscale(1); }
/* ---------- admin pages ---------- */

/* Link tiles with a number (summary at the top of a dashboard). */
.laborshare_tile_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--laborshare_space_3); margin: 0 0 var(--laborshare_space_4); }
.laborshare_stack > .laborshare_tile_grid { margin: 0; }
.laborshare_tile { display: flex; flex-direction: column; gap: 2px; padding: 14px var(--laborshare_space_4); border: 1px solid var(--laborshare_color_border); border-radius: var(--laborshare_radius); background: var(--laborshare_color_surface); color: var(--laborshare_color_muted); font-size: var(--laborshare_font_small); text-decoration: none; }
a.laborshare_tile:hover, a.laborshare_tile:focus-visible { border-color: var(--laborshare_color_accent); background: var(--laborshare_color_accent_soft); }
.laborshare_tile > strong { color: var(--laborshare_color_text); font-size: 24px; font-weight: 500; line-height: 1.2; }
.laborshare_tile > small { color: var(--laborshare_color_muted); font-size: var(--laborshare_font_small); }
.laborshare_tile_label { color: var(--laborshare_color_muted); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* Fields side by side in two columns; is_full makes one span both. Use on a card body. */
.laborshare_form_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--laborshare_space_4) 20px; align-items: start; }
.laborshare_card .laborshare_card_body.laborshare_form_grid > * + * { margin-top: 0; }
.laborshare_form_grid > .is_full { grid-column: 1 / -1; }
@media (max-width: 700px) { .laborshare_form_grid { grid-template-columns: minmax(0, 1fr); } }

/* A heading inside a card body (a part of the card's content). */
.laborshare_subheading { margin: 0; color: var(--laborshare_color_text); font-size: 15px; font-weight: 600; }

/* A table inside a padded body still runs edge to edge of the card. */
.laborshare_card .laborshare_card_body > .laborshare_card_table { margin-left: calc(-1 * var(--laborshare_card_inset)); margin-right: calc(-1 * var(--laborshare_card_inset)); }

/* Two or three columns of blocks (replaces Bulma columns). */
.laborshare_columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--laborshare_space_4) var(--laborshare_space_5); align-items: start; }
/* A short text box (password, code, confirmation word): <div class="control is_short">. */
.control.is_short { max-width: 260px; }

/* Code that wraps long lines (error messages). */
.laborshare_code.is_wrapped { white-space: pre-wrap; word-break: break-word; }
/* Text area for code or SQL: monospaced and taller. */
.textarea.is_code { min-height: 230px; font-family: var(--laborshare_font_mono); resize: vertical; }

/* Table cells that wrap long values instead of widening the table (query results, logs). */
.laborshare_card_table.is_wrapped td { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Table whose rows open a record: tr[data-row-url]; the first-column link is the keyboard and new-tab target. */
.laborshare_card_table.is_clickable tbody tr[data-row-url] { cursor: pointer; }
.laborshare_card_table.is_clickable tbody tr[data-row-url]:hover { background: var(--laborshare_color_hover); }
.laborshare_card_table.is_clickable td > a:first-child { color: var(--laborshare_color_text); font-weight: 600; }
.laborshare_card_table.is_clickable tbody tr:hover td > a:first-child, .laborshare_card_table.is_clickable td > a:first-child:focus-visible { color: var(--laborshare_color_accent); text-decoration: underline; }

/* A list row that is itself a link. */
a.laborshare_card_list_item { display: block; color: var(--laborshare_color_text); text-decoration: none; }
a.laborshare_card_list_item:hover, a.laborshare_card_list_item:focus-visible { background: var(--laborshare_color_hover); color: var(--laborshare_color_text); }

/* Small icon-only button (glance, close). Always give it a text label for screen readers. */
.laborshare_icon_button { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: var(--laborshare_radius); background: transparent; color: var(--laborshare_color_muted); cursor: pointer; vertical-align: middle; }
.laborshare_icon_button:hover, .laborshare_icon_button:focus-visible { background: var(--laborshare_color_hover); color: var(--laborshare_color_accent); }

/* Popup over the page: dialog.laborshare_dialog > div.laborshare_dialog_header + div.laborshare_dialog_body.
   While its content loads, add is_loading: the laborshare_dialog_loading text shows and iframes are hidden. */
.laborshare_dialog { width: min(1000px, 96vw); height: 92vh; max-height: 92vh; padding: 0; border: 0; border-radius: var(--laborshare_radius); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
.laborshare_dialog[open] { display: flex; flex-direction: column; }
.laborshare_dialog::backdrop { background: rgba(32, 33, 36, 0.55); }
.laborshare_dialog_header { display: flex; align-items: center; gap: var(--laborshare_space_2); padding: 10px var(--laborshare_space_3) 10px var(--laborshare_space_4); border-bottom: 1px solid var(--laborshare_color_line); }
.laborshare_dialog_header > strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--laborshare_font_body); }
.laborshare_dialog_body { position: relative; flex: 1 1 auto; background: #525659; }
.laborshare_dialog_body > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.laborshare_dialog_loading { display: none; position: absolute; top: 40%; left: 0; right: 0; margin: 0; color: #fff; font-size: var(--laborshare_font_body); text-align: center; }
.laborshare_dialog.is_loading .laborshare_dialog_loading { display: block; }
.laborshare_dialog.is_loading .laborshare_dialog_body > iframe { visibility: hidden; }
/* Rows separated by lines inside a card body (issues, notices, files): div.laborshare_divided > rows. */
.laborshare_divided > * + * { margin-top: var(--laborshare_space_3); padding-top: var(--laborshare_space_3); border-top: 1px solid var(--laborshare_color_line); }

/* Wide main column with a narrower side column (forms beside a list). */
.laborshare_layout_split.is_wide_narrow { grid-template-columns: minmax(0, 1.4fr) minmax(330px, 0.8fr); }
/* A timeline item that needs attention (unread). */
.laborshare_timeline_item.is_highlighted { background: var(--laborshare_color_accent_soft); }
/* Numbered steps with explanations: ol.laborshare_numbered_list > li > strong + p. */
.laborshare_numbered_list { margin: 0; padding: 0; list-style: none; counter-reset: laborshare_step; }
.laborshare_numbered_list > li { position: relative; padding-left: 40px; counter-increment: laborshare_step; }
.laborshare_numbered_list > li + li { margin-top: var(--laborshare_space_3); }
.laborshare_numbered_list > li::before { content: counter(laborshare_step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--laborshare_color_accent_soft); color: var(--laborshare_color_accent); font-size: 13px; font-weight: 600; line-height: 28px; text-align: center; }
.laborshare_numbered_list > li > p { margin: 2px 0 0; color: var(--laborshare_color_muted); }

/* A choice shown as a bordered option (radio or checkbox with an explanation). */
.laborshare_choice_card { display: flex; gap: var(--laborshare_space_3); align-items: flex-start; padding: var(--laborshare_space_3) var(--laborshare_space_4); border: 1px solid var(--laborshare_color_border); border-radius: var(--laborshare_radius); background: var(--laborshare_color_surface); }
.laborshare_choice_card + .laborshare_choice_card { margin-top: var(--laborshare_space_2); }
.laborshare_choice_card input { margin-top: 4px; }
.laborshare_choice_card label { flex: 1 1 auto; cursor: pointer; }
.laborshare_choice_card label > strong, .laborshare_choice_card label > .laborshare_note_text { display: block; }
.laborshare_choice_card label > .laborshare_badge { margin: 2px 0 4px; }
.laborshare_choice_card:has(input:checked) { border-color: var(--laborshare_color_accent); background: var(--laborshare_color_accent_soft); }
/* ---------- single-card pages (sign in, sign out) ---------- */
.laborshare_centered_page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: var(--laborshare_space_5); background: var(--laborshare_color_surface_subtle); }
.laborshare_centered_page > .laborshare_card { width: min(420px, 100%); margin: 0; }
.laborshare_centered_page .laborshare_page_title { font-size: 22px; }

/* The LaborShare name, as text, at the top of a sign-in card. */
.laborshare_brand { color: var(--laborshare_color_accent); font-size: 20px; font-weight: 600; letter-spacing: -0.3px; text-decoration: none; }
/* A heading placed inside a card body reads as a subheading. */
.laborshare_card_body h2, .laborshare_card_body h3, .laborshare_card_body h4 { margin: 0; color: var(--laborshare_color_text); font-size: 15px; font-weight: 600; }

/* Programmatically activated controls that must remain in the DOM and focusable. */
.laborshare_visually_hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Component migration bridge: retained legacy cards still own their existing
   internal padding. New cards require explicit header/body/table sections. */

/* Dashboard layout: standard header controls and independently stacked cards. */
.laborshare_dashboard_heading_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
}
.laborshare_dashboard_heading_row .laborshare_period_toolbar {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.laborshare_dashboard_left_column {
    min-width: 0;
    display: grid;
    gap: 16px;
    align-content: start;
}
.laborshare_dashboard_left_column > .laborshare_card {
    margin: 0;
}
@media (max-width: 760px) {
    .laborshare_dashboard_heading_row {
        align-items: flex-start;
    }
    .laborshare_dashboard_heading_row .laborshare_period_toolbar {
        flex-wrap: wrap;
    }
}

/* Shared page-header with action: one alignment rule for employees, crews, users, time sheets.
   Time-sheet header: the page-header component must not override the action layout.
   Text starts on the left; the payroll action remains at the right. */

/* Component contract: legacy form layout is a card body; action row is a card footer.
   The only adjustable inset for every approved card is --laborshare_card_inset. */

/* Canonical title/action header - left title, right actions. */
.laborshare_page_header_with_action { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--laborshare_space_3); width: 100%; max-width: none; text-align: left; }
.laborshare_page_header_with_action > :first-child { min-width: 0; }
.laborshare_page_header_with_action > :last-child { margin-left: auto; }
@media (max-width: 720px) { .laborshare_page_header_with_action > :last-child { margin-left: 0; } }

/* Auditable payroll: uses the shared card, table and spacing tokens. */
.laborshare_pay_audit_employee { border-top: 1px solid var(--laborshare_color_border); }
.laborshare_pay_audit_employee > summary { cursor: pointer; padding: var(--laborshare_card_inset); }
.laborshare_pay_audit_employee > summary:hover { background: var(--laborshare_color_surface_alt, #f7f8fa); }
.laborshare_pay_audit_employee h3 { font-size: 1rem; font-weight: 650; margin: 1rem 0 .5rem; }
.laborshare_pay_audit_employee h4 { font-size: .95rem; font-weight: 650; margin-bottom: .5rem; }
.laborshare_pay_audit_sheet { border: 1px solid var(--laborshare_color_border); padding: var(--laborshare_card_inset); margin: .75rem 0; }
.laborshare_pay_audit_sheet th { width: 35%; white-space: normal; }
.laborshare_pay_audit_sheet td { white-space: normal; overflow-wrap: anywhere; }

/* Payroll detail: one worksheet row per contributing time sheet. */
.laborshare_detail_grid { width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }
.laborshare_detail_grid th, .laborshare_detail_grid td { white-space: nowrap; padding: 0.55rem 0.7rem; }
.laborshare_detail_grid td:first-child { position: sticky; left: 0; background: var(--laborshare_color_surface, #fff); z-index: 1; font-weight: 400; }
.laborshare_detail_grid .laborshare_report_total td { font-weight: 700; border-top: 2px solid var(--laborshare_color_border, #dde2e8); }
.laborshare_detail_grid .laborshare_report_total td:first-child { background: var(--laborshare_color_surface_subtle, #f5f7f9); }
.laborshare_detail_daily { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }

/* Detail sheet lines are regular weight; only employee totals are emphasized. */
.laborshare_detail_grid tbody tr:not(.laborshare_report_total) td { font-weight: 400; }

/* Shared, opt-in aligned search/action row. Bulma-compatible. */
:root {
  --laborshare_control_height: 38px;
  --laborshare_control_gap: 8px;
  --laborshare_form_action_gap: 12px;
}
.laborshare_control_row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--laborshare_control_gap);
}
.laborshare_control_row > .control { margin: 0; }
.laborshare_control_row > .control.is-expanded { flex: 1 1 220px; min-width: 0; }
.laborshare_control_row .input:not(.is-small):not(.is-large),
.laborshare_control_row .button:not(.is-small):not(.is-large) {
  height: var(--laborshare_control_height);
  min-height: var(--laborshare_control_height);
}
.laborshare_form_actions { margin-top: var(--laborshare_form_action_gap); }
@media (max-width: 768px) {
  :root { --laborshare_control_height: 44px; }
}

/* ===================================================================================================
	ONE GENERAL LOOK (shared with Vericol, vericol_ui.css sections 9, 11, 14 and 20)
	Same font, palette, card lift, dark readable labels and buttons as Vericol's sign-in and record pages.
	Kept last so it settles the older layers above. Pages add nothing: use the components below.
=================================================================================================== */

/* page frame: a light grey page, white cards that lift off it, a navy header bar */
.laborshare_administration_body,
.laborshare_public_body {
	background: var(--laborshare_color_page);
	color: var(--laborshare_color_text_body);
	font-family: var(--laborshare_font);
}

.laborshare_administration_body .laborshare_administration_content,
.laborshare_public_body .laborshare_public_main,
.laborshare_public_body .laborshare_auth_shell {
	background: var(--laborshare_color_page);
}

.laborshare_administration_body .laborshare_administration_header {
	border-bottom-color: var(--laborshare_color_header);
	background: var(--laborshare_color_header);
	color: var(--laborshare_color_text_inverse);
}

.laborshare_administration_body .laborshare_administration_brand,
.laborshare_administration_body .laborshare_administration_brand:hover,
.laborshare_administration_body .laborshare_administration_user_name,
.laborshare_administration_body .laborshare_administration_version,
.laborshare_administration_body .laborshare_administration_version span:first-child,
.laborshare_administration_body .laborshare_menu_button,
.laborshare_administration_body .laborshare_logout_link {
	color: var(--laborshare_color_text_inverse);
}

.laborshare_administration_body .laborshare_administration_version {
	border-right-color: var(--laborshare_color_header_line);
	opacity: 0.8;
}

.laborshare_administration_body .laborshare_menu_button:hover,
.laborshare_administration_body .laborshare_logout_link:hover {
	background: var(--laborshare_color_header_hover);
	color: var(--laborshare_color_text_inverse);
}

.laborshare_administration_body .laborshare_administration_avatar {
	background: var(--laborshare_color_accent);
	color: var(--laborshare_color_text_inverse);
}

/* sign-in card: its brand row lines up with the card body below it */
.laborshare_card > .laborshare_auth_header {
	padding: 14px var(--laborshare_card_inset);
}

/* page head: the h1 of every page is the page title */
.laborshare_page_header h1 {
	margin: 0;
	color: var(--laborshare_color_text);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.3px;
	line-height: 1.25;
}

.laborshare_page_header h1 + p {
	margin: 0;
	color: var(--laborshare_color_muted);
	font-size: var(--laborshare_font_body);
}

/* labels: dark and readable; help text muted */
.laborshare_card_body .label,
.laborshare_login_card .label {
	margin-bottom: 6px;
	color: var(--laborshare_color_text);
	font-size: 14px;
	font-weight: 600;
}

.laborshare_card_body .help {
	color: var(--laborshare_color_muted);
	font-size: 13px;
}

.laborshare_card_body .input,
.laborshare_card_body .textarea,
.laborshare_card_body .select select {
	border-color: var(--laborshare_color_border_strong);
	font-size: 15px;
}

/* buttons: primary is brand blue, secondary is white with dark text, quiet is a plain text button */
.button.laborshare_button_primary {
	border-color: var(--laborshare_color_accent);
	background: var(--laborshare_color_accent);
	color: var(--laborshare_color_text_inverse);
	font-weight: 600;
}

.button.laborshare_button_primary:hover,
.button.laborshare_button_primary:focus-visible {
	border-color: var(--laborshare_color_accent_dark);
	background: var(--laborshare_color_accent_dark);
	color: var(--laborshare_color_text_inverse);
}

.button.laborshare_button_secondary {
	border-color: var(--laborshare_color_border_strong);
	background: var(--laborshare_color_surface);
	color: var(--laborshare_color_text);
	font-weight: 600;
}

.button.laborshare_button_secondary:hover,
.button.laborshare_button_secondary:focus-visible {
	background: var(--laborshare_color_surface_sunken);
	color: var(--laborshare_color_text);
}

.laborshare_button_quiet {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 14px;
	border-radius: var(--laborshare_radius_value);
	color: var(--laborshare_color_text_body);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.laborshare_button_quiet:hover,
.laborshare_button_quiet:focus-visible {
	background: var(--laborshare_color_surface_sunken);
	color: var(--laborshare_color_text);
}

/* the confirm button inside the dialog: solid red */
.button.laborshare_button_danger.is_solid {
	border-color: var(--laborshare_color_danger);
	background: var(--laborshare_color_danger);
	color: var(--laborshare_color_text_inverse);
}

.button.laborshare_button_danger.is_solid:hover,
.button.laborshare_button_danger.is_solid:focus-visible {
	border-color: var(--laborshare_color_danger_strong);
	background: var(--laborshare_color_danger_strong);
	color: var(--laborshare_color_text_inverse);
}

/* record page (model: /administration/resource/update/): one entity in one column, like the sign-in card */
.laborshare_page_narrow {
	max-width: 880px;
	margin: 0 auto;
}

/* created by: a quiet line under the fields of a record (wuc_system_field) */
.laborshare_form_meta {
	padding: 12px var(--laborshare_card_inset) 0;
	border-top: 1px solid var(--laborshare_color_line);
	color: var(--laborshare_color_faint);
	font-size: 13px;
}

.laborshare_form_meta:empty {
	display: none;
}

/* save bar: the last part of a record card; stays at the bottom of the screen while the card is on screen.
	Last updated on the left; Back, then (once something changes) Cancel and Save; Delete last, set apart. */
.laborshare_action_bar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 16px;
	padding: 12px var(--laborshare_card_inset) calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--laborshare_color_border);
	border-radius: 0 0 var(--laborshare_radius_value) var(--laborshare_radius_value);
	background: var(--laborshare_color_surface);
	box-shadow: var(--laborshare_shadow_bar);
}

.laborshare_action_bar_title {
	margin-right: auto;
	color: var(--laborshare_color_muted);
	font-size: 14px;
}

.laborshare_action_bar .button {
	min-height: 38px;
	font-size: 14px;
}

.laborshare_action_bar > .laborshare_button_danger {
	margin-left: 12px;
}

/* unsaved changes, shown in the save bar once a field changes (laborshare_administration.js) */
.laborshare_dirty_state {
	color: var(--laborshare_color_warning);
	font-weight: 600;
}

@media screen and (max-width: 599px) {
	.laborshare_action_bar_title {
		flex: 1 1 100%;
		font-size: 12px;
	}

	.laborshare_action_bar .button {
		flex: 1 1 auto;
	}
}

/* confirm: the one confirmation dialog (administration.master), a small laborshare_dialog. A control opts in with
	data-laborshare-confirm="Delete this employee? This cannot be undone."; laborshare_administration.js opens it. */
.laborshare_dialog.laborshare_confirm {
	width: min(440px, calc(100vw - 24px));
	height: fit-content;
	max-height: calc(100vh - 48px);
	padding: 24px;
	border-radius: 6px;
	background: var(--laborshare_color_surface);
	color: var(--laborshare_color_text_body);
	box-shadow: var(--laborshare_shadow_overlay);
}

.laborshare_dialog.laborshare_confirm::backdrop {
	background: var(--laborshare_color_backdrop);
}

.laborshare_dialog_title {
	margin: 0 0 8px;
	color: var(--laborshare_color_text);
	font-size: 20px;
	font-weight: 600;
}

.laborshare_confirm_body {
	margin: 0 0 20px;
}

.laborshare_confirm_action {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

/* a small add form above a list: the fields a new record needs, then the record page opens */
.laborshare_add_field_row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0 var(--laborshare_space_4);
}

.laborshare_add_field_row > .field {
	margin: 0;
}

/* library controls use the application font, not their own */
.ui-widget,
.ui-widget :is(input, select, textarea, button),
.flatpickr-calendar,
.ts-wrapper,
.ts-dropdown {
	font-family: var(--laborshare_font);
}

/* list model (shared with Vericol): the first column of every record list is a small open-record icon, the
	only way into the record (rows are not clickable); the page title carries the row count */
.laborshare_card_table th.laborshare_open_cell,
.laborshare_card_table td.laborshare_open_cell {
	width: 1%;
	padding-right: 0;
	white-space: nowrap;
}

.laborshare_row_open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	/* subtle gray, the same as Vericol (.vericol_row_open): gray arrow on a light gray square */
	--fa-primary-color: var(--laborshare_color_muted);
	--fa-secondary-color: var(--laborshare_color_surface_sunken);
	--fa-secondary-opacity: 1;
	color: var(--laborshare_color_muted);
}

.laborshare_row_open:hover,
.laborshare_row_open:focus-visible {
	--fa-primary-color: var(--laborshare_color_text);
	color: var(--laborshare_color_text);
}

.laborshare_list_count {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--laborshare_color_surface_sunken);
	color: var(--laborshare_color_muted);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	vertical-align: middle;
}

/* the search row at the top of a list card */
.laborshare_card > .laborshare_card_body.laborshare_toolbar {
	border-bottom: 1px solid var(--laborshare_color_line);
}

/* the signed-in user's name and initial in the header open My profile */
.laborshare_administration_user_link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 6px;
	border-radius: var(--laborshare_radius_value);
	color: inherit;
	text-decoration: none;
}

.laborshare_administration_user_link:hover,
.laborshare_administration_user_link:focus-visible {
	background: var(--laborshare_color_header_hover);
	color: var(--laborshare_color_text_inverse);
}

/* a page-level control above the cards, on the right (Lock this page) */
.laborshare_page_action {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 0 0 var(--laborshare_space_4);
}