/* Extracted styles from cal2.html */
:root {
	--ink-black: #000814ff;
	--prussian-blue: #001d3dff;
	--regal-navy: #003566ff;
	--school-bus-yellow: #ffc300ff;
	--gold: #ffd60aff;
}
body.mmx-cal {
	font-family: Arial, sans-serif;
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
	background: #fff;
	color: var(--prussian-blue);
}

.site-banner {
	background: linear-gradient(135deg, #e7eef7 0%, #d6e3f2 60%, #f6e7b6 100%);
	border-radius: 14px;
	padding: 18px 20px;
	color: var(--prussian-blue);
	box-shadow: 0 10px 24px rgba(0, 29, 61, 0.12);
	margin-bottom: 16px;
	position: relative;
}
.site-banner-inner {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.site-banner-title {
	font-family: "Inter", sans-serif;
	font-size: 50px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: lowercase;
	color: var(--prussian-blue);
}
.site-banner-subtitle {
	font-family: "Trebuchet MS", "Gill Sans", sans-serif;
	font-size: 14px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: rgba(0, 29, 61, 0.7);
}
.header-actions {
	position: absolute;
	top: 16px;
	right: 18px;
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.logout-link,
.home-link {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.4px;
	color: var(--prussian-blue);
	text-decoration: none;
	background: rgba(255, 255, 255, 0.7);
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(0, 53, 102, 0.2);
}
.logout-link:hover,
.home-link:hover {
	background: #fff;
}
.tabs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
	border-bottom: 2px solid rgba(255, 195, 0, 0.25);
	position: sticky;
	top: 0;
	background: #fff;
	padding: 10px 0;
	z-index: 20;
}
@media (max-width: 720px) {
	.tabs {
		gap: 8px;
	}
}
.tab-button { padding: 12px 20px; background: none; border: none; cursor: pointer; font-size: 16px; font-weight: bold; color: var(--prussian-blue); border-bottom: 3px solid transparent; transition: all 0.3s; }
.tab-button.active { color: var(--school-bus-yellow); border-bottom-color: var(--school-bus-yellow); }
.tab-content { display: none; }
.tab-content.active { display: block; }

.my-day { background: #fff; padding: 16px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
.my-day h2 { margin: 0 0 10px; font-size: 20px; color: var(--prussian-blue); }
.my-day .my-day-coming-title { margin-top: 18px; }

.auth-panel,
.public-home {
	background: #fff;
	padding: 18px;
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(0, 29, 61, 0.08);
}
.auth-panel h2,
.public-home h2 {
	margin: 0 0 8px;
	color: var(--prussian-blue);
}
.public-home h2 {
	font-family: "Trebuchet MS", "Gill Sans", sans-serif;
	font-size: 26px;
	letter-spacing: 0.4px;
}
.public-lede {
	margin: 0 0 18px;
	font-size: 15px;
	color: rgba(0, 29, 61, 0.75);
}
.public-rows {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.public-row {
	display: flex;
	gap: 18px;
	align-items: stretch;
}
.public-row--reverse {
	flex-direction: row-reverse;
}
.public-media {
	flex: 1 1 48%;
	min-height: 220px;
	border-radius: 16px;
	background: #dbe7f5;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 0 0 0 1px rgba(0, 53, 102, 0.12), 0 10px 24px rgba(0, 29, 61, 0.1);
}
.public-media--one {
	background-image: url("https://images.pexels.com/photos/11011175/pexels-photo-11011175.jpeg?auto=compress&cs=tinysrgb&w=1600");
}
.public-media--two {
	background-image: url("https://images.pexels.com/photos/2468773/pexels-photo-2468773.jpeg?auto=compress&cs=tinysrgb&w=1600");
}
.public-copy {
	flex: 1 1 52%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.public-copy h3 {
	margin: 0 0 8px;
	font-family: "Trebuchet MS", "Gill Sans", sans-serif;
	font-size: 18px;
	color: var(--prussian-blue);
}
.public-copy p {
	margin: 0 0 8px;
	color: rgba(0, 29, 61, 0.8);
}
.public-meta {
	font-size: 12px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: rgba(0, 29, 61, 0.55);
}
.public-cta {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 53, 102, 0.15);
}
.auth-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}
.auth-form input {
	flex: 1 1 200px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid rgba(0, 53, 102, 0.25);
}
.auth-form button {
	background: var(--prussian-blue);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.auth-error {
	margin-top: 10px;
	color: #b11f1f;
	font-size: 12px;
}
.public-link {
	display: inline-block;
	margin-top: 6px;
	background: var(--prussian-blue);
	color: #fff;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
}

@media (max-width: 820px) {
	.public-row,
	.public-row--reverse {
		flex-direction: column;
	}
	.public-media {
		min-height: 200px;
	}
}

/* horizontal calendar sticky tag column */
.horizontal-calendar #horizontal-calendar-container {
	position: relative;
	background-color: #fff;
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;
	padding: 10px 10px 10px 0;
	border-radius: 10px;
	box-shadow: 0 6px 14px rgba(0, 29, 61, 0.08);
}
.horizontal-calendar #horizontal-calendar-container {
	overflow-x: auto;
	scrollbar-width: none;
}
.horizontal-calendar .horiz-header-row,
.horizontal-calendar .horiz-row {
	width: max-content;
}
.horizontal-calendar #horizontal-calendar-container::-webkit-scrollbar {
	height: 0;
}
.horizontal-calendar .horiz-tag-header,
.horizontal-calendar .horiz-tag-cell {
	position: sticky;
	left: 0;
	z-index: 5;
	box-sizing: border-box;
	border-right: 1px solid rgba(0, 53, 102, 0.5);
}
.horizontal-calendar .horiz-tag-header { z-index: 4; }

/* match schedule tag styling */
.horizontal-calendar .horiz-tag-cell {
	background: var(--school-bus-yellow);
	color: var(--ink-black);
	border-radius: 4px;
	margin: 2px 6px 2px 0;
	font-size: 12px;
	font-weight: bold;
	border-bottom: 1px solid rgba(0, 53, 102, 0.5);
}
.horizontal-calendar .horiz-tag-cell.holiday {
	background: var(--regal-navy);
	color: var(--gold);
}
.horizontal-calendar .horiz-tag-header {
	background: #fff;
	color: var(--prussian-blue);
	border-bottom: 1px solid rgba(0, 53, 102, 0.5);
}

/* horizontal event blocks */
.horizontal-calendar .horiz-day-cell {
	background: #fff;
	z-index: 1;
	border-left: 1px solid #e8e8e8;
	border-bottom: 1px solid #e8e8e8;
	box-sizing: border-box;
}
.horizontal-calendar .horiz-day-header-cell {
	background: #fff;
	border-left: 1px solid rgba(0, 53, 102, 0.5);
	border-bottom: 1px solid rgba(0, 53, 102, 0.5);
	box-sizing: border-box;
}
.horizontal-calendar .horiz-day-header-cell.horiz-today {
	background: var(--gold);
	font-weight: bold;
}
.horizontal-calendar .horiz-day-header-cell:last-child,
.horizontal-calendar .horiz-day-cell:last-child {
	border-right: 1px solid #e8e8e8;
}
.horizontal-calendar .horiz-event-bar {
	background: var(--prussian-blue);
	color: var(--gold);
	border-radius: 20px;
	border: none;
	padding: 2px 6px;
	white-space: nowrap;
	overflow: visible;
	text-overflow: clip;
	position: absolute;
	z-index: 2;
	font-size: 11px;
	line-height: 14px;
	box-sizing: border-box;
}
.horizontal-calendar .horiz-event-bar.holiday {
	background: var(--regal-navy);
	color: var(--gold);
}

#horizontal-calendar-controls button {
	background: var(--prussian-blue);
	color: var(--gold);
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(0, 29, 61, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#horizontal-calendar-controls button:hover {
	background: var(--school-bus-yellow);
	transform: translateY(-1px);
	box-shadow: 0 10px 18px rgba(255, 195, 0, 0.2);
}

#horizontal-calendar-controls button:active {
	transform: translateY(0);
}

