/* Fabrik FullCalendar visualization - FullCalendar v7
 *
 * FC v7 no longer puts fc-* classes in its DOM, so every rule that used to
 * target .fc-event, .fc-toolbar, .fc-day-*, .fc-<view>-view etc. now targets
 * classes the plugin assigns itself via v7's class hooks (see fullcalendar.js):
 *   .fabrik-fc-toolbar / .navstyle-*      toolbarClass
 *   .fabrik-fc-title                      toolbarTitleClass
 *   .fabrik-fc-button[-<name>]           buttonClass
 *   .fabrik-fc-button-group               buttonGroupClass
 *   .fabrik-fc-event                      eventClass
 *   .fabrik-fc-day-header                 dayHeaderClass
 *   .fabrik-day-sun / .fabrik-day-weekend dayCellClass
 *   .fabrik-view-<viewType>               set on the calendar container in datesSet
 * Site-level custom.css written against fc-* selectors must be migrated the
 * same way.
 */

.fabrik-fc-event {
	border: none;
}

.fabrik-fc-event .fc-label {
	margin-top: 2px;
}

/* Class desktop */
.form-select.subf {
	width: 250px;
}

.form-control.minicolors.subf {
	width: 250px;
}

/* Media query tablet e smartphone */
@media (max-width: 768px) {
	.form-select.subf {
		width: 100%;
	}
}

/* navStyle "icons": no chrome overrides.
 * v7's Classic theme styles icon-only buttons correctly on its own (background,
 * border, padding, hover, disabled, and colour contrast against its own button
 * background). The v6-era overrides that stripped all of this have been removed;
 * icon-only vs text is now driven by buttons[].display, set server-side from the
 * navStyle param. Re-add overrides here only if you want bare glyphs with no
 * button chrome - note that v7's stock icons are SVGs drawn with
 * stroke="currentColor", so any such override must also set `color`. */

/* Hide the start/end times inside our event labels in the time-grid views */
.fabrik-view-timeGridWeek .fc-label-start-time,
.fabrik-view-timeGridWeek .fc-label-end-time,
.fabrik-view-timeGridDay .fc-label-start-time,
.fabrik-view-timeGridDay .fc-label-end-time {
	display: none;
}

.fabrik-view-timeGridWeek .fc-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.fabrik-view-timeGridWeek .fabrik-fc-event {
	min-height: 25px;
}

/* start & end H:M style (these are the plugin's own layout classes) */
.fc-label-start-time,
.fc-label-end-time {
	font-weight: 600;
}

.fc-label {
	overflow: hidden;
}

a.fabrikEvent.label {
	background-color: initial;
}

/* red color Sunday */
.fabrik-day-sun {
	color: red;
}

/* greyscale weekends (was inline style via td.fc-day-sat/sun query) */
.fabrik-day-weekend {
	background: #f2f2f2;
}

/* Full Height smartphone (was .fc-view-harness) */
.fabrik_visualization [data-role=calendar] {
	min-height: 360px;
}

/* NOTE: the v6 margin rules on the today / week buttons have been removed. They were
 * tuned for bare glyphs; in v7 the Classic theme draws the toolbar buttons as a group
 * and supplies its own spacing, so the extra margins broke the group visually. */

/* The standard nav buttons use the theme's 20px stock SVGs, but `today` has no stock
 * icon and falls through to a Bootstrap Icons glyph. Match its size and inherit the
 * theme's button colour so it sits consistently with the SVGs. */
.fabrik-fc-toolbar .fabrik-fc-button .bi {
	font-size: 20px;
	line-height: 1;
	color: inherit;
}

/* hover effect on icons */
.fabrik-fc-toolbar .fabrik-fc-button:hover,
.fabrik-fc-toolbar .fabrik-fc-button:hover .bi {
	color: blue !important;
}

@media (max-width: 764px) {

	.fabrik-fc-toolbar.navstyle-buttons,
	.fabrik-fc-toolbar.navstyle-both {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* label that adapts to the day cell */
	.fc-label {
		display: block !important;
		margin-left: 2px;
	}

}

@media (max-width: 764px) and (min-width: 579px) {
	.fabrik-view-timeGridWeek .fabrik-fc-day-header {
		font-size: small;
	}
}

@media (max-width: 578px) {
	.fabrik-view-timeGridWeek .fabrik-fc-day-header {
		font-size: x-small;
	}
}

/* Smallest month title */
@media (max-width: 578px) {
	.fabrik-fc-title {
		font-size: 1.30em;
		text-align: center;
		margin-bottom: 10px;
	}

	.fc-label-start-time,
	.fc-label-end-time {
		font-size: 12px;
	}

	.fabrik-fc-event {
		padding: 2px;
	}

	.fabrikEvent.label {
		display: -webkit-box !important;
		-webkit-box-orient: vertical !important;
		-webkit-line-clamp: 3 !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: normal !important;
		word-break: break-word !important;
	}

}

@media (min-width: 1024px) {
	/* NOTE: the v6 rule that scaled nav icons to 40px here has been removed. In v7
	 * the standard nav buttons use the theme's fixed-size SVG icons, so scaling only
	 * the Bootstrap Icon glyphs (today) left them mismatched. */
	.fc-label-start-time {
		margin-left: 5px;
	}
}

/**** legend *****/
.calendar-legend {
	margin: 10px;
	padding: 5px;
	border: 1px solid #dddddd;
}

.calendar-legend ul {
	list-style: none !important;
	padding: 0;
	margin: 0;
}

.calendar-legend li {
	clear: left;
	padding: 3px;
	background-image: none !important;
}

.calendar-legend li div {
	float: left;
	width: 15px;
	height: 15px;
	border: 1px solid #dddddd;
}

.calendar-legend li span {
	padding-left: 5px;
}

/*** end legend ***/

/* Hide the label column when editing the visualization in the admin */
#plg-visualization-fullcalendar-params > div > div.control-label {
	display: none;
}

/* Change the remove minus sign to a trash can so as not to confuse it as a minimize */
.group-remove .icon-minus::before {
	content: "\f014"; /* Unicode for trash icon */
}

/* Event tooltip layout - plain flex rows instead of Bootstrap's col-sm-* grid. The
   grid split is a fixed percentage of whatever width the tooltip happens to render
   at (driven by viewport breakpoints, not content), which is the wrong tool for a
   tiny floating tooltip - it caused both an overly-narrow box (wrapping) and, once
   widened, unused empty space. Sizing tooltip-inner to its content and letting each
   row's label/date size themselves avoids both. */
.tooltip[class*="fabrikevent_"] .tooltip-inner {
	width: max-content;
	max-width: 320px;
}

.tooltip[class*="fabrikevent_"] .fbfctt-row {
	display: flex;
	justify-content: center;
	gap: 0.4em;
	white-space: nowrap;
}

.tooltip[class*="fabrikevent_"] #FbFcTtStartTitle,
.tooltip[class*="fabrikevent_"] #FbFcTtEndTitle {
	font-weight: 600;
}