/* ============================================
   BRIAR OAKS DEPARTMENT CALENDAR
   Standalone styles. Uses site --blue as primary accent.
   ============================================ */

:root {
	--calendar-primary: var(--blue, #012b5d);
	--calendar-primary-light: var(--blue-light, #1b3f71);
	--calendar-border: #dee2e6;
	--calendar-bg-light: #f8f9fa;
	--calendar-bg-hover: #e9ecef;
	--calendar-text-dark: #212529;
	--calendar-text-muted: #6c757d;
	--calendar-today-bg: #eaf1fb;
	--calendar-other-month: #adb5bd;
}

/* ============================================
   DESKTOP CALENDAR GRID
   ============================================ */
.calendar-table {
	table-layout: fixed;
	width: 100%;
}

.calendar-table thead th {
	padding: 14px 8px;
	vertical-align: middle;
	background-color: var(--calendar-bg-light);
	font-weight: 600;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: 1px solid var(--calendar-border);
}

.calendar-day {
	padding: 8px;
	min-height: 150px;
	height: 150px;
	width: 14.28%;
	position: relative;
	vertical-align: top;
	border: 1px solid var(--calendar-border);
	background-color: #ffffff;
	transition: background-color 0.2s ease;
}

.calendar-day:hover {
	background-color: var(--calendar-bg-light);
}

.calendar-day.today {
	background-color: var(--calendar-today-bg);
}

.calendar-day.other-month {
	background-color: var(--calendar-bg-light);
	opacity: 0.6;
}

.day-number {
	font-size: 1.05rem;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--calendar-text-dark);
}

.calendar-day.today .day-number {
	color: var(--calendar-primary);
	font-weight: 700;
}

.calendar-day.other-month .day-number {
	color: var(--calendar-other-month);
}

/* ============================================
   EVENT ITEMS - Color-coded chips
   Each .event-color-{token} gets a colored left bar.
   ============================================ */
.event-item {
	border-left: 4px solid var(--calendar-primary);
	background-color: #ffffff;
	transition: all 0.15s ease;
	font-size: 0.78rem;
	padding: 5px 7px;
	margin-bottom: 5px;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.event-item:hover {
	background-color: var(--calendar-bg-hover);
	transform: translateX(2px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.event-item:focus {
	outline: 2px solid var(--calendar-primary);
	outline-offset: 1px;
}

.event-item .event-title {
	font-weight: 600;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.event-item .event-meta {
	font-size: 0.7rem;
	color: var(--calendar-text-muted);
	margin-top: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Color tokens (border-left + matching subtle background) ---- */
/* Site palette */
.event-color-blue                { border-left-color: #012b5d; background-color: #f1f5fb; }
.event-color-peat                { border-left-color: #00381f; background-color: #eff5f1; }
.event-color-red                 { border-left-color: #d9042b; background-color: #fdeef1; }
.event-color-maroon              { border-left-color: #73020c; background-color: #faecee; }
.event-color-yellow              { border-left-color: #f2e205; background-color: #fdfbe6; }
.event-color-gold                { border-left-color: #f2b441; background-color: #fdf3e1; }
.event-color-silver              { border-left-color: #bfbfbf; background-color: #f5f5f5; }
.event-color-navy                { border-left-color: #162440; background-color: #eef0f4; }
.event-color-accessibility-blue  { border-left-color: #006da3; background-color: #ebf4fa; }

/* Bootstrap palette */
.event-color-primary    { border-left-color: #0d6efd; background-color: #eaf1ff; }
.event-color-secondary  { border-left-color: #6c757d; background-color: #eef0f1; }
.event-color-success    { border-left-color: #198754; background-color: #ebf5ee; }
.event-color-danger     { border-left-color: #dc3545; background-color: #fdecee; }
.event-color-warning    { border-left-color: #fd7e14; background-color: #fff1e6; }
.event-color-info       { border-left-color: #0dcaf0; background-color: #e7f9fd; }
.event-color-dark       { border-left-color: #212529; background-color: #ececec; }

/* ============================================
   MOBILE CARD VIEW
   ============================================ */
.mobile-day-card {
	border: 1px solid var(--calendar-border);
	border-radius: 8px;
	overflow: hidden;
}

.mobile-day-card .card-header {
	background-color: var(--calendar-bg-light);
	border-bottom: 1px solid var(--calendar-border);
	padding: 10px 14px;
}

.mobile-day-card.today {
	background-color: var(--calendar-today-bg);
}

.mobile-day-card.today .card-header {
	background-color: var(--calendar-primary);
	color: #fff;
}

.mobile-event-item {
	transition: all 0.15s ease;
	border-left: 5px solid var(--calendar-primary);
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	cursor: pointer;
}

.mobile-event-item:hover {
	background-color: var(--calendar-bg-hover);
}

.mobile-event-item:focus {
	outline: 2px solid var(--calendar-primary);
	outline-offset: 2px;
}

/* Reuse the same event-color-* tokens for mobile cards */
.mobile-event-item.event-color-blue                { border-left-color: #012b5d; background-color: #f1f5fb; }
.mobile-event-item.event-color-peat                { border-left-color: #00381f; background-color: #eff5f1; }
.mobile-event-item.event-color-red                 { border-left-color: #d9042b; background-color: #fdeef1; }
.mobile-event-item.event-color-maroon              { border-left-color: #73020c; background-color: #faecee; }
.mobile-event-item.event-color-yellow              { border-left-color: #f2e205; background-color: #fdfbe6; }
.mobile-event-item.event-color-gold                { border-left-color: #f2b441; background-color: #fdf3e1; }
.mobile-event-item.event-color-silver              { border-left-color: #bfbfbf; background-color: #f5f5f5; }
.mobile-event-item.event-color-navy                { border-left-color: #162440; background-color: #eef0f4; }
.mobile-event-item.event-color-accessibility-blue  { border-left-color: #006da3; background-color: #ebf4fa; }
.mobile-event-item.event-color-primary             { border-left-color: #0d6efd; background-color: #eaf1ff; }
.mobile-event-item.event-color-secondary           { border-left-color: #6c757d; background-color: #eef0f1; }
.mobile-event-item.event-color-success             { border-left-color: #198754; background-color: #ebf5ee; }
.mobile-event-item.event-color-danger              { border-left-color: #dc3545; background-color: #fdecee; }
.mobile-event-item.event-color-warning             { border-left-color: #fd7e14; background-color: #fff1e6; }
.mobile-event-item.event-color-info                { border-left-color: #0dcaf0; background-color: #e7f9fd; }
.mobile-event-item.event-color-dark                { border-left-color: #212529; background-color: #ececec; }

/* ============================================
   AGENDA LIST - same color-card styling as the full calendar's events
   ============================================ */
.agenda-date-heading {
	border-bottom: 2px solid var(--calendar-border);
	padding-bottom: 6px;
}

.agenda-date-heading.agenda-today {
	border-bottom-color: var(--calendar-primary);
}

.agenda-event-item {
	border-left: 5px solid var(--calendar-primary);
	background-color: #ffffff;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.agenda-event-item:hover {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
	transform: translateX(2px);
}

.agenda-event-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 1.05rem;
}

.agenda-event-description {
	line-height: 1.55;
}

.agenda-event-description p:last-child {
	margin-bottom: 0;
}

/* Event color tokens drive the agenda card's left border + tinted background */
.agenda-event-item.event-color-blue                { border-left-color: #012b5d; background-color: #f1f5fb; }
.agenda-event-item.event-color-peat                { border-left-color: #00381f; background-color: #eff5f1; }
.agenda-event-item.event-color-red                 { border-left-color: #d9042b; background-color: #fdeef1; }
.agenda-event-item.event-color-maroon              { border-left-color: #73020c; background-color: #faecee; }
.agenda-event-item.event-color-yellow              { border-left-color: #f2e205; background-color: #fdfbe6; }
.agenda-event-item.event-color-gold                { border-left-color: #f2b441; background-color: #fdf3e1; }
.agenda-event-item.event-color-silver              { border-left-color: #bfbfbf; background-color: #f5f5f5; }
.agenda-event-item.event-color-navy                { border-left-color: #162440; background-color: #eef0f4; }
.agenda-event-item.event-color-accessibility-blue  { border-left-color: #006da3; background-color: #ebf4fa; }
.agenda-event-item.event-color-primary    { border-left-color: #0d6efd; background-color: #eaf1ff; }
.agenda-event-item.event-color-secondary  { border-left-color: #6c757d; background-color: #eef0f1; }
.agenda-event-item.event-color-success    { border-left-color: #198754; background-color: #ebf5ee; }
.agenda-event-item.event-color-danger     { border-left-color: #dc3545; background-color: #fdecee; }
.agenda-event-item.event-color-warning    { border-left-color: #fd7e14; background-color: #fff1e6; }
.agenda-event-item.event-color-info       { border-left-color: #0dcaf0; background-color: #e7f9fd; }
.agenda-event-item.event-color-dark       { border-left-color: #212529; background-color: #ececec; }
.agenda-event-item.event-color-orange     { border-left-color: #d35400; background-color: #fbece1; }
.agenda-event-item.event-color-teal       { border-left-color: #117a8b; background-color: #e7f4f6; }
.agenda-event-item.event-color-brown      { border-left-color: #6f4e37; background-color: #f3eee9; }
.agenda-event-item.event-color-purple     { border-left-color: #6f42c1; background-color: #efeaf9; }
.agenda-event-item.event-color-magenta    { border-left-color: #c2185b; background-color: #fae6ee; }

/* ============================================
   AGENDA TABLE (legacy - retained but no longer used)
   ============================================ */
.agenda-table thead th {
	background-color: var(--calendar-bg-light);
	font-weight: 600;
	padding: 10px 14px;
	border-bottom: 2px solid var(--calendar-border);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.5px;
}

.agenda-table tbody tr {
	border-bottom: 1px solid var(--calendar-border);
}

.agenda-table tbody tr:hover {
	background-color: var(--calendar-bg-light);
}

.agenda-table tbody td {
	padding: 12px 14px;
	vertical-align: middle;
}

/* ============================================
   EVENT MODAL
   ============================================ */
#eventModal .modal-content,
#eventModal .modal-content .card-header,
#eventModal .modal-body,
#eventModal .modal-footer {
	background-color: #ffffff;
}

.event-modal-content h6 {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	margin-bottom: 0.4rem;
	margin-top: 0;
}

.event-modal-content .event-description {
	line-height: 1.6;
}

.event-modal-content a {
	color: var(--calendar-primary);
}

/* ============================================
   EXTENDED PALETTE - calendar-scoped utilities
   These tokens are not in the global color system. They live here so
   calendar badges, legend chips, modal badges, etc. can use them.
   All pair with white text for WCAG AA contrast (>=4.5:1).
   ============================================ */
.bg-orange  { background-color: var(--orange)  !important; color: #fff !important; }
.bg-teal    { background-color: var(--teal)    !important; color: #fff !important; }
.bg-brown   { background-color: var(--brown)   !important; color: #fff !important; }
.bg-purple  { background-color: var(--purple)  !important; color: #fff !important; }
.bg-magenta { background-color: var(--magenta) !important; color: #fff !important; }

.text-orange  { color: var(--orange)  !important; }
.text-teal    { color: var(--teal)    !important; }
.text-brown   { color: var(--brown)   !important; }
.text-purple  { color: var(--purple)  !important; }
.text-magenta { color: var(--magenta) !important; }

/* Event chip variants (left-bar accent + faint tinted background) */
.event-item.event-color-orange,
.mobile-event-item.event-color-orange  { border-left-color: #d35400; background-color: #fbece1; }
.event-item.event-color-teal,
.mobile-event-item.event-color-teal    { border-left-color: #117a8b; background-color: #e7f4f6; }
.event-item.event-color-brown,
.mobile-event-item.event-color-brown   { border-left-color: #6f4e37; background-color: #f3eee9; }
.event-item.event-color-purple,
.mobile-event-item.event-color-purple  { border-left-color: #6f42c1; background-color: #efeaf9; }
.event-item.event-color-magenta,
.mobile-event-item.event-color-magenta { border-left-color: #c2185b; background-color: #fae6ee; }

/* Bootstrap-named badges that don't always force white text - lock them in */
.badge.bg-warning { color: #fff !important; }
.badge.bg-secondary { color: #fff !important; }

/* Light backgrounds need dark text for contrast (WCAG AA) */
.badge.bg-gold,
.badge.bg-yellow,
.badge.bg-silver,
.badge.bg-silver-light,
.badge.bg-gold-light,
.badge.bg-yellow-light { color: #212529 !important; }

/* ============================================
   COLOR KEY LEGEND - equal-width, full-width grid
   ============================================ */
.calendar-legend-grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 6px;
	width: 100%;
}

.calendar-legend-item {
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 6px 8px;
	font-size: 0.75rem;
	min-width: 0;
}

@media (max-width: 1400px) {
	.calendar-legend-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 768px) {
	.calendar-legend-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   EMPTY STATE
   ============================================ */
.calendar-empty-state {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--calendar-text-muted);
}

.calendar-empty-state i {
	font-size: 3rem;
	margin-bottom: 1rem;
	opacity: 0.5;
}

/* ============================================
   RESPONSIVE TWEAKS
   ============================================ */
@media (max-width: 1400px) {
	.calendar-day {
		min-height: 130px;
		height: 130px;
	}
	.event-item {
		font-size: 0.72rem;
		padding: 4px 6px;
	}
}

@media (max-width: 1200px) {
	.calendar-day {
		min-height: 120px;
		height: 120px;
	}
	.event-item {
		font-size: 0.68rem;
		padding: 3px 5px;
	}
	.event-item .event-meta {
		font-size: 0.62rem;
	}
}

@media (max-width: 991px) {
	.calendar-day {
		min-height: 100px;
		height: 100px;
		padding: 4px;
	}
	.event-item .event-meta {
		display: none;
	}
}