/* =========================================================
   FullCalendar DayGrid - Custom Styling
   ========================================================= */
/* Let the calendar and its parents grow naturally */
#calendar, .calendar-wrapper, .card-body, .porto-block, /* if using a Porto/Okler block */ .section {
	height: auto !important;
	overflow: visible !important;
}
/* If any internal scroller appears, disable it */
.fc .fc-scroller {
	overflow: visible !important;
}
/* Remove default blue background & borders for month events */
.fc-daygrid-event {
	background: none !important;
	border: none !important;
	padding: 0 !important;
}
/* Remove default hover background */
.fc-daygrid-event:hover {
	background: none !important;
}
/* Ensure +more popover items also look text-only */
.fc-popover .fc-event {
	background: none !important;
	border: none !important;
}
/* Optional: style the custom "Click for more" link */
.fc .click-for-more-link {
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
/* ---------- 2) Equal-height day cells (even when empty) ---------- */
/* Make the day frame a column so events area can reserve space */
.fc-daygrid-day-frame {
	display: flex;
	flex-direction: column;
}
/* Reserve consistent space for the events block.
   Tweak the 80px base to your font sizes (68–90px typical). */
.fc-daygrid-day-events {
	flex: 1 0 80px; /* grows as needed, but keeps a base height */
}
/* ---------- 3) Month cell stacked layout (time → type → title) ---------- */
.fc-daygrid .fc-event-stack {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	color: #222; /* Primary text color */
}
/* Time line: big & bold for prominence */
.fc-daygrid .fc-event-time {
	font-weight: 700;
	font-size: 1rem; /* increased for emphasis */
	color: #111;
	margin-bottom: 2px;
}
/* Event type prefix (e.g., "Live Music:") */
.fc-daygrid .fc-event-type {
	font-weight: 600;
	font-size: 0.85rem; /* moderately larger */
	color: #000;
	margin-bottom: 1px;
}
/* Event title line */
.fc-daygrid .fc-event-title-line {
	font-size: 0.85rem; /* moderately larger */
	font-weight: 500;
	color: #333;
}
/* ---------- 4) Optional: compact card with thumbnail (if used) ---------- */
.fc-daygrid .fc-event-card {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.fc-daygrid .fc-event-thumb {
	width: 28px;
	height: 28px;
	border-radius: 4px; /* was 3px; harmonize with other rounded UI */
	object-fit: cover;
	flex: 0 0 auto;
	margin-right: 5px;
}
.fc-daygrid .fc-event-meta {
	line-height: 1.2;
}
.fc-daygrid .fc-event-title {
	font-weight: 600;
	font-size: 0.85rem;
}
.fc-daygrid .fc-event-sub {
	font-size: 0.75rem;
	opacity: 0.9;
}
.fc-daygrid .fc-event-note {
	font-size: 0.72rem;
	opacity: 0.8;
}
/* Dim background for days outside the current month */
.fc-day-other {
	background-color: #f5f5f5; /* light grey */
}
/* Optional: also dim the text color of date number & events in these days */
.fc-day-other .fc-daygrid-day-number {
	color: #999;
}
/* Make entire day cell feel interactive */
.fc-daygrid-day.daycell-clickable {
	cursor: pointer;
	transition: background-color 120ms ease;
}
/* Hover highlight for whole cell */
.fc-daygrid-day.daycell-clickable:hover {
	background-color: #f0f4f8; /* soft highlight; adjust to your palette */
}
/* Keep interior height consistent even with 0 events (from earlier step) */
.fc-daygrid-day-frame {
	display: flex;
	flex-direction: column;
}
.fc-daygrid-day-events {
	flex: 1 0 80px;
} /* adjust base height to match your font sizes */
/* Hide the big day headers in list view */
.fc .fc-list-day {
	display: none;
}
/* Remove the blue dot next to the title in list view */
.fc .fc-list-event-dot {
	display: none;
}
/* Left column width & alignment */
.fc .fc-list-event-time {
	width: 84px; /* a touch wider for full weekday */
	vertical-align: top;
	text-align: center;
	padding-right: 12px;
}
/* Date badge on the left */
.list-date-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	line-height: 1;
	border-radius: 8px;
	padding: 8px 8px;
	background: #f2f4f7; /* adjust to your palette */
	color: #111;
	min-width: 64px;
}
.list-date-daynum {
	font-size: 1.2rem;
	font-weight: 800;
}
.list-date-dow {
	font-size: 0.8rem;
	font-weight: 600;
	opacity: 0.9;
}
/* Remove the blue dot next to list titles */
.fc .fc-list-event-dot {
	display: none;
}
/* Right column stack in list view */
.fc .list-stack {
	line-height: 1.25;
}
/* Bold time line above title (list view only) */
.fc .list-stack .list-time {
	font-weight: 800;
	font-size: 0.95rem;
	margin-bottom: 2px;
}
/* Keep your existing month-view sizes for type/title */
.fc-daygrid .fc-event-type, .fc .list-stack .fc-event-type {
	font-weight: 600;
	font-size: 0.85rem;
	color: #000;
	margin-bottom: 1px;
}
.fc-daygrid .fc-event-title-line, .fc .list-stack .fc-event-title-line {
	font-size: 0.85rem;
	font-weight: 500;
	color: #333;
}
/* Optional: compact list rows */
.fc .fc-list-table td {
	padding: 10px 12px;
}
.fc .fc-list-table tr + tr td {
	border-top: 1px solid #eee;
}