#jobs-nav {
	@media (width < 40rem) {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
	}
}

#jobs-nav.month {
	top: var(--filters-padding);
}

#today,
#week,
#month {
	padding-top: var(--content-padding);

	@media (width < 40rem) {
		padding: var(--content-padding);
		padding-top: calc(var(--content-padding) + var(--tabs-padding));
	}
}

#month {
	@media (width < 40rem) {
		padding-top: calc(4 * var(--spacing) + var(--tabs-padding) + var(--filters-padding));
	}
}

#today {
	> header {
		background-color: white;
		border: 1px solid var(--color-neutral-200);
		border-radius: var(--rounded-xl);
		padding: calc(4 * var(--spacing));
		margin-bottom: calc(4 * var(--spacing));

		> h1 {
			font-size: var(--text-xl);
			font-weight: 600;
		}

		> .today-date {
			margin-top: calc(2 * var(--spacing));
			text-transform: uppercase;
			color: var(--text-color-secondary);
		}
	}
}

#calendar {
	height: 80vh;
	@media (width < 40rem) { height: 70vh }
}

.job-filters {
	background-color: white;
	border-bottom: 1px solid var(--color-neutral-200);
	padding: calc(4 * var(--spacing));

	@media (width < 40rem) {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
	}
}

.job-time {
	display: flex;
	align-items: center;
	gap: calc(3 * var(--spacing));
	font-size: var(--text-base);
	font-weight: 600;
	text-transform: uppercase;

	> .hr {
		height: 1px;
		flex-grow: 1;
		background-color: var(--text-color);
		opacity: 0.1;
	}
}

.job-lineitem {
	border-radius: var(--rounded-xl);

	> header {
		color: white;
		font-size: var(--text-base);
		text-transform: uppercase;
		font-weight: 600;
		padding: calc(2.4 * var(--spacing)) calc(4 * var(--spacing));
	}

	.job-lineitem-body {
		padding: calc(4 * var(--spacing));
		background-color: white;
		border-radius: var(--rounded-xl);

		> div {
			margin-bottom: calc(3 * var(--spacing));
			&:last-child { margin-bottom: 0 }
		}
	}

	&.green {
		border: 2px solid var(--color-green);
		> header { background-color: var(--color-green) }
	}

	&.orange {
		border: 2px solid var(--color-orange);
		> header { background-color: var(--color-orange) }
	}

	&.blue {
		border: 2px solid var(--color-blue);
		> header { background-color: var(--color-blue) }
	}

	&.pink {
		border: 2px solid var(--color-pink);
		> header { background-color: var(--color-pink) }
	}
}