.date-section { background: #fff; padding: 15px; margin: 15px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.date-header { font-size: 18px; font-weight: bold; margin-bottom: 15px; color: var(--prussian-blue); border-bottom: 2px solid var(--school-bus-yellow); padding-bottom: 10px; }
.tag { display: inline-block; background: var(--school-bus-yellow); color: var(--ink-black); padding: 5px 10px; border-radius: 4px; margin-right: 10px; font-size: 12px; font-weight: bold; }
.tag.holiday { background: var(--regal-navy); color: var(--gold); }
.event { padding: 10px; margin: 10px 0; background: #fff; border-left: 4px solid var(--school-bus-yellow); }
.event.my-day-event { background: #e8e8e8; }
.event-title { font-weight: bold; margin: 5px 0; }
.event-time { color: var(--prussian-blue); font-size: 14px; margin-bottom: 5px; }
.event-description { color: var(--prussian-blue); font-size: 13px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0, 53, 102, 0.5); white-space: pre-line; }
.my-day-event .my-day-line { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.my-day-event .event-title { margin: 0; }
.event-note { margin-top: 6px; font-size: 12px; color: var(--prussian-blue); font-style: italic; }
.event-notes-panel { margin-top: 20px; background: #fff; padding: 12px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
.event-notes-panel h3 { margin: 0 0 8px; font-size: 14px; color: var(--prussian-blue); }
.event-notes-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.event-notes-controls input { flex: 1; min-width: 160px; }
.event-notes-controls select { flex: 1; min-width: 220px; }
.event-notes-controls button { padding: 6px 10px; }
.event-notes-controls span { font-size: 12px; color: var(--regal-navy); }
.event-notes-panel textarea { width: 100%; resize: vertical; }
.late-checkout-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--prussian-blue); }
.late-checkout-row input { margin: 0; }
.late-checkout-notice { margin-top: 6px; font-size: 12px; color: var(--school-bus-yellow); font-weight: bold; }
.early-checkin-notice { margin-top: 6px; font-size: 12px; color: var(--regal-navy); font-weight: bold; }
.late-checkin-notice { margin-top: 6px; font-size: 12px; color: var(--ink-black); font-weight: bold; }
.expected-checkin-notice { margin-top: 6px; font-size: 12px; color: var(--prussian-blue); font-weight: bold; }
.bag-dropoff-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--prussian-blue); }
.bag-dropoff-row input { margin: 0; }
.bag-dropoff-notice { margin-top: 6px; font-size: 12px; color: var(--prussian-blue); font-weight: bold; }
.third-party-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--prussian-blue); }
.third-party-row input { margin: 0; }
.third-party-notice { margin-top: 6px; font-size: 12px; color: var(--prussian-blue); font-weight: bold; }
.event-time-row { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--prussian-blue); margin-right: 12px; }
.event-time-select { padding: 2px 4px; font-size: 12px; }
.late-checkout-row,
.bag-dropoff-row,
.third-party-row {
	display: inline-flex;
	margin-right: 12px;
}

