:root {
	--bounce-easing: linear(0,
			0.004,
			0.016,
			0.035,
			0.063,
			0.098,
			0.141 13.6%,
			0.25,
			0.391,
			0.563,
			0.765,
			1,
			0.891 40.9%,
			0.848,
			0.813,
			0.785,
			0.766,
			0.754,
			0.75,
			0.754,
			0.766,
			0.785,
			0.813,
			0.848,
			0.891 68.2%,
			1 72.7%,
			0.973,
			0.953,
			0.941,
			0.938,
			0.941,
			0.953,
			0.973,
			1,
			0.988,
			0.984,
			0.988,
			1);
}

/* Global fix for iconify-icon display issue */
iconify-icon {
	display: inline-block !important;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

@supports (view-transition-class: card) {
	.card {
		view-transition-class: card;
	}
}

html::view-transition-group(.card) {
	animation-timing-function: var(--bounce-easing);
}

/* IMPROVED LAYOUT STRATEGY - Less Aggressive Approach */
/* Keep existing body behavior but improve scrolling */
body {
	margin: 0;
	padding: 0;
	scrollbar-gutter: stable both-edges;
	/* Remove aggressive viewport constraints that can hide content */
	/* height: 100vh; */
	/* overflow: hidden; */
	/* display: flex; */
	/* flex-direction: column; */
}

/* Sidebar in Fixed Viewport */
/* Sidebar gets its own scroll within the fixed layout */
/* Only target main site navigation - not every "sidebar" class */
.sidenav,
nav[class*="sidenav"],
.sidebar-container {
	/* max-height: none !important; */
	/* Remove height restriction */
	height: fit-content !important;
	/* Fill available height */
	overflow-y: auto !important;
	overflow-x: hidden !important;
	transition: all 0.3s ease;
}

/* Smooth scrollbar styling for sidebar */
.sidenav::-webkit-scrollbar,
nav[class*="sidenav"]::-webkit-scrollbar,
.sidebar-container::-webkit-scrollbar {
	width: 6px;
}

.sidenav::-webkit-scrollbar-track,
nav[class*="sidenav"]::-webkit-scrollbar-track,
.sidebar-container::-webkit-scrollbar-track {
	background: transparent;
}

.sidenav::-webkit-scrollbar-thumb,
nav[class*="sidenav"]::-webkit-scrollbar-thumb,
.sidebar-container::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--c-accent) 30%, transparent);
	border-radius: 3px;
	transition: all 0.3s ease;
}

.sidenav::-webkit-scrollbar-thumb:hover,
nav[class*="sidenav"]::-webkit-scrollbar-thumb:hover,
.sidebar-container::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--c-accent) 50%, transparent);
}

/* Ensure main content isn't constrained by sidebar height */

.main {
	/* background: url("/images/hero-welcome-bg.png") no-repeat center center scroll; */
	/* background-size: cover !important; */
	border-radius: var(--br-lg);
	display: grid;
	grid-template-columns: 14% 86%;
	/* Default fatty layout */
	margin: 20px;
	padding: 20px;
	position: relative;
	box-shadow: var(--s-full-md);
	/* Remove aggressive height constraints that could hide content */
	/* min-height: 0 !important; */
	/* height: auto !important; */
	/* max-height: none !important; */
}

/* #footer { */
/*👉align-items: center;
	border-radius: var(--br-lg);
	color: var(--c-accent);
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin: 5px;
	max-height: fit-content;
	padding: 0;👈*/
/* Remove flex-shrink constraint */
/* flex-shrink: 0; */
/* } */

.nav-link {
	color: var(--c-fg) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
	background-color: var(--c-accent) !important;
}

.bg-dark {
	background-color: var(--c-bg) !important;
	border-radius: 7px;
}

.content {
	background-color: var(--c-bg);
	/*👉border: 2px solid;
	border-color: light-dark(var(--c-white-400), var(--c-black-200));
	border-color: var(--c-fg);👈*/
	border-radius: var(--br-lg);
	margin: 2px;
	margin-top: 3px;
	padding: 2px;
	/* Improved scrolling without aggressive viewport constraints */
	overflow-y: auto;
	overflow-x: hidden;
	/* Remove flex constraints that could hide content */
	/* flex: 1; */
	/* height: 0; */
}

