/* RESET & BASE */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@600;700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--primary-coral: #FF6B6B;
	--primary-blue: #4ECDC4;
	--primary-purple: #A78BFA;
	--primary-orange: #FBBF24;
	--primary-pink: #F472B6;
	--primary-green: #34D399;
	--bg-white: #FAFBFC;
	--card-white: #FFFFFF;
	--text-dark: #1F2937;
	--text-medium: #6B7280;
	--text-light: #9CA3AF;
	--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06);
	--shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.08);
	--shadow-lifted: 0 12px 40px rgba(0, 0, 0, 0.12);
	--radius-small: 12px;
	--radius-medium: 20px;
	--radius-large: 28px;
	--radius-xl: 36px;
	--border-subtle: 1px solid rgba(255, 255, 255, 0.5);
	--border-glow: 1px solid rgba(78, 205, 196, 0.3);
	--gradient-rainbow: linear-gradient(135deg,
			var(--primary-coral),
			var(--primary-orange),
			var(--primary-pink),
			var(--primary-purple),
			var(--primary-blue),
			var(--primary-green));

	/* Family Member Colors */
	--color-dad: #4ECDC4;
	/* Teal for Dad */
	--color-mom: #F472B6;
	/* Pink for Mom */
	--color-thatcher: #34D399;
	/* GREEN for Thatcher */
	--color-briggs: #3B82F6;
	/* BLUE for Briggs */
	--color-family: #A78BFA;
	/* Purple for family/shared events */
}

html,
body {
	height: 100vh;
	overflow: hidden;
}

body {
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--bg-white);
	color: var(--text-dark);
}

/* BACKGROUND */
.background-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 4s ease-in-out;
	filter: brightness(0.95) saturate(1.1);
	transform: scale(1.02);
}

.background-image.active {
	opacity: 0.65;
}

.background-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.55) 0%,
			rgba(255, 255, 255, 0.45) 30%,
			rgba(250, 251, 252, 0.40) 60%,
			rgba(255, 255, 255, 0.50) 100%),
		linear-gradient(135deg,
			rgba(78, 205, 196, 0.05) 0%,
			rgba(167, 139, 250, 0.03) 50%,
			rgba(244, 114, 182, 0.04) 100%);
	z-index: 1;
}

/* MAIN CONTAINER - Horizontal Layout */
.container {
	width: 100%;
	height: 100vh;
	position: relative;
	z-index: 10;
	padding: 20px 24px 50px;
	display: flex;
	flex-direction: row;
	gap: 20px;
	overflow: hidden;
}

/* LEFT SIDEBAR */
.left-sidebar {
	width: 340px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}

/* Animated gradient border effect for left sidebar */
.left-sidebar::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg,
			var(--primary-coral),
			var(--primary-orange),
			var(--primary-pink),
			var(--primary-purple),
			var(--primary-blue),
			var(--primary-green),
			var(--primary-coral));
	background-size: 400% 400%;
	animation: gradient-shift 8s ease infinite;
	border-radius: calc(var(--radius-large) + 2px);
	z-index: -1;
	opacity: 0.3;
	filter: blur(8px);
}

@keyframes gradient-shift {

	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

/* GREETING */
.greeting-section {
	background: linear-gradient(135deg,
			rgba(255, 107, 107, 0.35) 0%,
			rgba(251, 191, 36, 0.3) 50%,
			rgba(244, 114, 182, 0.3) 100%);
	padding: 16px 20px;
	border-radius: var(--radius-large);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	font-size: 20px;
	font-weight: 600;
	color: var(--text-dark);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.greeting-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,
			transparent 0%,
			rgba(255, 255, 255, 0.4) 50%,
			transparent 100%);
	animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
	0% {
		left: -100%;
	}

	50%,
	100% {
		left: 100%;
	}
}

/* DATE/TIME - Top Left */
.datetime-section {
	background: rgba(255, 255, 255, 0.55);
	padding: 20px;
	border-radius: var(--radius-large);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.time {
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -3px;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	background: #000;
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: glossy-text 4s ease-in-out infinite;
	position: relative;
}

.time::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg,
			transparent 0%,
			rgba(255, 255, 255, 0.6) 50%,
			transparent 100%);
	animation: shine 3s ease-in-out infinite;
}

