:root {
	--wr-navy: #0B1026;
	--wr-deep-blue: #003B73;
	--wr-blue: #0077C8;
	--wr-cyan: #00B7FF;
	--wr-electric: #00E0FF;
	--wr-mint: #42D3A5;
	--wr-ink: #1A1F29;
	--wr-surface: #F4F7FA;
	--wr-line: #D8E0EA;
	--wr-border: #D8E0EA;
	--wr-muted: #5C6A80;
	--wr-signal: #FF6B3D;
}

.wr-shell {
	background: var(--wr-surface);
	color: var(--wr-ink);
	font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	padding: 24px;
}

.wr-hero {
	align-items: center;
	background: var(--wr-navy);
	border-radius: 8px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	padding: 28px 32px;
}

.wr-hero h1 {
	color: #fff;
	font-family: "Roboto Condensed", Roboto, sans-serif;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.05;
	margin: 0 0 8px;
}

.wr-hero p {
	margin: 0;
	max-width: 760px;
}

.wr-kicker {
	color: var(--wr-electric);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 8px !important;
	text-transform: uppercase;
}

.wr-day-total {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 8px;
	min-width: 150px;
	padding: 14px 18px;
	text-align: right;
}

.wr-day-total strong {
	display: block;
	font-size: 30px;
	line-height: 1;
}

.wr-day-total span {
	color: var(--wr-mint);
	font-weight: 700;
}

.wr-day-total small {
	color: var(--wr-signal);
	display: block;
	font-weight: 700;
	margin-top: 4px;
	max-width: 260px;
}

.wr-day-total.is-over {
	border-color: rgba(255, 107, 61, .65);
}

.wr-day-total.is-under {
	border-color: rgba(0, 183, 255, .55);
}

.wr-overtime {
	background: #F4F7FA;
	border: 1px solid var(--wr-line);
	border-radius: 8px;
	display: grid;
	gap: 16px;
	grid-template-columns: 260px 1fr;
	margin-bottom: 16px;
	padding: 14px;
}

.wr-alert {
	background: #FFF7E8;
	border: 1px solid #F0C36A;
	border-radius: 8px;
	color: #5B3B00;
	margin-bottom: 14px;
	padding: 12px 16px;
}

.wr-alert a {
	color: var(--wr-deep-blue);
	font-weight: 800;
	margin-left: 8px;
}

.wr-help-note {
	color: var(--wr-muted);
	display: block;
	margin-left: 14px;
	margin-top: 8px;
	max-width: 760px;
}

.wr-load-under td {
	background: #FFF1F1 !important;
}

.wr-load-over td {
	background: #ECFDF3 !important;
}

.wr-load-ok td {
	background: #F2FBFF !important;
}

.wr-load-missing td {
	background: #F4F7FA !important;
	color: var(--wr-muted);
}

.wr-load-weekend td {
	background: #F7FAFC !important;
	color: var(--wr-muted);
}

.wr-load-absence td {
	background: #FFF7E8 !important;
	color: #5B3B00;
}

.wr-load-under small,
.wr-load-over small,
.wr-load-ok small,
.wr-load-missing small,
.wr-load-weekend small,
.wr-load-absence small {
	display: block;
	margin-top: 5px;
}

.wr-summary-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 16px 0;
}

.wr-summary-grid-wide {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.wr-summary-card {
	background: #F7FAFC;
	border: 1px solid var(--wr-border);
	border-radius: 8px;
	padding: 12px;
}

.wr-summary-card span {
	color: var(--wr-muted);
	display: block;
	font-size: 13px;
}

.wr-summary-card strong {
	color: var(--wr-blue);
	display: block;
	font-size: 24px;
	margin-top: 4px;
}

@media print {
	.wr-hero,
	.wr-clear-form,
	.wr-filter,
	.wr-date-actions,
	.wr-actions,
	.wr-remove,
	.wr-edit-fields,
	.wr-period-panel {
		display: none !important;
	}

	.wr-print-day {
		border-collapse: collapse;
		display: table !important;
		font-size: 11px;
		width: 100%;
	}

	.wr-print-day th,
	.wr-print-day td {
		border: 1px solid #AAB7C4;
		padding: 5px 6px;
		text-align: left;
		vertical-align: top;
	}

	.wr-print-day th {
		background: #EEF3F8;
	}

	.wr-shell,
	.wr-panel {
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
}

.wr-check {
	align-items: center;
	display: flex !important;
	gap: 10px;
	margin-top: 28px;
}

.wr-check input {
	display: inline-block;
	margin: 0;
	width: auto;
}

.wr-panel,
.wr-item {
	background: #fff;
	border: 1px solid var(--wr-line);
	border-radius: 8px;
	margin-bottom: 16px;
	padding: 20px;
}

.wr-edit-fields {
	border: 0;
	margin: 0;
	padding: 0;
}

.wr-proof-note {
	color: #C62828;
	display: block;
	font-weight: 400;
	margin-top: 8px;
}

.wr-clear-form {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	margin: -4px 0 12px;
}

.wr-admin-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
}

.wr-admin-nav a {
	background: #fff;
	border: 1px solid var(--wr-line);
	border-radius: 999px;
	color: var(--wr-deep-blue);
	font-weight: 800;
	padding: 10px 16px;
	text-decoration: none;
}

.wr-admin-nav a:hover {
	background: #EAF7FF;
	color: var(--wr-deep-blue);
}

.wr-help-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wr-help-grid h3 {
	color: var(--wr-deep-blue);
	font-family: "Roboto Condensed", Roboto, sans-serif;
	font-size: 22px;
	margin: 0 0 8px;
}

.wr-help-grid p {
	margin: 0;
}

.wr-panel h2 {
	color: var(--wr-deep-blue);
	font-family: "Roboto Condensed", Roboto, sans-serif;
	font-size: 28px;
	margin: 0 0 16px;
}

.wr-date-row,
.wr-time-row,
.wr-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 16px;
}

