/* Define the variables if not already defined elsewhere */
:root {
	--lead-card-height: 280px;
	--lead-header-height: 37px;
	--lead-spacing: 3rem;
}

html,
body {
	height: 100%;
}

/* REMOVES THE SEARCH BOX FROM THE DATATABLES */
.dt-search {
	display: none;
}

/* AVATAR SELECT */
.filter-container {
	display: flex;
	flex-direction: row !important; /* Switch from row-reverse to row */
	justify-content: start !important;
}

.filter-container .avatar {
	display: inline-flex;
	margin-left: -2px;
	border-radius: 50%;
	transition: transform 0.1s;
	cursor: pointer;
	user-select: none;
}

.avatar {
	display: inline-flex;
	border-radius: 50%;
	cursor: pointer;
	user-select: none;
}

.relative-loader {
	right: 28px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

tr.htmx-swapping td {
	opacity: 0 !important;
	transition: opacity 1s ease-out !important;
}

/* SORTABLE HEADER */
.sortable-header {
	position: relative;
	cursor: pointer;
	user-select: none;
}

.sortable-header span:last-child {
	margin-left: 0.3rem;
	display: inline-flex;
	flex-direction: column;
	line-height: 0.7; /* Increased from 0.5 to create more gap */
	gap: 2px; /* Explicit gap between arrows */
}

.sortable-header span::before,
.sortable-header span::after {
	position: relative;
	display: block; /* Changed from inline-block to block */
	font-size: 0.7em;
	color: var(--bs-body-color);
}

.sortable-header span::before {
	content: "▲";
}

.sortable-header span::after {
	content: "▼";
}

.sortable-header[data-sort-dir="asc"] span::after {
	content: "";
}

.sortable-header[data-sort-dir="desc"] span::before {
	content: "";
}

.spinner-border-xs {
	width: 0.8rem;
	height: 0.8rem;
	border-width: 0.1rem;
}

.spinner-border-md {
	width: 1rem;
	height: 1rem;
	border-width: 0.1rem;
}

.kanban-items-container.no-drag {
	pointer-events: none;
	cursor: not-allowed;
	opacity: 0.7;
}

.border-radius-0 {
	border-radius: 0 !important;
}

@keyframes shake {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(5deg);
	}
	50% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(-5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

.shake-animation {
	animation: shake 0.15s infinite !important;
}

.parent-wrapper.label-1,
.parent-wrapper.label-1 * {
	position: relative;
	z-index: 1056 !important;
}

.subtask-input-height {
	height: 31px;
	max-height: 31px;
	min-height: 31px;
}

.underline-on-hover:hover {
	text-decoration: underline;
}

/* New styles for left-aligned arrow */
.accordion-button {
	flex-direction: row-reverse;
	justify-content: flex-end;
	padding-left: 1.25rem;
}

.accordion-button::after {
	margin-right: 1rem;
	margin-left: 0;
}

.avatar {
	position: relative;
	z-index: 1;
	transition: z-index 0s linear 0s;
}

.avatar:hover {
	z-index: 10;
}

.flatpickr-monthSelect-months {
	grid-template-columns: repeat(3, 1fr) !important;
	display: grid !important;
}

.flatpickr-monthSelect-month {
	grid-column: span 1 !important;
	min-width: 80px !important;
	color: #9fa6bc !important;
	border: 0 !important;
}

.flatpickr-monthSelect-month.selected {
	color: #fff !important;
	background-color: var(--phoenix-primary) !important;
}

.flatpickr-monthSelect-month:hover:not(.selected) {
	background-color: var(--phoenix-flatpickr-calendar-day-hover-bg) !important;
	border: 0 !important;
}

.htmx-processing {
	pointer-events: none;
}

/* Common styles for loading indicator elements only (not the buttons) */
div[data-loading-indicator] {
	display: none;
	position: absolute;
	inset: 0;
}

/* Only affects the specific loading indicator that has htmx-request class */
div[data-loading-indicator].htmx-request {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Only affects the button containing the specific loading indicator with htmx-request */
button:has(div[data-loading-indicator].htmx-request) {
	position: relative;
}

/* Only affects the button text of the specific button with active loading indicator */
button:has(div[data-loading-indicator].htmx-request) .button-text {
	visibility: hidden;
}