@keyframes glossy-text {

	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

.date {
	font-size: 16px;
	color: var(--text-medium);
	margin-top: 6px;
	font-weight: 500;
}

.fact-of-day {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	position: relative;

	/* Fancy matching top border */
	border-top: 0;
	background: linear-gradient(to right,
			transparent 0%,
			rgba(167, 139, 250, 0.5) 25%,
			rgba(78, 205, 196, 0.5) 75%,
			transparent 100%) top left / 100% 1px no-repeat;

	padding-top: 14px;
	/* Extra padding so the line breathes */
}


.fact-icon {
	font-size: 16px;
	flex-shrink: 0;
	animation: wiggle 2s ease-in-out infinite;
}

@keyframes wiggle {

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

	25% {
		transform: rotate(5deg);
	}

	75% {
		transform: rotate(-5deg);
	}
}

.fact-text {
	font-size: 12px;
	background: linear-gradient(90deg, var(--text-medium), var(--primary-purple), var(--text-medium));
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1.4;
	font-style: italic;
}

/* WEATHER SECTION */
.weather-section {
	display: flex;
	flex-direction: column;
}

.weather-combined {
	background: rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-large);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	overflow: hidden;
	position: relative;
	transition: background 1s ease;
}

/* Morning (5am - 12pm) - Warm sunrise colors */
.weather-combined.morning {
	background: linear-gradient(135deg,
			rgba(255, 183, 94, 0.4) 0%,
			rgba(255, 154, 86, 0.3) 50%,
			rgba(255, 206, 156, 0.35) 100%);
	border: 1px solid rgba(255, 200, 150, 0.5);
}

/* Afternoon (12pm - 5pm) - Bright sky blue */
.weather-combined.afternoon {
	background: linear-gradient(135deg,
			rgba(135, 206, 250, 0.4) 0%,
			rgba(100, 181, 246, 0.35) 50%,
			rgba(144, 202, 249, 0.3) 100%);
	border: 1px solid rgba(150, 200, 255, 0.5);
}

/* Evening (5pm - 9pm) - Sunset colors */
.weather-combined.evening {
	background: linear-gradient(135deg,
			rgba(255, 138, 101, 0.4) 0%,
			rgba(255, 110, 127, 0.35) 50%,
			rgba(186, 104, 200, 0.3) 100%);
	border: 1px solid rgba(255, 150, 150, 0.5);
}

/* Night (9pm - 5am) - Deep blue/purple */
.weather-combined.night {
	background: linear-gradient(135deg,
			rgba(48, 63, 159, 0.45) 0%,
			rgba(63, 81, 181, 0.4) 50%,
			rgba(92, 107, 192, 0.35) 100%);
	border: 1px solid rgba(100, 120, 200, 0.5);
}

#weather-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 65%;
	pointer-events: none;
	z-index: 0;
}

.current-weather {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	position: relative;
	z-index: 1;
}

.weather-icon {
	font-size: 69px;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
	position: relative;
	z-index: 1;
	animation: weather-icon-float 3s ease-in-out infinite;
}

@keyframes weather-icon-float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-3px);
	}
}

.weather-info {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;
}

.weather-location {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-medium);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 2px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.weather-location::before {
	content: '📍';
	font-size: 10px;
}

.temp-main {
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	background: linear-gradient(135deg, var(--primary-coral), var(--primary-orange));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.condition {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-dark);
	margin-top: 4px;
}

.temp-range {
	font-size: 12px;
	color: var(--text-medium);
	font-weight: 500;
}

/* FORECAST - Horizontal Row */
.forecast-row {
	display: flex;
	flex-direction: row;
	gap: 6px;
	padding: 5px;
	padding-top: 0;

	/* Fancy 1px top border with fade both sides */
	border-top: 0;
	background: linear-gradient(to right,
			transparent 0%,
			#8181818c 25%,
			#8181818c 75%,
			transparent 100%) top left / 100% 1px no-repeat;

	padding-top: 10px;
	/* keep spacing consistent with the decorative line */
}


.forecast-item {
	background: linear-gradient(180deg,
			rgba(255, 255, 255, 0.4) 0%,
			rgba(255, 255, 255, 0.2) 100%);
	padding: 8px 6px;
	border-radius: var(--radius-small);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	gap: 2px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: all 0.2s ease;
}

.forecast-item:hover {
	background: linear-gradient(180deg,
			rgba(255, 255, 255, 0.5) 0%,
			rgba(78, 205, 196, 0.2) 100%);
	transform: translateY(-2px);
}