.alert {
	font-weight: bold;
	padding: 10px;
	text-align: center;
}

a {
	color: inherit;
	text-decoration: none;
}


.btn-x {
	align-items: center;
	background: transparent;
	border: none;
	border: 0;
	border-radius: var(--br-sm);
	color: var(--c-fg);
	cursor: pointer;
	display: flex;
	height: 1em;
	justify-content: center;
	opacity: 0.8;
	padding: 0.25em 1em;
	width: 1em;
}

.btn-x:hover {
	color: light-dark(var(--c-acc-l-), var(--c-acc-d-));
	opacity: 0.75;
	text-decoration: none;
}

.btn-x:focus {
	box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
	opacity: 1;
	outline: 0;
}

.not-btn {
	background-color: transparent;
	border: none;
	color: var(--c-fg);
	margin-right: 5px;
	padding: 5px;
}

.popover-header {
	align-items: center;
	background-color: color-mix(in srgb, var(--c-bg) 80%, var(--c-fg) 10%);
	border-top: 1px solid transparent;
	border-bottom: 1px solid var(--c-accent);
	border-bottom-left-radius: var(--br-md);
	border-bottom-right-radius: var(--br-md);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: unset !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;

	h2 {
		margin: 0 !important;
	}

	button {
		font-weight: bold;
		margin: 0 !important;
		padding: 0 !important;
	}
}

.popover-body {
	color: var(--c-fg);
	padding: unset !important;
}


.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: unset;
	line-height: unset;
	margin-bottom: unset;
	margin-top: 0;
}

.footer-holder {
	display: inline;
}


.dress-right {
	align-self: flex-end;
}

.name {
	text-transform: capitalize !important;
}

.loader-container-overlay {
	align-items: center;
	backdrop-filter: blur(15px);
	display: flex;
	gap: 7%;
	height: 100vh;
	inset: 0;
	justify-content: center;
	position: absolute;
	width: 100vw;
	z-index: 50;
}

.loader {
	animation: l2 1s infinite linear;
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 0 0 0 #0004;
	position: relative;
	width: 40px;
}

.loader::before,
.loader::after {
	animation: inherit;
	animation-delay: -0.5s;
	border-radius: inherit;
	box-shadow: 0 0 0 0 #0004;
	content: '';
	inset: 0;
	position: absolute;
}

.loader::after {
	animation-delay: -1s;
}

@keyframes l2 {
	100% {
		box-shadow: 0 0 0 40px #0000;
	}
}

.loader1 {
	background: #f00;
	box-shadow: 0 0 0 0 #ff0004;
}

.loader2 {
	background: #ff7f00;
	box-shadow: 0 0 0 0 #ff7f04;
}

.loader3 {
	background: #ff0;
	box-shadow: 0 0 0 0 #ffff04;
}

.loader4 {
	background: #0f0;
	box-shadow: 0 0 0 0 #00ff04;
}

.loader5 {
	background: #00f;
	box-shadow: 0 0 0 0 #000ff4;
}

.loader6 {
	background: #f0f;
	box-shadow: 0 0 0 0 #f0f;
}

.hidden {
	display: none;
}

.month-title {
	background-color: var(--c-accent);
	border-radius: var(--br-lg);
	color: var(--c-bg);
	padding: 5px;
	padding-left: 1em;
}


.employee-lookup-results-card {
	max-height: 75vi;
	overflow: hidden;
	scrollbar-gutter: stable both-edges;
	text-transform: capitalize;
}

.employee-lookup-results {
	backdrop-filter: contrast(0.8);
	border-top: 2px solid var(--c-accent);
	max-height: 100%;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 10px;
}

.employee-lookup-results-card:hover {
	filter: brightness(1.25);
}

.employee-card {
	border-bottom: 1px dashed var(--c-accent);
	color: var(--c-fg);
	margin-bottom: 5px;
	padding-right: 15px;
}

.employee-card-body {
	display: grid;
	grid-template-columns: 35% 45% 25%;
	line-height: 0.75;
	margin-right: 10px;

	.employee-card-phone {
		text-align: end;
	}
}


