/* Drag-and-drop reordering of resource (location) headers in TimegridCalendar.
   Only active when the calendar is rendered with resourceReorderable={true}. */

.tg-root.tg-reorderable [data-resource-id] {
	cursor: grab;
}

/* Drag affordance icon injected into each resource header (matches the
   fa-sort handle used on the event tickets list). Only present while
   reordering is enabled. */
.tg-root.tg-reorderable .tg-reorder-handle {
	margin-left: 6px;
	margin-right: 6px;
	color: var(--iu-text-muted, #94A3B8);
	font-size: 14px;
	cursor: grab;
	user-select: none;
}

.tg-root.tg-reorderable [data-resource-id]:hover .tg-reorder-handle {
	color: var(--iu-text-secondary, #334155);
}

/* Timeline rows: .fc-cell-text carries its own 4px left padding, which would
   make the arrows->text gap wider than the row-start->arrows gap. Drop it so
   the handle's own even margins define both gaps. */
.tg-root.tg-reorderable .fc-resource-area tr[data-resource-id] .fc-cell-text {
	padding-left: 0;
}

.tg-root.tg-reorder-dragging .tg-reorder-handle {
	cursor: grabbing;
}

.tg-root.tg-reorder-dragging,
.tg-root.tg-reorder-dragging [data-resource-id] {
	cursor: grabbing !important;
	user-select: none;
}

/* Header currently being dragged */
.tg-root.tg-reorder-dragging [data-resource-id].tg-reorder-source {
	opacity: 0.35;
}

/* Floating ghost that follows the pointer */
.tg-reorder-ghost {
	position: fixed;
	z-index: 100000;
	pointer-events: none;
	padding: 4px 10px;
	border-radius: 6px;
	background: #0EA5E9;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4);
	white-space: nowrap;
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Insertion indicator line drawn between headers */
.tg-reorder-indicator {
	position: fixed;
	z-index: 99999;
	pointer-events: none;
	background: #0EA5E9;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
	border-radius: 2px;
}

.tg-reorder-indicator.tg-reorder-indicator-vertical {
	width: 3px;
}

.tg-reorder-indicator.tg-reorder-indicator-horizontal {
	height: 3px;
}
