/* Root Variables */
:root {
	--scheduler-default: #0d72f5;
	--scheduler-default-hover: #0c5dc7;

	--event-header-default-bg: #2e466b;
	--event-header-default-fg: #ffffff;

	--event-body-default-bg: #f9f9f9;
	--event-body-default-fg: #333333;

	--event-bar-default-bg: #0d72f5;
	--event-bar-default-fg: #ffffff;

	--weekend-default-bg: #728ebd;
	--weekend-default-fg: #ffffff;
}

/* Calendar Event Base Styles */
.dhx_cal_event:not(.dhx_cal_select_menu) {
	background: var(--event-body-default-bg) !important;
	color: var(--event-body-default-fg) !important;
	padding: 0 !important;
	box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.18);
	border-radius: 0 0 5px 5px !important;
}

.dhx_cal_event.dhx_cal_select_menu {
	background: none !important;
	padding: 0 !important;
}

.dhx_cal_event_drag {
	background: none !important;
}

/* Event Title Styles */
.dhx_cal_event .dhx_title {
	padding: 3px 0 0 5px;
	font-size: 1.1rem;
	background-color: var(--event-header-default-bg) !important;
	color: var(--event-header-default-fg) !important;
	border-radius: 5px 5px 0 0 !important;
	height: 2vh;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dhx_cal_event--small .dhx_title,
.dhx_cal_event--xsmall .dhx_title {
	padding-right: 5px !important;
}

.dhx_cal_select_menu .dhx_title {
	display: none !important;
}

.dhx_cal_event_line {
	background: var(--event-bar-default-bg) !important;
	color: var(--event-bar-default-fg) !important;
	justify-content: space-between !important;
}

.dhx_cal_event_line,
.dhx_cal_event_clear {
	background: var(--event-header-default-bg) !important;
	color: var(--event-header-default-fg) !important;
	border-radius: 5px !important;
	font-size: 1.1rem;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 8px !important;
}

.dhx_cal_event_clear::before {
	content: none !important;
}

/* Event Body Styles */
.dhx_body {
	overflow: hidden !important;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.dhx_cal_event:not(.dhx_cal_select_menu) .dhx_body {
	padding: 5px 5px 0 5px !important;
	background-color: var(--event-body-default-bg) !important;
	color: var(--event-body-default-fg) !important;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
	opacity: 0.7;
}

.dhx_cal_event.dhx_cal_select_menu .dhx_body {
	background-color: var(--event-body-default-bg) !important;
	color: var(--event-body-default-fg) !important;
	height: auto !important;
	box-shadow: -1.5px 1.5px 2px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 7px 0px !important;
}

/* Event Hover States */
.dhx_cal_event:not(.dhx_cal_select_menu) .dhx_body:hover,
.dhx_cal_event:not(.dhx_cal_select_menu):hover,
.dhx_cal_event_selected .dhx_body {
	opacity: 1;
	background-color: var(--event-body-default-bg) !important;
	color: var(--event-body-default-fg) !important;
	cursor: pointer;
}

/* Navigation Tabs */
.dhx_cal_tab {
	border: 1px solid var(--scheduler-default);
}

.dhx_cal_tab.active,
.dhx_cal_tab:active {
	background-color: var(--scheduler-default);
	color: #ffffff !important;
}

.dhx_cal_tab:not(.active) {
	color: var(--scheduler-default);
}

.dhx_cal_tab_segmented {
	border-left-style: none;
}

/* Today Button */
.dhx_cal_today_button {
	color: var(--scheduler-default);
	border: 1px solid var(--scheduler-default);
}

.dhx_cal_today_button:active {
	background-color: var(--scheduler-default);
	border: 1px solid var(--scheduler-default);
}

/* Event Text Styles */
.event-template {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.event-title {
	width: fit-content;
	font-size: 0.9em;
	font-weight: bold;
}

.event-pre {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	font-size: 0.9em;
	font-weight: bold;
	text-overflow: ellipsis;
	overflow: hidden;
}

.dhx_cal_event_line_content .event-pre {
	overflow: visible;
}

.event-subtitle {
	width: 100%;
	font-size: 0.7em;
	text-overflow: ellipsis;
	overflow: hidden;
}

.event-extra {
	width: 100%;
	font-size: 0.7em;
	color: #7a7a7a;
	display: -webkit-box;
	line-clamp: 4;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	text-wrap: auto;
	line-height: 1.65em;
}

.event-extra::before {
	background-color: #7a7a7a;
	height: 1px;
	content: '-';
	display: block;
}

.event-nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dhx_cal_event_line_content .event-template {
	display: flex;
	flex-direction: row;
	gap: 5px;
	align-items: center;
	justify-content: space-between;
}

.dhx_cal_event_line_content .event-pre {
	display: flex;
	flex-direction: row;
	gap: 5px;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.event-template.multi-day .event-subtitle,
.event-template.multi-day .event-extra {
	display: none;
}

.event-footer {
	position: absolute;
	bottom: 20px;
	font-size: 0.7em;
}

/* Hide Subtitle and Extra when in Month View Mode */
.dhx_cal_event_clear
	.dhx_cal_event_line_content
	.event-template
	.event-subtitle,
.dhx_cal_event_clear .dhx_cal_event_line_content .event-template .event-extra {
	display: none;
}

/* Apply UI foreground color ONLY in month view */
.dhx_cal_event_clear .event-pre span {
	color: inherit !important;
}

/* Week + Day view override → always black */
.dhx_cal_event_line .event-pre span,
.dhx_cal_event .dhx_body .event-pre span {
	color: #000 !important;
}

/* Calendar Layout */
.calendar-main {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	height: 80vh;
}

#calendar,
.calendar-sidebar {
	height: 100% !important;
	width: 100%;
}

#calendar-selected-user {
	width: 100%;
}

/* Sidebar Styles */
.calendar-sidebar {
	text-align: center;
	background-color: #ededed;
	padding: 15px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	font-size: 12px;
	overflow: hidden;
	gap: 20px;
	max-width: 200px;
}

/* Zoom Controls */
.calendar-zoom {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 10px;
}

/* Slider Styles */
.calendar-zoom .slider-container {
	margin-top: 10px;
}

.calendar-zoom .slider-container input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	background: #fff;
	border-radius: 5px;
	outline: none;
	padding: 0;
	margin: 0;
}

/* Slider Thumb Styles */
.calendar-zoom .slider-container input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	background: var(--scheduler-default);
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.calendar-zoom .slider-container input::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: var(--scheduler-default);
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.calendar-zoom .slider-container input::-ms-thumb {
	width: 20px;
	height: 20px;
	background: var(--scheduler-default);
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Filter Styles */
.calendar-filters {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
	gap: 10px;
}

.calendar-filters label {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 0;
	cursor: pointer;
}

/* Icon Styles */
.fa-eye,
.fa-eye-slash {
	font-size: 20px;
	color: var(--scheduler-default);
}

.dhx_menu_icon.icon_copy {
	background-image: url('assets/icon_duplicate.png') !important;
}

/* Remove Default Icons */
.dhx_menu_icon.icon_edit::before,
.dhx_menu_icon.icon_details::before,
.dhx_menu_icon.icon_delete::before,
.dhx_menu_icon.icon_save::before,
.dhx_menu_icon.icon_cancel::before {
	content: none !important;
}

.dhx_cal_event .dhx_footer {
	background: url('assets/icon_drag.png') no-repeat center center !important;
	bottom: 10px;
}

/* Miscellaneous Styles */
.dhx_scale_hour {
	padding: 0;
}

.dhx_scale_holder_now,
.dhx_now {
	background: #f7f7f7 !important;
}

.dhx_cal_quick_info {
	width: auto !important;
}

.dhx_cal_quick_info .dhx_cal_qi_title,
.dhx_cal_quick_info .dhx_cal_qi_tcontrols {
	display: none;
}

.dhx_cal_quick_info .dhx_cal_qi_controls {
	padding: 0;
}

.blocked .dhx_month_body,
.blocked .dhx_month_head {
	background-color: #728ebd;
	color: white;
	opacity: 0.7;
}

.dhx_month_head a {
	color: black !important;
}

/* For Desktop View */
@media only screen and (min-width: 1024px) {
	.calendar-main {
		flex-direction: row;
	}

	.calendar-sidebar {
		max-width: 200px;
	}
}

/* For Tablet View */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	.calendar-main {
		flex-direction: row;
	}

	.calendar-sidebar {
		max-width: 180px;
	}

	.calendar-zoom {
		display: block;
	}
}

/* For Mobile View */
@media only screen and (max-device-width: 768px) {
	.dhx_cal_tab[name='day_tab'],
	.calendar-zoom {
		display: none;
	}

	.dhx_cal_next_button::before,
	.dhx_cal_prev_button::before {
		font-size: 16px;
	}

	.dhx_cal_date {
		font-size: 14px;
	}

	.calendar-main {
		flex-direction: column;
		gap: 10px;
	}

	.calendar-sidebar {
		max-width: 100%;
		gap: 10px;
		justify-content: flex-start;
		height: fit-content;
		padding: 10px;
	}

	.mobile-navigator-container {
		margin: 0;
	}

	#calendar {
		height: 70%;
	}

	.calendar-user-filter div:first-child,
	.calendar-filters div:first-child {
		display: none !important;
	}

	.calendar-filters div:last-child {
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 10px;
	}

	.dhx_cal_navbar_row {
		width: fit-content !important;
		padding: 0 !important;
	}

	.dhx_cal_navline {
		flex-direction: row;
		padding: 0 !important;
		row-gap: 0 !important;
	}
}