.wr-date-row {
	align-items: end;
	grid-template-columns: 240px 1fr;
}

.wr-date-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.wr-filter {
	align-items: end;
	display: grid;
	gap: 16px;
	grid-template-columns: 220px 220px auto;
}

.wr-time-row {
	align-items: end;
	grid-template-columns: 1fr 120px 220px 220px;
}

.wr-shell label {
	display: block;
	font-weight: 700;
}

.wr-shell input,
.wr-shell select,
.wr-shell textarea {
	border: 1px solid var(--wr-line);
	border-radius: 6px;
	box-sizing: border-box;
	display: block;
	margin-top: 6px;
	padding: 10px 12px;
	width: 100%;
}

.wr-shell input[type="range"] {
	accent-color: var(--wr-cyan);
	padding: 0;
}

.wr-result-hint {
	color: #5C6A80;
	display: block;
	font-weight: 500;
	line-height: 1.35;
	margin-top: 6px;
}

.wr-item-head,
.wr-actions {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 16px;
}

.wr-item-head h3 {
	color: var(--wr-deep-blue);
	font-family: "Roboto Condensed", Roboto, sans-serif;
	font-size: 24px;
	margin: 0;
}

.wr-norm {
	background: #EAF7FF;
	border: 1px solid var(--wr-line);
	border-radius: 8px;
	padding: 10px 12px;
}

.wr-norm span,
.wr-norm small {
	display: block;
}

.wr-norm span {
	color: #5C6A80;
	font-size: 13px;
}

.wr-norm strong {
	color: var(--wr-deep-blue);
	display: block;
	font-size: 20px;
	line-height: 1.2;
}

.wr-norm small {
	color: #5C6A80;
	margin-top: 4px;
}

.wr-norm.is-ok {
	background: #ECFBF6;
	border-color: rgba(66, 211, 165, .45);
}

.wr-norm.is-high {
	background: #FFF1EC;
	border-color: rgba(255, 107, 61, .45);
}

.wr-norm.is-high small {
	color: var(--wr-signal);
	font-weight: 700;
}

.wr-norm.is-low {
	background: #F4F7FA;
}

.wr-button {
	background: var(--wr-cyan);
	border: 0;
	border-radius: 999px;
	color: var(--wr-navy);
	cursor: pointer;
	font-weight: 800;
	padding: 11px 22px;
}

.wr-button-secondary {
	background: #EAF7FF;
	color: var(--wr-deep-blue);
	justify-self: start;
}

.wr-button-export {
	background: var(--wr-deep-blue);
	border: 1px solid var(--wr-deep-blue);
	color: #fff;
	text-decoration: none;
}

.wr-button-export:hover {
	background: var(--wr-navy);
	border-color: var(--wr-navy);
	color: #fff;
}

.wr-button-screen {
	background: #1F9D55;
	border: 1px solid #1F9D55;
	color: #fff;
	text-decoration: none;
}

.wr-button-screen:hover {
	background: #187A43;
	border-color: #187A43;
	color: #fff;
}

.wr-export-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.wr-organization-actions {
	justify-content: flex-end;
	margin: 12px 0 0;
}

.wr-print-day {
	display: none;
}

.wr-export-form {
	background: #F7FAFC;
	border: 1px solid var(--wr-line);
	border-radius: 8px;
	padding: 14px;
}

.wr-absence-panel {
	background: #F4F7FA;
}

.wr-absence-form {
	background: #F4F7FA;
	border: 1px solid var(--wr-line);
	border-radius: 8px;
	grid-template-columns: 170px 170px 220px minmax(220px, 1fr);
	margin-bottom: 16px;
	padding: 14px;
}

.wr-absence-form .wr-button {
	grid-column: 1 / -1;
	justify-self: start;
}

.wr-compact-table td,
.wr-compact-table th {
	vertical-align: top;
}

.wr-badge {
	border-radius: 999px;
	display: inline-block;
	font-weight: 800;
	min-width: 58px;
	padding: 4px 9px;
	text-align: center;
}

.wr-badge-good {
	background: #ECFBF6;
	color: #12694F;
}

.wr-badge-neutral {
	background: #EAF7FF;
	color: var(--wr-deep-blue);
}

.wr-badge-warning {
	background: #FFF1EC;
	color: var(--wr-signal);
}

.wr-delta-high {
	background: #ECFDF3 !important;
}

.wr-delta-low {
	background: #FFF1F1 !important;
}

.wr-muted-text {
	color: #5C6A80;
	display: block;
	margin-top: 5px;
}

.wr-shell table .wr-button,
.wr-shell table .wr-remove {
	white-space: nowrap;
}

.wr-actions button[name="task"][value="save"] {
	background: var(--wr-mint);
	border: 1px solid var(--wr-mint);
	color: var(--wr-navy);
}

.wr-actions button[name="task"][value="save"]:hover {
	background: #36B88F;
	border-color: #36B88F;
	color: var(--wr-navy);
}

.wr-remove {
	background: transparent;
	border: 1px solid var(--wr-line);
	border-radius: 999px;
	color: var(--wr-signal);
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
	padding: 10px 16px;
	text-decoration: none;
}

@media (max-width: 900px) {
	.wr-hero,
	.wr-date-row,
	.wr-time-row,
	.wr-grid,
	.wr-help-grid,
	.wr-overtime,
	.wr-item-head,
	.wr-actions,
	.wr-filter {
		display: block;
	}

	.wr-day-total,
	.wr-date-row > *,
	.wr-time-row > *,
	.wr-grid > * {
		margin-top: 14px;
	}
}