.site-footer {
	margin-top: 24px;
	padding: 14px 18px;
	border-top: 1px solid rgba(0, 53, 102, 0.15);
	text-align: center;
	color: var(--prussian-blue);
}
.site-footer-title {
	font-family: "Trebuchet MS", "Gill Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.6px;
}
.site-footer-subtitle {
	font-size: 11px;
	letter-spacing: 0.4px;
	color: var(--regal-navy);
}
.public-attribution {
	margin-top: 6px;
	font-size: 11px;
	color: rgba(0, 29, 61, 0.6);
}
.public-attribution a {
	color: inherit;
}

.install-banner {
	position: sticky;
	bottom: 0;
	margin: 14px 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: #f1f5fb;
	border: 1px solid rgba(0, 53, 102, 0.15);
	box-shadow: 0 8px 18px rgba(0, 29, 61, 0.12);
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.install-banner-text {
	flex: 1 1 220px;
}
.install-banner-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: var(--prussian-blue);
}
.install-banner-subtitle {
	font-size: 12px;
	color: rgba(0, 29, 61, 0.7);
}
.install-button {
	background: var(--prussian-blue);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.install-button:hover {
	background: var(--regal-navy);
}
.install-dismiss {
	background: transparent;
	border: none;
	color: var(--regal-navy);
	font-size: 12px;
	cursor: pointer;
}