/*
 * BAN calendar - frontend styling.
 *
 * Loads after FullCalendar's skeleton.css and the Classic theme, so this only
 * needs to hold the things the theme cannot know about: the group type colours,
 * the event modal, and the modal body layout shared with the admin.
 *
 * The old calendar/GFX/css/calendar.css is now only used by the admin pages.
 */

/* --------------------------------------------------------------------------
   Calendar
   -------------------------------------------------------------------------- */

/* WordPress themes love to restyle everything inside post content. Keep the
   calendar's own tables and buttons out of that. */
.ban-cal table {
	margin: 0;
	border-collapse: collapse;
}

.ban-cal a {
	box-shadow: none;
}

.ban-cal__calendar {
	/* Stops a long event title from stretching the grid on narrow screens. */
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Group type colours

   The event feed sends `color` and `contrastColor` per event, which the theme
   turns into --fc-event-color / --fc-event-contrast-color. These class rules
   are the CSS fallback for that, and they keep the old `.event-*` class names
   working so the group colours survive if the feed ever stops sending them.
   Source of truth: Calendar::getGroupTypeColor() in calendar/Core/Calendar.php.
   -------------------------------------------------------------------------- */

.ban-cal .event-important {
	--fc-event-color: #ad2121;
	--fc-event-contrast-color: #ffffff;
}

.ban-cal .event-note {
	--fc-event-color: #ffd6d6;
	--fc-event-contrast-color: #1b1b1b;
}

.ban-cal .event-info {
	--fc-event-color: #1e90ff;
	--fc-event-contrast-color: #ffffff;
}

.ban-cal .event-success {
	--fc-event-color: #006400;
	--fc-event-contrast-color: #ffffff;
}

.ban-cal .event-warning {
	--fc-event-color: #e3bc08;
	--fc-event-contrast-color: #1b1b1b;
}

.ban-cal .event-inverse {
	--fc-event-color: #1b1b1b;
	--fc-event-contrast-color: #ffffff;
}

.ban-cal .event-special {
	--fc-event-color: #800080;
	--fc-event-contrast-color: #ffffff;
}

.ban-cal .event-danger {
	--fc-event-color: #ffdaba;
	--fc-event-contrast-color: #1b1b1b;
}

/* --------------------------------------------------------------------------
   Event modal
   -------------------------------------------------------------------------- */

.ban-cal-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 3vh 16px;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.5);
}

.ban-cal-modal[hidden] {
	display: none;
}

/* Stop the page behind the modal from scrolling. */
body.ban-cal-modal-open {
	overflow: hidden;
}

.ban-cal-modal__dialog {
	width: 100%;
	max-width: 700px;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.ban-cal-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	/* Overridden by the .dh-event-* rules below once a group type is known. */
	background: #dddddd;
}

.ban-cal-modal__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
}

.ban-cal-modal__close {
	flex: 0 0 auto;
	padding: 0 8px;
	font-size: 26px;
	line-height: 1;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
	opacity: 0.6;
}

.ban-cal-modal__close:hover,
.ban-cal-modal__close:focus {
	opacity: 1;
}

.ban-cal-modal__body {
	padding: 18px;
}

.ban-cal-modal__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 18px;
	border-top: 1px solid #e5e5e5;
}

/* The footer close button is a real button, not the header's bare glyph. */
.ban-cal-modal__footer .ban-cal-modal__close {
	font-size: inherit;
	opacity: 1;
}

.ban-cal-btn {
	display: inline-block;
	padding: 7px 14px;
	font-size: 14px;
	line-height: 1.4;
	color: #ffffff;
	text-decoration: none;
	background: #337ab7;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	cursor: pointer;
}

.ban-cal-btn:hover,
.ban-cal-btn:focus {
	color: #ffffff;
	background: #286090;
	text-decoration: none;
}

.ban-cal-btn--edit {
	background: #5cb85c;
}

.ban-cal-btn--edit:hover,
.ban-cal-btn--edit:focus {
	background: #449d44;
}

/* --------------------------------------------------------------------------
   Modal header tint per group type

   Kept identical to the admin rules in calendar.css so the preview in
   Agenda items and the live modal look the same.
   -------------------------------------------------------------------------- */

.ban-cal-modal__header.dh-event-important 	{ background-color: #fae3e3; }
.ban-cal-modal__header.dh-event-note 		{ background-color: #ffd6d6; }
.ban-cal-modal__header.dh-event-warning 	{ background-color: #fdf1ba; }
.ban-cal-modal__header.dh-event-info 		{ background-color: #d1e8ff; }
.ban-cal-modal__header.dh-event-inverse 	{ background-color: #c1c1c1; }
.ban-cal-modal__header.dh-event-success 	{ background-color: #caffca; }
.ban-cal-modal__header.dh-event-danger 		{ background-color: #ffdaba; }
.ban-cal-modal__header.dh-event-special 	{ background-color: #ffe6ff; }

/* --------------------------------------------------------------------------
   Modal body items

   Generated by Calendar::ViewCalendarModalEvent(), which the admin renders too.
   These rules mirror the ones in calendar.css; keep the two in step.
   -------------------------------------------------------------------------- */

.modal-body-item:not(:last-of-type) {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #e5e5e5;
}

.modal-body-time,
.modal-body-item {
	display: flex;
	align-items: center;
}

.modal-body-item > .ban-cal-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-right: 10px;
	color: #555555;
}

.ban-cal-arrow {
	vertical-align: -1px;
}

/* The Google Maps embed in the modal needs an explicit height. */
.modal-body-item > iframe,
.modal-body-item iframe {
	min-height: 250px;
	border: 0;
}

@media only screen and (max-width: 600px) {

	.ban-cal-modal {
		padding: 0;
	}

	.ban-cal-modal__dialog {
		min-height: 100%;
		border-radius: 0;
	}

}