.forecast-day {
	font-weight: 600;
	font-size: 10px;
	color: var(--text-dark);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.forecast-icon {
	font-size: 20px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
	margin: 2px 0;
}

.forecast-icon-canvas {
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
	margin: 2px 0;
}

.forecast-temps {
	display: flex;
	gap: 4px;
	align-items: center;
}

.forecast-temp-high {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-dark);
}

.forecast-temp-low {
	font-size: 11px;
	color: var(--text-light);
	font-weight: 500;
}

/* CALENDAR - Right Side */
.calendar-container {
	background: linear-gradient(145deg,
			rgba(255, 255, 255, 0.35) 0%,
			rgba(78, 205, 196, 0.1) 25%,
			rgba(255, 255, 255, 0.3) 50%,
			rgba(251, 191, 36, 0.08) 75%,
			rgba(255, 255, 255, 0.35) 100%);
	border-radius: var(--radius-xl);
	padding: 20px 24px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.calendar-header h2 {
	font-size: 46px;
	font-weight: 700;
	margin-bottom: 16px;
	font-family: 'Playfair Display', Georgia, serif;
	background: linear-gradient(135deg,
			#1F2937 0%,
			#374151 50%,
			#4B5563 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
	letter-spacing: -0.5px;
}


.calendar-grid {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.calendar-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 0;
	border-bottom: 0;
	background: linear-gradient(to right,
			transparent 0%,
			#6d6d6d 25%,
			#6d6d6d 75%,
			transparent 100%) bottom left / 100% 2px no-repeat;
	padding-bottom: 4px;
	flex-shrink: 0;
}

.weekday {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	background: linear-gradient(180deg, #333 0%, var(--primary-blue) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* CALENDAR GRID */
.calendar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	flex: 1;
	min-height: 0;
}

/* DAY CELLS */
.calendar-day {
	background: linear-gradient(145deg,
			rgba(255, 255, 255, 0.35) 0%,
			rgba(255, 255, 255, 0.2) 100%);
	border-radius: var(--radius-small);
	padding: 6px 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(120, 120, 120, 0.25);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	overflow: visible;
	display: flex;
	flex-direction: column;
	min-height: 0;
	backdrop-filter: blur(10px);
	position: relative;
}

.calendar-day:hover {
	transform: scale(1.02);
	background: linear-gradient(145deg,
			rgba(255, 255, 255, 0.5) 0%,
			rgba(255, 255, 255, 0.35) 100%);
	border-color: rgba(78, 205, 196, 0.4);
	box-shadow: 0 4px 20px rgba(78, 205, 196, 0.15),
		0 2px 8px rgba(0, 0, 0, 0.08);
}

.calendar-day:active {
	transform: scale(0.98);
}

/* Past days - subtle X strikethrough */
.calendar-day.past {
	background: rgba(200, 200, 200, 0.2);
}

.calendar-day.past::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70%;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(180, 180, 180, 0.5), transparent);
	transform: translate(-50%, -50%) rotate(-45deg);
	z-index: 0;
	pointer-events: none;
}

.calendar-day.past .day-number {
	opacity: 0.5;
}

.calendar-day.past .day-events {
	opacity: 0.6;
}

/* Event image background on calendar day */
.calendar-day.has-event-image {
	background: rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

/* Event image background on calendar day */
.calendar-day.has-event-image {
	background: linear-gradient(135deg,
			rgba(20, 20, 20, 0.35) 0%,
			rgba(0, 0, 0, 0.55) 100%);
	backdrop-filter: blur(4px) saturate(1.2);
	overflow: hidden;
	border-radius: var(--radius-small);
	position: relative;
}

/* Event image layer */
.day-event-image {
	position: absolute;
	inset: 0;
	background-size: 120%;
	background-position: center;
	background-repeat: no-repeat;

	/* richer tone, no muddy gray */
	opacity: 0.45;

	filter: contrast(1.1) brightness(0.85) saturate(1.2);

	z-index: 0;

	transition: opacity 0.35s ease, filter 0.35s ease;

	border-radius: inherit;

	animation: subtle-ken-burns 55s ease-in-out infinite;
}

/* Optional: hover clarity bump so users see it's special */
.calendar-day.has-event-image:hover .day-event-image {
	opacity: 0.6;
	filter: contrast(1.2) brightness(0.9) saturate(1.35);
}


/* Subtle Ken Burns effect with pauses - gentle zoom and pan with 12s holds */
@keyframes subtle-ken-burns {

	/* Position 1: Hold for ~12s (0-20%) */
	0%,
	20% {
		background-size: 115%;
		background-position: 30% 30%;
	}

	/* Transition to Position 2 (~3s move, then hold for ~12s) */
	25%,
	45% {
		background-size: 120%;
		background-position: 70% 50%;
	}

	/* Transition to Position 3 (~3s move, then hold for ~12s) */
	50%,
	70% {
		background-size: 118%;
		background-position: 40% 70%;
	}

	/* Transition to Position 4 (~3s move, then hold for ~12s) */
	75%,
	95% {
		background-size: 122%;
		background-position: 60% 35%;
	}

	/* Return to Position 1 */
	100% {
		background-size: 115%;
		background-position: 30% 30%;
	}
}

.calendar-day.has-event-image:hover .day-event-image {
	opacity: 0.5;
	animation-play-state: paused;
}

/* Stagger animations so images don't all move in sync */
.calendar-days .calendar-day:nth-child(7n+1) .day-event-image {
	animation-delay: 0s;
}

.calendar-days .calendar-day:nth-child(7n+2) .day-event-image {
	animation-delay: -3s;
}

.calendar-days .calendar-day:nth-child(7n+3) .day-event-image {
	animation-delay: -7s;
}

.calendar-days .calendar-day:nth-child(7n+4) .day-event-image {
	animation-delay: -11s;
}

.calendar-days .calendar-day:nth-child(7n+5) .day-event-image {
	animation-delay: -15s;
}

.calendar-days .calendar-day:nth-child(7n+6) .day-event-image {
	animation-delay: -5s;
}

.calendar-days .calendar-day:nth-child(7n+7) .day-event-image {
	animation-delay: -9s;
}

.calendar-day.has-event-image .day-number,
.calendar-day.has-event-image .day-events {
	position: relative;
	z-index: 1;
}

.calendar-day.has-event-image .day-number {
	color: white;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	background: rgba(0, 0, 0, 0.4);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.calendar-day.has-event-image .event-badge {
	backdrop-filter: blur(8px);
	background: rgba(255, 255, 255, 0.85) !important;
	color: var(--text-dark) !important;
	text-shadow: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.calendar-day.has-event-image .event-badge .event-icon {
	filter: none;
}

.calendar-day:hover {
	background: linear-gradient(145deg,
			rgba(255, 255, 255, 0.55) 0%,
			rgba(78, 205, 196, 0.15) 50%,
			rgba(251, 191, 36, 0.12) 100%);
	border-color: rgba(255, 255, 255, 0.7);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.calendar-day.has-event-image:hover {
	background: rgba(0, 0, 0, 0.4);
}

.calendar-day.other-month {
	opacity: 0.4;
	background: transparent;
}

.calendar-day.other-month:hover {
	opacity: 0.6;
}

.calendar-day.other-month .day-event-image {
	opacity: 0.2;
}

.calendar-day.today {
	background: linear-gradient(135deg, rgba(78, 205, 196, 0.25), rgba(167, 139, 250, 0.25));
	border: 2px solid var(--primary-blue);
	box-shadow:
		0 0 20px rgba(78, 205, 196, 0.3),
		0 4px 15px rgba(167, 139, 250, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	animation: today-pulse 3s ease-in-out infinite;
}

@keyframes today-pulse {

	0%,
	100% {
		box-shadow:
			0 0 20px rgba(78, 205, 196, 0.3),
			0 4px 15px rgba(167, 139, 250, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.5);
	}

	50% {
		box-shadow:
			0 0 30px rgba(78, 205, 196, 0.5),
			0 4px 20px rgba(167, 139, 250, 0.35),
			inset 0 1px 0 rgba(255, 255, 255, 0.5);
	}
}

.calendar-day.today.has-event-image {
	border: 2px solid var(--primary-blue);
	box-shadow:
		0 0 20px rgba(78, 205, 196, 0.4),
		0 4px 15px rgba(167, 139, 250, 0.3);
	animation: today-pulse 3s ease-in-out infinite;
}

.calendar-day.today:hover {
	background: linear-gradient(135deg, rgba(78, 205, 196, 0.25), rgba(167, 139, 250, 0.25));
}

.calendar-day.today .day-number {
	background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
	color: white;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	box-shadow: 0 3px 10px rgba(78, 205, 196, 0.4);
	flex-shrink: 0;
}

.day-number {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--text-dark);
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

/* EVENTS */
.day-events {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-height: 0;
	overflow: visible;
	position: relative;
	z-index: 1;
}

.event-badge {
	font-size: 10px;
	padding: 4px 8px;
	border-radius: 8px;
	white-space: wrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: linear-gradient(135deg, var(--primary-green), #10B981);
	color: white;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(52, 211, 153, 0.3);
	flex-shrink: 0;
	max-width: 100%;
	line-height: 1.3;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Event icon in badge */
.event-icon {
	font-size: 11px;
	flex-shrink: 0;
}

/* Calendar-specific colors */
.event-badge.green {
	background: linear-gradient(135deg, var(--primary-green), #10B981);
	box-shadow: 0 2px 6px rgba(52, 211, 153, 0.3);
}

.event-badge.coral {
	background: linear-gradient(135deg, var(--primary-coral), #EF4444);
	box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
}

.event-badge.blue {
	background: linear-gradient(135deg, var(--primary-blue), #06B6D4);
	box-shadow: 0 2px 6px rgba(78, 205, 196, 0.3);
}

.event-badge.purple {
	background: linear-gradient(135deg, var(--primary-purple), #8B5CF6);
	box-shadow: 0 2px 6px rgba(167, 139, 250, 0.3);
}

.event-badge.orange {
	background: linear-gradient(135deg, var(--primary-orange), #F59E0B);
	box-shadow: 0 2px 6px rgba(251, 191, 36, 0.3);
}

.event-badge.pink {
	background: linear-gradient(135deg, var(--primary-pink), #EC4899);
	box-shadow: 0 2px 6px rgba(244, 114, 182, 0.3);
}

.event-badge.multi {
	background: linear-gradient(135deg, var(--primary-blue), #06B6D4);
	box-shadow: 0 2px 6px rgba(78, 205, 196, 0.3);
}

.event-badge.important {
	background: linear-gradient(135deg, var(--primary-coral), var(--primary-orange));
	box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
}

/* Event type colors */
.event-badge.holiday {
	background: linear-gradient(135deg, var(--primary-coral), #EF4444) !important;
	box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3) !important;
}

.event-badge.birthday {
	background: linear-gradient(135deg, var(--primary-pink), #EC4899) !important;
	box-shadow: 0 2px 6px rgba(244, 114, 182, 0.3) !important;
}

/* Family member event colors */
.event-badge.family-dad {
	background: linear-gradient(135deg, var(--color-dad), #2DD4BF) !important;
	box-shadow: 0 2px 8px rgba(78, 205, 196, 0.4) !important;
}

.event-badge.family-mom {
	background: linear-gradient(135deg, var(--color-mom), #EC4899) !important;
	box-shadow: 0 2px 8px rgba(244, 114, 182, 0.4) !important;
}

.event-badge.family-thatcher {
	background: linear-gradient(135deg, var(--color-thatcher), #10B981) !important;
	box-shadow: 0 2px 8px rgba(52, 211, 153, 0.4) !important;
}

.event-badge.family-briggs {
	background: linear-gradient(135deg, var(--color-briggs), #2563EB) !important;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4) !important;
}

.event-badge.family-shared {
	background: linear-gradient(135deg, var(--color-family), #8B5CF6) !important;
	box-shadow: 0 2px 8px rgba(167, 139, 250, 0.4) !important;
}

/* Multi-day event styling - extends beyond cell boundaries */
.event-badge.multiday {
	position: relative;
	z-index: 5;
}

.event-badge.multiday-start {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-right: -14px;
	padding-right: 16px;
	clip-path: inset(0 -20px 0 0);
}

.event-badge.multiday-middle {
	border-radius: 0;
	margin-left: -14px;
	margin-right: -14px;
	padding-left: 16px;
	padding-right: 16px;
	clip-path: inset(0 -20px 0 -20px);
}

.event-badge.multiday-end {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-left: -14px;
	padding-left: 16px;
	clip-path: inset(0 0 0 -20px);
}

/* ============================
   NEWS TICKER (GSAP Version)
   ============================ */

.news-ticker {
	position: fixed;
	bottom: 0;
	left: 80px;
	/* adjust for your sidebar */
	right: 0;
	height: 44px;

	background: rgba(255, 255, 255, 0.92);
	border-top: 1px solid rgba(0, 0, 0, 0.08);

	display: flex;
	align-items: center;
	overflow: hidden;
	z-index: 9999;
	pointer-events: auto;

	backdrop-filter: blur(20px);
}

/* Hide news ticker on glance/year view */
#view-glance.active~.news-ticker {
	display: none;
}

/* The scrolling belt */
#news-ticker {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	will-change: transform;
}

/* Each copy of the ticker items */
.ticker-inner {
	display: flex;
	flex-wrap: nowrap;
}

/* Individual news items */
.news-item {
	padding: 0 50px;
	font-size: 15px;
	font-weight: 500;
	color: #1F2937;
	letter-spacing: 0.2px;
	white-space: nowrap;
}

.news-item::before {
	content: "•";
	color: #4ECDC4;
	font-weight: bold;
	margin-right: 10px;
	font-size: 14px;
}



/* SCROLLBAR */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: #F3F4F6;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--primary-blue), var(--primary-coral));
	border-radius: 10px;
	border: 2px solid #F3F4F6;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #3DBDB5, #FF8585);
}

/* UPCOMING EVENTS WIDGET */
.upcoming-section {
	background: linear-gradient(160deg,
			rgba(255, 255, 255, 0.45) 0%,
			rgba(255, 255, 255, 0.35) 40%,
			rgba(255, 255, 255, 0.4) 100%);
	border-radius: var(--radius-large);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.upcoming-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
	background: linear-gradient(90deg,
			rgba(78, 205, 196, 0.15) 0%,
			transparent 100%);
}

.upcoming-icon {
	font-size: 20px;
}

.upcoming-title {
	font-size: 16px;
	font-weight: 600;
	background: linear-gradient(135deg, var(--text-dark) 0%, var(--primary-pink) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.upcoming-list {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 8px;
	position: relative;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

.upcoming-scroll-wrapper {
	display: flex;
	flex-direction: column;
	gap: 6px;
	animation: upcoming-scroll 60s linear infinite;
}

/* Pause scroll on hover or when user is touching/scrolling */
.upcoming-list:hover .upcoming-scroll-wrapper,
.upcoming-list.user-scrolling .upcoming-scroll-wrapper {
	animation-play-state: paused;
}

.upcoming-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	background: linear-gradient(135deg,
			rgba(255, 255, 255, 0.4) 0%,
			rgba(255, 255, 255, 0.25) 100%);
	border-radius: var(--radius-small);
	transition: all 0.2s ease;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.upcoming-item:hover {
	background: linear-gradient(135deg,
			rgba(255, 255, 255, 0.55) 0%,
			rgba(78, 205, 196, 0.2) 100%);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateX(3px);
}

.upcoming-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 45px;
	padding: 6px 8px;
	background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
	border-radius: 10px;
	color: white;
	flex-shrink: 0;
}

/* Family member colors for upcoming date badges */
.upcoming-date.family-dad {
	background: linear-gradient(135deg, var(--color-dad), #2DD4BF);
}

.upcoming-date.family-mom {
	background: linear-gradient(135deg, var(--color-mom), #EC4899);
}

.upcoming-date.family-thatcher {
	background: linear-gradient(135deg, var(--color-thatcher), #10B981);
}

.upcoming-date.family-briggs {
	background: linear-gradient(135deg, var(--color-briggs), #2563EB);
}

.upcoming-date.family-shared {
	background: linear-gradient(135deg, var(--color-family), #8B5CF6);
}

.upcoming-date-day {
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.upcoming-date-month {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	margin-top: 2px;
}

/* Large icon for upcoming events (replaces date when event has icon) */
.upcoming-icon-large {
	font-size: 26px;
	line-height: 1;
}

.upcoming-details {
	flex: 1;
	min-width: 0;
}

.upcoming-event-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-dark);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.upcoming-event-time {
	font-size: 11px;
	color: var(--text-medium);
	margin-top: 2px;
}

.upcoming-countdown {
	font-size: 10px;
	font-weight: 600;
	background: linear-gradient(90deg, var(--primary-coral), var(--primary-orange), var(--primary-coral));
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: text-shimmer 3s linear infinite;
	margin-top: 3px;
}

@keyframes text-shimmer {
	0% {
		background-position: 0% center;
	}

	100% {
		background-position: 200% center;
	}
}

.upcoming-empty {
	text-align: center;
	padding: 20px;
	color: var(--text-light);
	font-size: 13px;
}