.employee-card-body p {
	font-size: medium;
	margin: 1.5px !important;
	text-transform: capitalize;
}

.employee-lookup-clear-btn {
	margin-top: 10px;
}

.holiday {
	text-align: center;
}

/* Enhanced Seasonal Holiday Card Styles */
.seasonal-holiday {
	position: relative !important;
	overflow: hidden !important;
	border-radius: 12px !important;
	min-height: 150px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.seasonal-holiday .seasonal-particles {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

.seasonal-holiday .holiday-content {
	position: relative !important;
	z-index: 2 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	height: 100% !important;
	padding: 1.5rem !important;
	color: white !important;
}

.seasonal-holiday .days-section {
	text-align: center !important;
	margin-bottom: 1rem !important;
}

.seasonal-holiday .days-number {
	font-size: 3rem !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	color: white !important;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.seasonal-holiday .days-label {
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	margin-top: 0.25rem !important;
}

.seasonal-holiday .holiday-info {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.75rem !important;
}

.seasonal-holiday .holiday-icon {
	font-size: 2.5rem !important;
	color: white !important;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.seasonal-holiday .holiday-name {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: white !important;
	text-align: center !important;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
	line-height: 1.2 !important;
}

/* Seasonal Theme Backgrounds */
.seasonal-holiday.theme-christmas {
	background: linear-gradient(135deg, #0f766e 0%, #059669 50%, #10b981 100%) !important;
}

.seasonal-holiday.theme-thanksgiving {
	background: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #fb923c 100%) !important;
}

.seasonal-holiday.theme-halloween {
	background: linear-gradient(135deg, #7c2d12 0%, #ea580c 50%, #f97316 100%) !important;
}

.seasonal-holiday.theme-independence {
	background: linear-gradient(135deg, #dc2626 0%, #3b82f6 50%, #1d4ed8 100%) !important;
}

.seasonal-holiday.theme-late-summer {
	background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%) !important;
}

.seasonal-holiday.theme-early-fall {
	background: linear-gradient(135deg, #ca8a04 0%, #eab308 50%, #facc15 100%) !important;
}

.seasonal-holiday.theme-spring {
	background: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #4ade80 100%) !important;
}

.seasonal-holiday.theme-valentine {
	background: linear-gradient(135deg, #be123c 0%, #e11d48 50%, #f43f5e 100%) !important;
}

.seasonal-holiday.theme-winter {
	background: linear-gradient(135deg, #334155 0%, #475569 50%, #64748b 100%) !important;
}

.seasonal-holiday.theme-easter {
	background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important;
}

.seasonal-holiday.theme-late-spring {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
}

.seasonal-holiday.theme-summer-solstice {
	background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #fde047 100%) !important;
}

/* Seasonal Particles Animations */
.seasonal-particles[data-theme="christmas"]::before,
.seasonal-particles[data-theme="winter"]::before {
	content: '' !important;
	position: absolute !important;
	top: -5px !important;
	left: -5px !important;
	right: -5px !important;
	bottom: -5px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='rgba(255,255,255,0.1)'%3E%3Ccircle cx='8' cy='8' r='1'/%3E%3Ccircle cx='28' cy='14' r='0.5'/%3E%3Ccircle cx='16' cy='30' r='0.8'/%3E%3C/g%3E%3C/svg%3E") !important;
	animation: snowfall 10s linear infinite !important;
}

.seasonal-particles[data-theme="thanksgiving"]::before,
.seasonal-particles[data-theme="early-fall"]::before {
	content: '🍂' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	font-size: var(--fs-heading) !important;
	opacity: 0.2 !important;
	animation: leaffall 8s ease-in-out infinite !important;
}

.seasonal-particles[data-theme="valentine"]::before {
	content: '💕' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	font-size: var(--fs-heading-sm) !important;
	opacity: 0.3 !important;
	animation: heartFloat 6s ease-in-out infinite !important;
}

.seasonal-particles[data-theme="independence"]::before {
	content: '✨' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	font-size: var(--fs-base) !important;
	opacity: 0.4 !important;
	animation: sparkle 4s linear infinite !important;
}

/* ==========================================
   Would You Rather Card - Clean Modern Design
   Matches the crisp Card Settings modal style
   ========================================== */
.wyr-themed {
	padding: var(--spacing-md);
	border-radius: var(--br-lg);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	font-size: var(--fs-body);
}

/* Hide the floating emoji particles - they interfere with readability */
.wyr-particles {
	display: none !important;
}

/* Ensure content is properly stacked */
.wyr-themed .wyr-question,
.wyr-themed .wyr-options,
.wyr-themed .wyr-results {
	position: relative;
	z-index: 2;
}

/* Particle Animations */
@keyframes snowfall {
	0% {
		transform: translateY(-100%) rotate(0deg);
	}

	100% {
		transform: translateY(100vh) rotate(360deg);
	}
}

@keyframes leaffall {

	0%,
	100% {
		transform: translateX(0) rotate(0deg);
		opacity: 0.2;
	}

	50% {
		transform: translateX(20px) rotate(180deg);
		opacity: 0.1;
	}
}

@keyframes heartFloat {

	0%,
	100% {
		transform: translateY(0) scale(1);
		opacity: 0.3;
	}

	50% {
		transform: translateY(-10px) scale(1.1);
		opacity: 0.2;
	}
}

@keyframes sparkle {

	0%,
	100% {
		opacity: 0.4;
		transform: scale(1);
	}

	50% {
		opacity: 0.2;
		transform: scale(1.2);
	}
}

@keyframes choiceFloat {

	0%,
	100% {
		transform: translateX(0) translateY(0) rotate(0deg);
		opacity: 0.25;
	}

	25% {
		transform: translateX(10px) translateY(-8px) rotate(90deg);
		opacity: 0.15;
	}

	50% {
		transform: translateX(-5px) translateY(5px) rotate(180deg);
		opacity: 0.3;
	}

	75% {
		transform: translateX(-10px) translateY(-5px) rotate(270deg);
		opacity: 0.2;
	}
}

.popover-btn-holder {
	align-items: center;
	display: flex;
	justify-content: space-evenly;
	margin-top: 10px;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@view-transition {
	navigation: auto;
}

/* Removed problematic dash-card hover scrolling */

.table {
	border-radius: var(--br-lg) !important;
	border-collapse: separate !important;
	/* Important! */
	border-spacing: 0 !important;
	overflow: hidden !important;
}

/* Optional: Round specific corner cells */
.table tr:first-child th:first-child,
.table tr:first-child td:first-child {
	border-top-left-radius: var(--br-md) !important;
}

.table tr:first-child th:last-child,
.table tr:first-child td:last-child {
	border-top-right-radius: var(--br-md) !important;
}

.table tr:last-child td:first-child {
	border-bottom-left-radius: var(--br-md) !important;
}

.table tr:last-child td:last-child {
	border-bottom-right-radius: var(--br-md) !important;
}

.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch
}

.table-headline {
	font-size: var(--fs-2xl);
	font-weight: bold;
	text-align: center;
	text-transform: capitalize;
}

.has-info {
	align-items: center;
	anchor-name: --info;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.info {
	align-items: center;
	background-color: var(--c-fg);
	border-radius: 7px;
	box-shadow: 0 4px 6px -1px var(--c-accent), 0 4px 6px -1px rgb(0 0 0 / 10%),
		0 2px 4px -2px rgb(0 0 0 / 10%);
	box-shadow: var(--s-md);
	color: var(--c-bg);
	display: flex;
	flex-wrap: wrap;
	font-size: medium;
	justify-content: space-between;
	margin-top: -2em;
	opacity: 0;
	padding: 10px;
	position: absolute;
	position-anchor: --info;
	top: anchor(right);
	transform: scale(0.95);
	transition: opacity 0.3s ease, transform 0.3s ease;
	width: 35em;
	z-index: -5;
}

.info.show {
	opacity: 1;
	transform: scale(1);
	z-index: 1;
}

.no-list-style {
	list-style: none !important;
}

.sidenav-hr {
	background-color: var(--c-accent) !important;
}

select,
textarea {
	field-sizing: content;
}

textarea {
	min-width: 50px;
}


.card-list form {
	color: var(--c-fg);
	display: flex;
	flex-direction: column;
	font-size: large;
	gap: 10px;

}

.card-hide-list-item {
	display: flex;
	gap: 10px;
	padding: 5px;
	overflow-y: auto;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	cursor: pointer;
	font-size: var(--fs-xs);

	label {
		display: flex;
		justify-content: space-between;
	}

	.card-hide-list-item {
		margin-right: 20px;

	}

	.regular {
		filter: opacity(1);
	}

	.lighter {
		filter: opacity(0.6);
	}
}

.card-list {
	color: var(--c-fg);
	font-size: var(--fs-xs);
	list-style: none;
	max-width: max-content;
}

.card-list-item {
	color: var(--c-fg);
	display: flex;
	flex-direction: column;
	gap: 5px;
	justify-content: flex-end;
	transition: transform 3.3s ease, opacity 3.3s ease;

	p {
		align-items: center;
		display: flex;
		margin: 0 !important;
		vertical-align: middle;
	}
}

.btn-group {
	align-items: center;
	display: flex;
	gap: 5px;
	justify-content: space-between;
}

.order-save-btn {
	margin-top: 10px;
}

.vertical-stack {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.employee-card-note {
	font-family: none;
	font-size: var(--fs-xs) !important;
	margin: 0 !important;
	padding-left: 15px !important;
	text-align: left !important;
}

.emp-card-note-row {
	align-items: center;
	display: grid;
	grid-template-columns: 90% 10%;
	justify-content: space-between;
	width: 100%;
}

.employee-card-department {
	overflow: hidden;
	text-align: left !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#nextBirthdaysContent table tbody tr td,
#birthdaysContent table tbody tr td,
#anniversariesContent table tbody tr td {
	padding: 2px 4px !important;
}

#anniversariesContent table tbody tr td:first-child:not(.table-headline) {
	width: 30%;
}

.smaller {
	font-size: var(--fs-xs) !important;
}


#anniversariesContent {
	/* --yr1: oklch(0.85 0.15 90);
	--yr2: oklch(0.60 0.25 25);
	--yr3: oklch(0.98 0.005 0);
	--yr4: oklch(0.50 0.2 260);
	--yr5: oklch(0.80 0.18 330);
	--yr6: oklch(0.74 0.1121 302.47);
	--yr7: oklch(0.9 0.1334 92.26);
	--yr8: oklch(0.69 0.0875 67.23);
	--yr9: oklch(0.84 0.0834 35.37);
	--yr10: oklch(0.83 0.0725 246.84);
	--yr15: oklch(0.42 0.1406 25.08);
	--yr20: oklch(0.6 0.0932 166.6);
	--yr25: oklch(0.75 0 0);
	--yr30: oklch(0.59 0.159 140.34);
	--yr35: oklch(0.71 0.1006 29.07);
	--yr40: oklch(0.42 0.1406 25.08);
	--yr45: oklch(0.56 0.1728 24.62);
	--yr50: oklch(0.74 0.1487 82.63);
	--yr55: oklch(0.6 0.0932 166.6); */

	--c-very-dark-blue: oklch(0.20 0.20 270);
	--c-very-light-grey: oklch(0.95 0.01 0);
	--c-very-light-yellow: oklch(0.95 0.05 100);
	--c-very-dark-cyan: oklch(0.25 0.15 150);
	--c-ver-light-orange: oklch(0.95 0.05 60);

	--yr1: oklch(0.85 0.15 90);
	--yr1-fg: var(--c-very-dark-blue);


	--yr2: oklch(0.60 0.25 25);
	--yr2-fg: var(--c-very-light-grey);

	--yr3: oklch(0.98 0.005 0);
	--yr3-fg: oklch(0.20 0.02 0);

	--yr4: oklch(0.50 0.20 260);
	--yr4-fg: oklch(0.950 0.5 100);

	--yr5: oklch(0.80 0.18 330);
	--yr5-fg: oklch(0.25 0.15 150);

	--yr6: oklch(0.55 0.22 290);
	--yr6-fg: var(--c-ver-light-orange);

	--yr7: oklch(0.90 0.16 100);
	--yr7-fg: oklch(0.20 0.18 250);

	--yr8: oklch(0.70 0.12 60);
	--yr8-fg: oklch(0.2 0.15 300);

	--yr9: oklch(0.75 0.10 140);
	--yr9-fg: oklch(0.20 0.15 350);

	--yr10: oklch(0.80 0.05 300);
	--yr10-fg: oklch(0.20 0.08 150);

	--yr15: oklch(0.95 0.01 0);
	--yr15-fg: oklch(0.15 0.02 0);


	--yr20: oklch(0.97 0.008 0);
	--yr20-fg: oklch(0.15 .02 0);


	--yr25: oklch(0.80 0.05 300);
	--yr25-fg: oklch(0.20 0.08 150);


	--yr30: oklch(0.92 0.04 40);
	--yr30-fg: oklch(0.18 0.5 240);


	--yr35: oklch(0.72 0.20 30);
	--yr35-fg: oklch(0.20 0.20 200);


	--yr40: oklch(0.52 0.30 20);
	--yr40-fg: var(--c-very-light-yellow);


	--yr45: oklch(0.45 0.28 250);
	--yr45-fg: oklch(0.98 0.05 100);


	--yr50: oklch(0.82 0.18 85);
	--yr50-fg: var(--c-very-dark-blue);


	--yr55: oklch(0.65 0.22 130);
	--yr55-fg: oklch(0.95 0.08 30);


	--yr60: oklch(0.99 0.003 0);
	--yr60-fg: oklch(0.10 0.01 0);

}

.yr1 {
	background-color: var(--yr1);
	color: var(--yr1-fg);
}

.yr2 {
	background-color: var(--yr2);
	color: var(--yr2-fg);
}

.yr3 {
	background-color: var(--yr3);
	color: var(--yr3-fg);
}

.yr4 {
	background-color: var(--yr4);
	color: var(--yr4-fg);
}

.yr5 {
	background-color: var(--yr5);
	color: var(--yr5-fg);
}

.yr6 {
	background-color: var(--yr6);
	color: var(--yr6-fg);
}

.yr7 {
	background-color: var(--yr7);
	color: var(--yr7-fg);
}

.yr8 {
	background-color: var(--yr8);
	color: var(--yr8-fg);
}

.yr9 {
	background-color: var(--yr9);
	color: var(--yr9-fg);
}

.yr10,
.yr11,
.yr12,
.yr13,
.yr15 {
	background-color: var(--yr10);
	color: var(--yr10-fg);
}

.yr15,
.yr16,
.yr17,
.yr18,
.yr19 {
	background-color: var(--yr15);
	color: var(--yr15-fg);
}

.yr20,
.yr21,
.yr22,
.yr23,
.yr24 {
	background-color: var(--yr20);
	color: var(--yr20-fg);
}

.yr25,
.yr26,
.yr27,
.yr28,
.yr29 {
	background-color: var(--yr25);
	color: var(--yr25-fg);
}

.yr30,
.yr31,
.yr32,
.yr33,
.yr34 {
	background-color: var(--yr30);
	color: var(--yr30-fg);
}

.yr35,
.yr36,
.yr37,
.yr38,
.yr39 {
	background-color: var(--yr35);
	color: var(--yr35-fg);
}

.yr40,
.yr41,
.yr42,
.yr43,
.yr44 {
	background-color: var(--yr40);
	color: var(--yr40-fg);
}

.yr45,
.yr46,
.yr47,
.yr48,
.yr49 {
	background-color: var(--yr45);
	color: var(--yr45-fg);
}

.yr50,
.yr51,
.yr52,
.yr53,
.yr54 {
	background-color: var(--yr50);
	color: var(--yr50-fg);
}

.yr55,
.yr56,
.yr57,
.yr58,
.yr59 {
	background-color: var(--yr55);
	color: var(--yr55-fg);
}

.everything-else {
	grid-column-start: 2;
	grid-row-start: 1;
	margin-left: 20px;
	scrollbar-gutter: stable both-edges;
}

.contact-form {
	margin: 4rem auto;
	max-width: 36rem;
	padding: 0 1rem;
}

.form-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (width >=640px) {
	.form-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.form-group {
	width: 100%;
}

.form-group.full-width {
	grid-column: span 2;
}

.form-label {
	color: var(--c-fg);
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 0.625rem;
}

.form-input {
	background-color: var(--c-bg);
	border: 1px solid var(--c-primary);
	border-radius: var(--br-sm);
	color: var(--c-fg);
	display: block;
	font-size: var(--fs-base);
	outline: 1px solid var(--c-accent);
	outline-offset: -1px;
	padding: 0.5rem 0.875rem;
	width: 100%;
}

.form-input:focus {
	outline: 2px solid #4f46e5;
	outline-offset: -2px;
}

.phone-input-container {
	align-items: center;
	background-color: var(--c-bg);
	border: 1px solid var(--c-accent);
	border-radius: var(--s-error-sm);
	display: flex;
	outline: 1px solid var(--c-accent);
	outline-offset: -1px;
}


.phone-number-input {
	color: #111827;
	flex-grow: 1;
	font-size: var(--fs-base);
	min-width: 0;
	padding: 0.375rem 0.75rem;
}

.phone-number-input:focus {
	outline: none;
}

.policy-toggle {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.toggle-switch {
	background-color: var(--c-bg);
	border-radius: 9999px;
	cursor: pointer;
	height: 1.5rem;
	position: relative;
	transition: background-color 0.2s ease-in-out;
	width: 2rem;
}

.toggle-switch-handle {
	background-color: var(--c-bg);
	border-radius: 50%;
	box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
	height: 1rem;
	left: 0.125rem;
	position: absolute;
	top: 0.25rem;
	transition: transform 0.2s ease-in-out;
	width: 1rem;
}

.toggle-switch.active {
	background-color: #4f46e5;
}

.toggle-switch.active .toggle-switch-handle {
	transform: translateX(1.375rem);
}

.policy-label {
	color: #4b5563;
	font-size: 0.875rem;
	line-height: 1.5;
}

.policy-link {
	color: #4f46e5;
	font-weight: 600;
	text-decoration: none;
}

.submit-button {
	background-color: #4f46e5;
	border: none;
	border-radius: var(--br-sm);
	color: var(--c-primary);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	margin-top: 2.5rem;
	padding: 0.625rem 0.875rem;
	transition: background-color 0.2s;
	width: 100%;
}

.submit-button:hover {
	background-color: color-mix(in srgb, var(--c-primary) 90%, var(--c-white-100) 10%);
}

.submit-button:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

@media (width >=640px) {
	.full-width {
		grid-column: span 2;
	}
}

.phone-input-wrapper {
	margin-top: 0.625rem;
}


/* Responsive text size adjustment */
@media (width >=640px) {

	.country-select,
	.phone-number-input {
		font-size: 0.875rem;
		line-height: 1.5;
	}
}

/* Handling focus states */
.phone-input-container:focus-within {
	outline: 2px solid var(--c-accent);
	outline-offset: -2px;
}

/* Nav item styles moved to /styles/components/navigation.css */

/* Smart dash-card solution - no conflicting scroll states */
.dash-card {
	position: relative;
	overflow: hidden;
	/* Prevent internal scrolling */
	transition: all 0.3s ease;
}

.dash-card:hover {
	/* Enhance card visibility without scroll conflicts */
	transform: translateY(-2px);
	box-shadow: var(--s-sm);
	z-index: 10;
}

/* If cards need more content visibility, use a modal/popover approach */
.dash-card[data-expandable]:hover::after {
	content: "Click to expand";
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	background: var(--c-accent);
	color: var(--c-bg);
	padding: 0.25rem 0.5rem;
	border-radius: var(--br-sm);
	font-size: var(--fs-body-xs);
	opacity: 0.9;
	pointer-events: none;
}

/* Optional: Modal expansion for cards that need more content space */
.dash-card-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 90vw;
	max-height: 90vh;
	background: var(--c-bg);
	border: 2px solid var(--c-accent);
	border-radius: var(--br-lg);
	box-shadow: var(--s-xl);
	z-index: 1000;
	overflow-y: auto;
	padding: 2rem;
}

.dash-card-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	backdrop-filter: blur(3px);
}

.dash-card-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	font-size: var(--fs-heading);
	;
	cursor: pointer;
	color: var(--c-fg);
	opacity: 0.7;
}

.dash-card-modal-close:hover {
	opacity: 1;
	transform: scale(1.1);
}

/* Ensure no unexpected scrollable containers */
.dash-card * {
	overflow: visible;
}