/* Reservations Calendar Widget */

/* Hide Vue elements until compiled to prevent FOUC */
[v-cloak] {
	display: none !important;
}

.vx-reservations-calendar, .vx-reservation-popup-content {
	/* Base colors */
	--vx-rescal-primary: #6366f1;
	--vx-rescal-border: #e5e7eb;
	--vx-rescal-bg: #ffffff;
	--vx-rescal-bg-alt: #f8fafc;
	--vx-rescal-text: #0f172a;
	--vx-rescal-text-muted: #64748b;
	--vx-rescal-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--vx-rescal-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	
	/* Simplified action-based color scheme */
	--vx-rescal-pickup: #10b981;      /* Emerald - car going out (pickup/handover) */
	--vx-rescal-dropoff: #6366f1;     /* Indigo - car coming back (dropoff/return) */
	--vx-rescal-alert: #f59e0b;       /* Amber - needs attention/cash payment */
	--vx-rescal-ok: #10b981;          /* Green - approved/all good */
	--vx-rescal-muted: #94a3b8;       /* Slate - middle days (no action) */

	/* Legacy support - map old variables to new */
	--vx-rescal-handover-bg: var(--vx-rescal-pickup);
	--vx-rescal-handover-border: var(--vx-rescal-pickup);
	--vx-rescal-return-bg: var(--vx-rescal-dropoff);
	--vx-rescal-return-border: var(--vx-rescal-dropoff);
	--vx-rescal-single-bg: var(--vx-rescal-pickup);
	--vx-rescal-single-border: var(--vx-rescal-pickup);
	--vx-rescal-payment-offline: var(--vx-rescal-alert);
	--vx-rescal-payment-online: transparent; /* No indicator for online (default) */
	--vx-rescal-status-approved: var(--vx-rescal-ok);
	--vx-rescal-status-not-approved: var(--vx-rescal-alert);

	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Header */
.vx-rescal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
}

.vx-rescal-title h1 {
	margin: 0 0 5px 0;
	font-size: 24px;
	font-weight: 600;
	color: var(--vx-rescal-text);
}

.vx-rescal-title p {
	margin: 0;
	font-size: 14px;
	color: var(--vx-rescal-text-muted);
}

/* View Toggle */
.vx-view-toggle {
	display: flex;
	gap: 5px;
	background: var(--vx-rescal-bg-alt);
	padding: 4px;
	border-radius: 8px;
}

.vx-view-toggle button {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: none;
	background: transparent;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--vx-rescal-text-muted);
	cursor: pointer;
	transition: all 0.2s ease;
}

.vx-view-toggle button svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.vx-view-toggle button:hover {
	color: var(--vx-rescal-text);
	background: var(--vx-rescal-bg);
}

.vx-view-toggle button.active {
	background: linear-gradient(135deg, var(--vx-rescal-primary), #8b5cf6);
	color: white;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
	transform: translateY(-1px);
}

/* Filters */
.vx-rescal-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.vx-cal-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-right: auto;
}

.vx-today-btn {
	padding: 8px 16px;
	border: 1px solid var(--vx-rescal-border);
	background: var(--vx-rescal-bg);
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--vx-rescal-text);
	cursor: pointer;
	transition: all 0.2s ease;
}

.vx-today-btn:hover {
	background: var(--vx-rescal-bg-alt);
	border-color: var(--vx-rescal-primary);
}

.vx-nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--vx-rescal-border);
	background: var(--vx-rescal-bg);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.vx-nav-btn svg {
	width: 18px;
	height: 18px;
	fill: var(--vx-rescal-text-muted);
}

.vx-nav-btn:hover {
	background: linear-gradient(135deg, var(--vx-rescal-primary), #8b5cf6);
	border-color: var(--vx-rescal-primary);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
}

.vx-nav-btn:hover svg {
	fill: white;
}

.vx-current-period {
	font-size: 16px;
	font-weight: 600;
	color: var(--vx-rescal-text);
	margin-left: 10px;
}

/* Filter Dropdowns */
.vx-filter-dropdowns {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.vx-filter-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.vx-filter-select select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 10px 36px 10px 14px;
	border: 1px solid var(--vx-rescal-border);
	border-radius: 8px;
	background: var(--vx-rescal-bg);
	font-size: 13px;
	font-weight: 500;
	color: var(--vx-rescal-text);
	cursor: pointer;
	min-width: 140px;
	transition: all 0.2s ease;
}

.vx-filter-select select:hover {
	border-color: var(--vx-rescal-primary);
}

.vx-filter-select select:focus {
	outline: none;
	border-color: var(--vx-rescal-primary);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.vx-filter-select svg {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	fill: var(--vx-rescal-text-muted);
	pointer-events: none;
}

/* Calendar Container */
.vx-cal-container {
	position: relative;
	min-height: 400px;
}

.vx-cal-container.vx-loading {
	opacity: 0.6;
	pointer-events: none;
}

.vx-cal-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

/* Day View */
.vx-cal-day-view {
	border: 1px solid var(--vx-rescal-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--vx-rescal-bg);
}

.vx-cal-day-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	background: var(--vx-rescal-bg-alt);
	border-bottom: 1px solid var(--vx-rescal-border);
}

.vx-cal-day-header .vx-day-name {
	font-size: 14px;
	color: var(--vx-rescal-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.vx-cal-day-header .vx-day-date {
	font-size: 20px;
	font-weight: 600;
	color: var(--vx-rescal-text);
	margin-top: 5px;
}

.vx-cal-day-content {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-height: 600px;
	overflow-y: auto;
}

/* Reservation Card - Redesigned with clear hierarchy */
.vx-reservation-card {
	border: 1px solid var(--vx-rescal-border);
	border-radius: 8px;
	padding: 16px;
	background: var(--vx-rescal-bg);
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Handoff/Pickup day - Background tint + icon on left */
.vx-reservation-card.is-start-day,
.vx-reservation-card.is-single-day {
	background: color-mix(in srgb, var(--vx-rescal-pickup) 8%, var(--vx-rescal-bg));
}

/* Dropoff/Return day - Background tint */
.vx-reservation-card.is-end-day {
	background: color-mix(in srgb, var(--vx-rescal-dropoff) 8%, var(--vx-rescal-bg));
}

/* Not approved - Dashed border in warning color */
.vx-reservation-card.is-not-approved {
	border: 2px dashed var(--vx-rescal-alert);
	border-radius: 8px;
}

.vx-reservation-card:hover {
	box-shadow: var(--vx-rescal-shadow);
	transform: translateY(-2px);
}

.vx-reservation-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 10px;
}

.vx-reservation-dates {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--vx-rescal-text);
	flex-wrap: wrap;
}

/* Action type icon (pickup/dropoff) - on the LEFT */
.vx-action-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
}

.vx-action-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Pickup icon - green */
.vx-reservation-card.is-start-day .vx-action-icon,
.vx-reservation-card.is-single-day .vx-action-icon {
	color: var(--vx-rescal-pickup);
}

.vx-reservation-card.is-start-day .vx-action-icon svg,
.vx-reservation-card.is-single-day .vx-action-icon svg {
	transform: rotate(-90deg);
}

/* Dropoff icon - indigo */
.vx-reservation-card.is-end-day .vx-action-icon {
	color: var(--vx-rescal-dropoff);
}

.vx-date-separator {
	color: var(--vx-rescal-text-muted);
	font-weight: 400;
	margin: 0 4px;
}

/* Payment method icon - only on handoff/pickup day, on the LEFT */
.vx-payment-method-icon {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	flex-shrink: 0;
}

.vx-payment-method-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.vx-payment-method-icon.offline {
	color: var(--vx-rescal-alert);
}

/* Not approved status icon - on the RIGHT */
.vx-not-approved-icon {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(245, 158, 11, 0.15);
	border-radius: 4px;
	flex-shrink: 0;
}

.vx-not-approved-icon svg {
	width: 18px;
	height: 18px;
	fill: var(--vx-rescal-alert);
}

/* Hide indicators that are not needed */
.vx-reservation-indicators {
	display: none;
}

/* Hide text badges in calendar views, but show in modal */
.vx-reservation-card .vx-status-badge,
.vx-reservation-mini .vx-status-badge,
.vx-reservation-bar .vx-status-badge {
	display: none;
}

/* Show badges in popup */
.vx-reservation-popup-content .vx-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.vx-reservation-popup-content .vx-status-badge.vx-status-completed,
.vx-reservation-popup-content .vx-status-badge.vx-status-active {
	background: var(--vx-rescal-ok);
	color: white;
	box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.vx-reservation-popup-content .vx-status-badge.vx-status-pending_approval,
.vx-reservation-popup-content .vx-status-badge.vx-status-pending_payment {
	background: var(--vx-rescal-alert);
	color: white;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.vx-reservation-popup-content .vx-status-badge.vx-paid-online {
	background: var(--vx-rescal-primary);
	color: white;
	box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);
}

.vx-reservation-popup-content .vx-status-badge.vx-paid-offline {
	background: var(--vx-rescal-alert);
	color: white;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.vx-reservation-body {
	margin-bottom: 14px;
}

.vx-reservation-details {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vx-detail-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--vx-rescal-text-muted);
	line-height: 1.5;
}

.vx-detail-row svg {
	width: 18px;
	height: 18px;
	fill: var(--vx-rescal-text-muted);
	flex-shrink: 0;
	opacity: 0.7;
}

.vx-detail-row.vx-post-title {
	color: var(--vx-rescal-text);
	font-weight: 700;
	font-size: 16px;
}

.vx-detail-row.vx-post-title svg {
	fill: var(--vx-rescal-primary);
	opacity: 1;
}

.vx-detail-row.vx-customer {
	font-weight: 500;
	color: var(--vx-rescal-text);
}

.vx-detail-row.vx-customer svg {
	fill: var(--vx-rescal-primary);
	opacity: 1;
}

.vx-detail-row.vx-phone {
	font-weight: 500;
	color: var(--vx-rescal-text);
}

.vx-detail-row.vx-phone svg {
	fill: var(--vx-rescal-ok);
	opacity: 1;
}

.vx-detail-row.vx-duration {
	font-weight: 500;
	color: var(--vx-rescal-text-muted);
}

.vx-detail-row.vx-time {
	font-weight: 600;
	color: var(--vx-rescal-primary);
}

.vx-detail-row.vx-time svg {
	fill: var(--vx-rescal-primary);
	opacity: 1;
}

.vx-detail-row.vx-amount {
	color: var(--vx-rescal-ok);
	font-weight: 700;
	font-size: 18px;
}

.vx-detail-row.vx-amount svg {
	fill: var(--vx-rescal-ok);
	opacity: 1;
}

.vx-reservation-order {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--vx-rescal-border);
}

.vx-order-id {
	font-size: 12px;
	color: var(--vx-rescal-text-muted);
	background: linear-gradient(135deg, var(--vx-rescal-bg-alt), var(--vx-rescal-bg));
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 600;
	letter-spacing: 0.3px;
	border: 1px solid var(--vx-rescal-border);
}

/* Week View */
.vx-cal-week-view {
	border: 1px solid var(--vx-rescal-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--vx-rescal-bg);
}

.vx-cal-week-header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	border-bottom: 1px solid var(--vx-rescal-border);
}

.vx-cal-week-day-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px 10px;
	background: var(--vx-rescal-bg-alt);
	border-right: 1px solid var(--vx-rescal-border);
}

.vx-cal-week-day-header:last-child {
	border-right: none;
}

.vx-cal-week-day-header.is-today {
	background: var(--vx-rescal-primary);
}

.vx-cal-week-day-header.is-today .vx-weekday,
.vx-cal-week-day-header.is-today .vx-date {
	color: white;
}

.vx-cal-week-day-header .vx-weekday {
	font-size: 12px;
	color: var(--vx-rescal-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.vx-cal-week-day-header .vx-date {
	font-size: 20px;
	font-weight: 600;
	color: var(--vx-rescal-text);
	margin-top: 4px;
}

.vx-cal-week-body {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	min-height: 400px;
}

.vx-cal-week-day {
	border-right: 1px solid var(--vx-rescal-border);
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 200px;
	overflow-y: auto;
}

.vx-cal-week-day:last-child {
	border-right: none;
}

.vx-cal-week-day.is-today {
	background: rgba(59, 130, 246, 0.05);
}

/* Mini Reservation Card (Week View) - Simplified */
.vx-reservation-mini {
	padding: 10px 12px;
	border-radius: 6px;
	background: var(--vx-rescal-bg);
	border: 1px solid var(--vx-rescal-border);
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	position: relative;
}

/* Handoff/Pickup day - Background tint */
.vx-reservation-mini.is-start-day,
.vx-reservation-mini.is-single-day {
	background: color-mix(in srgb, var(--vx-rescal-pickup) 8%, var(--vx-rescal-bg));
}

/* Dropoff/Return day - Background tint */
.vx-reservation-mini.is-end-day {
	background: color-mix(in srgb, var(--vx-rescal-dropoff) 8%, var(--vx-rescal-bg));
}

/* Not approved - Dashed border */
.vx-reservation-mini.is-not-approved {
	border: 2px dashed var(--vx-rescal-alert);
}

.vx-reservation-mini.is-middle-day {
	display: none; /* Hide in week view, use minimal bar instead */
}

.vx-reservation-mini:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

/* Not approved icon for mini cards */
.vx-reservation-mini .vx-not-approved-icon {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
}

.vx-reservation-mini .vx-not-approved-icon svg {
	width: 14px;
	height: 14px;
}

/* Offline payment indicator for mini cards - only on pickup/handover days */
.vx-reservation-mini.is-offline-payment {
	border: 2px solid var(--vx-rescal-alert);
}

.vx-mini-offline-icon {
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(245, 158, 11, 0.15);
	border-radius: 4px;
}

.vx-mini-offline-icon svg {
	width: 14px;
	height: 14px;
	fill: var(--vx-rescal-alert);
}


.vx-mini-time {
	font-size: 11px;
	color: var(--vx-rescal-primary);
	font-weight: 700;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.vx-mini-time::before {
	content: '🕐';
	font-size: 10px;
}

.vx-mini-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--vx-rescal-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 4px;
	line-height: 1.3;
}

.vx-mini-customer {
	font-size: 12px;
	color: var(--vx-rescal-text-muted);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.vx-mini-badges {
	margin-top: 4px;
}

/* Status dots removed - using icons instead */
.vx-reservation-mini .vx-status-dot {
	display: none;
}

.vx-more-reservations {
	font-size: 12px;
	color: var(--vx-rescal-primary);
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	padding: 8px;
	border-radius: 6px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
	border: 1px dashed var(--vx-rescal-primary);
	transition: all 0.2s ease;
}

.vx-more-reservations:hover {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
	border-color: var(--vx-rescal-primary);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

/* Day position badges removed - using icons and left border accent instead */

/* Day position badges - now hidden, using icons instead */
.vx-day-position-badge {
	display: none;
}

/* Payment borders already handled above for single day */

/* Middle days - Minimal thin bar design */
.vx-reservation-card.is-middle-day {
	display: none; /* Hide full cards for middle days in day view */
}

/* Middle day minimal bar (shown in week/month views) */
.vx-reservation-middle-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	background: var(--vx-rescal-bg-alt);
	border-left: 2px solid var(--vx-rescal-muted);
	border-radius: 4px;
	font-size: 12px;
	color: var(--vx-rescal-text-muted);
	margin-bottom: 4px;
	cursor: pointer;
}

.vx-reservation-middle-bar .vx-bar-vehicle {
	font-weight: 500;
	color: var(--vx-rescal-text);
}

/* Legacy dots removed - using bars with left border instead */
.vx-reservation-dot {
	display: none;
}

.vx-empty-day {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 80px;
}

.vx-empty-indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vx-rescal-border);
}

/* Month View */
.vx-cal-month-view {
	border: 1px solid var(--vx-rescal-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--vx-rescal-bg);
}

.vx-cal-month-header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	border-bottom: 1px solid var(--vx-rescal-border);
}

.vx-cal-month-day-header {
	padding: 12px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--vx-rescal-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: var(--vx-rescal-bg-alt);
	border-right: 1px solid var(--vx-rescal-border);
}

.vx-cal-month-day-header:last-child {
	border-right: none;
}

.vx-cal-month-body {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.vx-cal-month-day {
	aspect-ratio: 1;
	min-height: 100px;
	border-right: 1px solid var(--vx-rescal-border);
	border-bottom: 1px solid var(--vx-rescal-border);
	padding: 8px;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.vx-cal-month-day:nth-child(7n) {
	border-right: none;
}

.vx-cal-month-day:nth-last-child(-n+7) {
	border-bottom: none;
}

.vx-cal-month-day:hover {
	background: var(--vx-rescal-bg-alt);
}

.vx-cal-month-day.is-other-month {
	background: var(--vx-rescal-bg-alt);
	opacity: 0.5;
}

.vx-cal-month-day.is-today .vx-month-day-num {
	background: linear-gradient(135deg, var(--vx-rescal-primary), #8b5cf6);
	color: white;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
	font-weight: 700;
}

.vx-cal-month-day.has-reservations {
	cursor: pointer;
}

.vx-month-day-num {
	font-size: 14px;
	font-weight: 500;
	color: var(--vx-rescal-text);
}

.vx-month-day-dots {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: auto;
	max-height: 60px;
	overflow: hidden;
}

/* Mini bars for month view - Simplified */
.vx-reservation-bar {
	width: 100%;
	height: 16px;
	border-radius: 3px;
	background: var(--vx-rescal-bg-alt);
	padding: 2px 6px;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 9px;
	font-weight: 500;
	color: var(--vx-rescal-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	border-left: 3px solid var(--vx-rescal-border);
}

.vx-reservation-bar:hover {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	z-index: 10;
}

/* Action type left border */
.vx-reservation-bar.is-start,
.vx-reservation-bar.is-single {
	border-left-color: var(--vx-rescal-pickup);
}

.vx-reservation-bar.is-end {
	border-left-color: var(--vx-rescal-dropoff);
}

/* Middle days - minimal */
.vx-reservation-bar.is-middle {
	border-left-color: var(--vx-rescal-muted);
	opacity: 0.6;
	background: var(--vx-rescal-bg-alt);
}

/* Status indicator - small icon instead of dot */
.vx-reservation-bar::after {
	content: '';
	position: absolute;
	top: 2px;
	right: 4px;
	width: 10px;
	height: 10px;
	display: none; /* Will be replaced with icon in template */
}

/* Offline payment indicator for month bars - only on pickup/handover days */
.vx-reservation-bar.offline-payment {
	border: 2px solid var(--vx-rescal-alert);
	border-left-width: 3px;
}

.vx-bar-offline-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	margin-right: 4px;
	flex-shrink: 0;
}

.vx-bar-offline-icon svg {
	width: 10px;
	height: 10px;
	fill: var(--vx-rescal-alert);
}


.vx-more-dots {
	font-size: 10px;
	font-weight: 600;
	color: var(--vx-rescal-primary);
	text-align: center;
	padding: 4px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
	border-radius: 4px;
	border: 1px dashed var(--vx-rescal-primary);
	cursor: pointer;
	transition: all 0.2s ease;
}

.vx-more-dots:hover {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
	transform: scale(1.05);
}

/* No Reservations */
.vx-no-reservations {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	color: var(--vx-rescal-text-muted);
}

.vx-no-reservations svg {
	width: 48px;
	height: 48px;
	fill: var(--vx-rescal-text-muted);
	opacity: 0.5;
	margin-bottom: 15px;
}

.vx-no-reservations p {
	font-size: 14px;
	margin: 0;
}

/* Modal */
.vx-reservation-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 20px;
}

.vx-reservation-modal {
	background: var(--vx-rescal-bg);
	border-radius: 12px;
	max-width: 500px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.vx-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid var(--vx-rescal-border);
}

.vx-modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--vx-rescal-text);
}

.vx-modal-close {
	width: 32px;
	height: 32px;
	border: none;
	background: var(--vx-rescal-bg-alt);
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vx-rescal-text-muted);
	transition: all 0.2s ease;
}

.vx-modal-close:hover {
	background: var(--vx-rescal-danger);
	color: white;
}

.vx-modal-body {
	padding: 20px;
}

.vx-modal-section {
	margin-bottom: 25px;
}

.vx-modal-section:last-child {
	margin-bottom: 0;
}

.vx-modal-section h4 {
	margin: 0 0 15px 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--vx-rescal-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.vx-booking-period {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--vx-rescal-bg-alt);
	padding: 20px;
	border-radius: 10px;
}

.vx-period-start,
.vx-period-end {
	flex: 1;
}

.vx-period-label {
	display: block;
	font-size: 11px;
	color: var(--vx-rescal-text-muted);
	text-transform: uppercase;
	margin-bottom: 5px;
}

.vx-period-date {
	font-size: 15px;
	font-weight: 600;
	color: var(--vx-rescal-text);
}

.vx-period-arrow {
	font-size: 24px;
	color: var(--vx-rescal-text-muted);
}

.vx-modal-details {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vx-modal-detail {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--vx-rescal-border);
}

.vx-modal-detail:last-child {
	border-bottom: none;
}

.vx-detail-label {
	font-size: 13px;
	color: var(--vx-rescal-text-muted);
}

.vx-detail-value {
	font-size: 14px;
	font-weight: 500;
	color: var(--vx-rescal-text);
}

.vx-detail-value.vx-amount {
	color: var(--vx-rescal-ok);
	font-size: 16px;
}

.vx-modal-actions {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}

.vx-modal-actions .ts-btn {
	padding: 12px 24px;
}

/* Reservation popup wrapper styling */
.ts-reservation-popup .ts-field-popup {
	/* max-width controlled by Elementor settings */
	width: 100%;
}

/* Voxel popup content styling */
.vx-reservation-popup-content {
	padding: 20px;
}

/* Details list styling for popup */
.vx-reservation-popup-content .ts-customer-details {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vx-reservation-popup-content .ts-customer-details li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--vx-rescal-border, #e5e7eb);
	gap: 15px;
}

.vx-reservation-popup-content .ts-customer-details li:last-child {
	border-bottom: none;
}

.vx-reservation-popup-content .ts-customer-details li.ts-total {
	margin-top: 5px;
	padding-top: 15px;
}

.vx-reservation-popup-content .ts-customer-details .ts-item-name {
	flex: 1;
}

.vx-reservation-popup-content .ts-customer-details .ts-item-name p {
	margin: 0;
	font-size: 14px;
	color: var(--vx-rescal-text-muted, #64748b);
}

.vx-reservation-popup-content .ts-customer-details .ts-item-price {
	text-align: right;
	flex-shrink: 0;
}

.vx-reservation-popup-content .ts-customer-details .ts-item-price p {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--vx-rescal-text, #0f172a);
}

.vx-reservation-popup-content .ts-customer-details li.ts-total .ts-item-price p {
	font-size: 16px;
	font-weight: 700;
	color: var(--vx-rescal-ok, #10b981);
}

.vx-popup-section {
	margin-bottom: 25px;
}

.vx-popup-section:last-child {
	margin-bottom: 0;
}

.vx-popup-section h4 {
	margin: 0 0 15px 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--vx-rescal-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.vx-popup-actions {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}

.vx-popup-actions .ts-btn {
	padding: 12px 24px;
}

.vx-reservation-popup-content .vx-popup-section h4 {
	margin: 0 0 15px 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--vx-rescal-text-muted, #64748b);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Booking period styling in popup */
.vx-reservation-popup-content .vx-booking-period {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--vx-rescal-bg-alt, #f8fafc);
	padding: 20px;
	border-radius: 10px;
}

.vx-reservation-popup-content .vx-period-start,
.vx-reservation-popup-content .vx-period-end {
	flex: 1;
}

.vx-reservation-popup-content .vx-period-label {
	display: block;
	font-size: 11px;
	color: var(--vx-rescal-text-muted, #64748b);
	text-transform: uppercase;
	margin-bottom: 5px;
}

.vx-reservation-popup-content .vx-period-date {
	font-size: 15px;
	font-weight: 600;
	color: var(--vx-rescal-text, #0f172a);
}

.vx-reservation-popup-content .vx-period-arrow {
	font-size: 24px;
	color: var(--vx-rescal-text-muted, #64748b);
}

/* Popup actions styling */
.vx-reservation-popup-content .vx-popup-actions {
	margin-top: 20px;
	display: flex;
	justify-content: stretch;
}

.vx-reservation-popup-content .vx-popup-actions .ts-btn {
	flex: 1;
	text-align: center;
	justify-content: center;
}

/* Exclude Days Feature */

/* Edit mode controls section */
.vx-exclude-mode-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vx-edit-actions {
	display: flex;
	gap: 8px;
}

/* Edit mode state - add user-select none to prevent text selection during drag */
.is-edit-mode {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

/* Excluded day styling */

/* Month view - excluded day cell */
.vx-cal-month-day.is-excluded {
	background: color-mix(in srgb, var(--vx-rescal-text-muted) 10%, var(--vx-rescal-bg));
	opacity: 0.7;
	position: relative;
}

.vx-cal-month-day.is-editable {
	cursor: pointer;
}

.vx-cal-month-day.is-editable:hover {
	background: color-mix(in srgb, var(--vx-rescal-primary) 10%, var(--vx-rescal-bg));
}

.vx-cal-month-day.is-excluded.is-editable:hover {
	opacity: 0.9;
}

.vx-excluded-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(100, 116, 139, 0.2);
	border-radius: 50%;
	pointer-events: none;
}

.vx-excluded-overlay svg {
	width: 24px;
	height: 24px;
	fill: var(--vx-rescal-text-muted);
}

/* Week view - excluded day cell */
.vx-cal-week-day.is-excluded {
	background: color-mix(in srgb, var(--vx-rescal-text-muted) 10%, var(--vx-rescal-bg));
	opacity: 0.7;
}

.vx-cal-week-day.is-editable {
	cursor: pointer;
}

.vx-cal-week-day.is-editable:hover {
	background: color-mix(in srgb, var(--vx-rescal-primary) 10%, var(--vx-rescal-bg));
}

.vx-cal-week-day.is-excluded.is-editable:hover {
	opacity: 0.9;
}

/* Excluded day card in week view */
.vx-excluded-day-card {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: color-mix(in srgb, var(--vx-rescal-text-muted) 15%, var(--vx-rescal-bg));
	border: 1px dashed var(--vx-rescal-text-muted);
	border-radius: 6px;
	opacity: 0.7;
}

.vx-excluded-day-card svg {
	width: 16px;
	height: 16px;
	fill: var(--vx-rescal-text-muted);
	flex-shrink: 0;
}

.vx-excluded-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--vx-rescal-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Day view - excluded day header */
.vx-cal-day-header.is-excluded {
	background: color-mix(in srgb, var(--vx-rescal-text-muted) 15%, var(--vx-rescal-bg-alt));
	opacity: 0.7;
	position: relative;
}

.vx-cal-day-header.is-editable {
	cursor: pointer;
}

.vx-cal-day-header.is-editable:hover {
	background: color-mix(in srgb, var(--vx-rescal-primary) 15%, var(--vx-rescal-bg-alt));
}

.vx-cal-day-header.is-excluded.is-editable:hover {
	opacity: 0.9;
}

.vx-cal-day-header .vx-excluded-overlay {
	top: 8px;
	right: 8px;
	left: auto;
	transform: none;
	width: 32px;
	height: 32px;
}

.vx-cal-day-header .vx-excluded-overlay svg {
	width: 20px;
	height: 20px;
}

/* Excluded day indicator in day view content */
.vx-excluded-day-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background: color-mix(in srgb, var(--vx-rescal-text-muted) 10%, var(--vx-rescal-bg));
	border: 2px dashed var(--vx-rescal-text-muted);
	border-radius: 8px;
	opacity: 0.7;
}

.vx-excluded-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(100, 116, 139, 0.15);
	border-radius: 50%;
	margin-bottom: 12px;
}

.vx-excluded-icon svg {
	width: 32px;
	height: 32px;
	fill: var(--vx-rescal-text-muted);
}

.vx-excluded-day-indicator .vx-excluded-label {
	font-size: 14px;
}

/* Conflict error message */
.vx-conflict-error {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: color-mix(in srgb, var(--vx-rescal-alert) 10%, var(--vx-rescal-bg));
	border: 1px solid var(--vx-rescal-alert);
	border-radius: 6px;
	color: var(--vx-rescal-alert);
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 15px;
}

.vx-conflict-error svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
	.vx-rescal-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.vx-view-toggle {
		width: 100%;
		justify-content: center;
	}

	.vx-rescal-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.vx-cal-nav {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	.vx-current-period {
		width: 100%;
		text-align: center;
		margin: 10px 0 0 0;
	}

	.vx-cal-week-body {
		grid-template-columns: 1fr;
	}

	.vx-cal-week-header {
		grid-template-columns: 1fr;
	}

	.vx-cal-week-day-header {
		flex-direction: row;
		justify-content: space-between;
	}

	.vx-cal-week-day {
		border-right: none;
		border-bottom: 1px solid var(--vx-rescal-border);
	}

	.vx-cal-month-day {
		aspect-ratio: auto;
		min-height: 60px;
	}

	.vx-booking-period {
		flex-direction: column;
		text-align: center;
	}

	.vx-period-arrow {
		transform: rotate(90deg);
	}

	/* Popup responsive */
	.vx-reservation-popup-content .vx-booking-period {
		flex-direction: column;
		text-align: center;
	}

	.vx-reservation-popup-content .vx-period-arrow {
		transform: rotate(90deg);
	}

	.vx-reservation-popup-content .ts-customer-details li {
		flex-wrap: wrap;
	}

	.vx-reservation-popup-content .ts-customer-details .ts-item-price {
		width: 100%;
		text-align: left;
		margin-top: 5px;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.vx-reservations-calendar, .vx-reservation-popup-content {
		--vx-rescal-border: #374151;
		--vx-rescal-bg: #1f2937;
		--vx-rescal-bg-alt: #111827;
		--vx-rescal-text: #f9fafb;
		--vx-rescal-text-muted: #9ca3af;
		--vx-rescal-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
		--vx-rescal-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
		/* Action colors remain vibrant in dark mode */
		--vx-rescal-pickup: #10b981;
		--vx-rescal-dropoff: #6366f1;
		--vx-rescal-alert: #f59e0b;
		--vx-rescal-ok: #10b981;
		--vx-rescal-muted: #64748b;
	}
	
	/* Adjust card borders for better contrast */
	.vx-reservation-card {
		border-color: #4b5563;
	}
	
	.vx-reservation-mini {
		border-color: #4b5563;
	}
}

/* ==========================================
   TODAY'S ACTIONS SECTION
   ========================================== */

.vx-todays-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	padding: 20px;
	background: linear-gradient(135deg, var(--vx-rescal-bg-alt), var(--vx-rescal-bg));
	border-radius: 12px;
	border: 1px solid var(--vx-rescal-border);
}

.vx-action-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vx-action-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--vx-rescal-border);
}

.vx-action-icon-wrap {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
}

.vx-action-icon-wrap svg {
	width: 18px;
	height: 18px;
	fill: white;
}

.vx-action-icon-wrap.pickup {
	background: var(--vx-rescal-pickup);
}

.vx-action-icon-wrap.return {
	background: var(--vx-rescal-dropoff);
}

.vx-action-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--vx-rescal-text);
	flex: 1;
}

.vx-action-count {
	background: var(--vx-rescal-primary);
	color: white;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
}

.vx-action-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vx-action-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 12px 16px;
	background: var(--vx-rescal-bg);
	border-radius: 8px;
	border: 1px solid var(--vx-rescal-border);
	cursor: pointer;
	transition: all 0.2s ease;
}

.vx-action-card:hover {
	box-shadow: var(--vx-rescal-shadow);
	transform: translateY(-2px);
}

.vx-action-card.pickup {
	border-left: 4px solid var(--vx-rescal-pickup);
}

.vx-action-card.return {
	border-left: 4px solid var(--vx-rescal-dropoff);
}

.vx-action-card.needs-attention {
	background: color-mix(in srgb, var(--vx-rescal-alert) 5%, var(--vx-rescal-bg));
}

.vx-action-card-main {
	flex: 1;
	min-width: 0;
}

.vx-action-vehicle {
	font-size: 14px;
	font-weight: 600;
	color: var(--vx-rescal-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 4px;
}

.vx-action-customer {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--vx-rescal-text-muted);
}

.vx-action-customer svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	flex-shrink: 0;
}

.vx-action-card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.vx-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.vx-badge svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.vx-badge.offline {
	background: color-mix(in srgb, var(--vx-rescal-alert) 15%, transparent);
	color: var(--vx-rescal-alert);
}

.vx-badge.pending {
	background: color-mix(in srgb, var(--vx-rescal-alert) 15%, transparent);
	color: var(--vx-rescal-alert);
}

.vx-action-amount {
	font-size: 14px;
	font-weight: 700;
	color: var(--vx-rescal-ok);
}

.vx-action-duration {
	font-size: 12px;
	color: var(--vx-rescal-text-muted);
}

/* ==========================================
   FLEET VIEW (Gantt-style)
   ========================================== */

.vx-fleet-view {
	border: 1px solid var(--vx-rescal-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--vx-rescal-bg);
}

.vx-fleet-header {
	display: flex;
	border-bottom: 2px solid var(--vx-rescal-border);
	background: var(--vx-rescal-bg-alt);
}

.vx-fleet-vehicle-col {
	width: 200px;
	min-width: 200px;
	padding: 15px;
	font-size: 12px;
	font-weight: 600;
	color: var(--vx-rescal-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-right: 1px solid var(--vx-rescal-border);
	display: flex;
	align-items: center;
}

.vx-fleet-timeline-header {
	flex: 1;
	display: flex;
}

.vx-fleet-day-header {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 5px;
	border-right: 1px solid var(--vx-rescal-border);
	min-width: 60px;
}

.vx-fleet-day-header:last-child {
	border-right: none;
}

.vx-fleet-day-header.is-today {
	background: var(--vx-rescal-primary);
}

.vx-fleet-day-header.is-today .vx-fleet-weekday,
.vx-fleet-day-header.is-today .vx-fleet-date {
	color: white;
}

.vx-fleet-day-header.is-weekend {
	background: color-mix(in srgb, var(--vx-rescal-border) 30%, var(--vx-rescal-bg-alt));
}

.vx-fleet-weekday {
	font-size: 11px;
	font-weight: 500;
	color: var(--vx-rescal-text-muted);
	text-transform: uppercase;
}

.vx-fleet-date {
	font-size: 16px;
	font-weight: 600;
	color: var(--vx-rescal-text);
}

.vx-fleet-body {
	max-height: 500px;
	overflow-y: auto;
}

.vx-fleet-row {
	display: flex;
	border-bottom: 1px solid var(--vx-rescal-border);
	min-height: 60px;
}

.vx-fleet-row:last-child {
	border-bottom: none;
}

.vx-fleet-row:hover {
	background: color-mix(in srgb, var(--vx-rescal-primary) 3%, var(--vx-rescal-bg));
}

.vx-fleet-vehicle-info {
	width: 200px;
	min-width: 200px;
	padding: 12px 15px;
	border-right: 1px solid var(--vx-rescal-border);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}

.vx-fleet-vehicle-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--vx-rescal-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vx-fleet-vehicle-stats {
	font-size: 12px;
}

.vx-fleet-booking-count {
	color: var(--vx-rescal-primary);
	font-weight: 500;
}

.vx-fleet-available {
	color: var(--vx-rescal-ok);
}

.vx-fleet-timeline {
	flex: 1;
	display: flex;
	position: relative;
	min-height: 50px;
}

.vx-fleet-cell {
	flex: 1;
	border-right: 1px solid var(--vx-rescal-border);
	min-width: 60px;
}

.vx-fleet-cell:last-child {
	border-right: none;
}

.vx-fleet-cell.is-today {
	background: color-mix(in srgb, var(--vx-rescal-primary) 8%, transparent);
}

.vx-fleet-cell.is-weekend {
	background: color-mix(in srgb, var(--vx-rescal-border) 20%, transparent);
}

.vx-fleet-cell.is-excluded {
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 5px,
		color-mix(in srgb, var(--vx-rescal-text-muted) 10%, transparent) 5px,
		color-mix(in srgb, var(--vx-rescal-text-muted) 10%, transparent) 10px
	);
}

.vx-fleet-booking-bar {
	position: absolute;
	top: 8px;
	bottom: 8px;
	border-radius: 6px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 1;
	overflow: hidden;
}

.vx-fleet-booking-bar:hover {
	z-index: 10;
	box-shadow: var(--vx-rescal-shadow);
	transform: scale(1.02);
}

.vx-fleet-booking-bar.is-confirmed {
	background: linear-gradient(135deg, var(--vx-rescal-pickup), color-mix(in srgb, var(--vx-rescal-pickup) 80%, var(--vx-rescal-dropoff)));
}

.vx-fleet-booking-bar.is-pending {
	background: linear-gradient(135deg, var(--vx-rescal-alert), color-mix(in srgb, var(--vx-rescal-alert) 80%, #ef4444));
	border: 2px dashed white;
}

.vx-fleet-booking-bar.is-offline {
	background: linear-gradient(135deg, var(--vx-rescal-alert), color-mix(in srgb, var(--vx-rescal-alert) 80%, #ef4444));
}

.vx-fleet-booking-customer {
	font-size: 12px;
	font-weight: 600;
	color: white;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vx-fleet-booking-badge {
	background: rgba(255, 255, 255, 0.3);
	color: white;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
	flex-shrink: 0;
}

.vx-fleet-empty {
	padding: 60px 20px;
	text-align: center;
}

.vx-fleet-empty svg {
	width: 48px;
	height: 48px;
	fill: var(--vx-rescal-text-muted);
	opacity: 0.5;
	margin-bottom: 15px;
}

.vx-fleet-empty p {
	font-size: 14px;
	color: var(--vx-rescal-text-muted);
	margin: 0;
}

/* ==========================================
   IMPROVED DAY VIEW WITH GROUPS
   ========================================== */

.vx-day-groups {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.vx-day-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vx-day-group-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--vx-rescal-border);
}

.vx-group-icon {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}

.vx-group-icon svg {
	width: 16px;
	height: 16px;
	fill: white;
}

.vx-group-icon.pickup {
	background: var(--vx-rescal-pickup);
}

.vx-group-icon.return {
	background: var(--vx-rescal-dropoff);
}

.vx-group-icon.in-use {
	background: var(--vx-rescal-muted);
}

.vx-group-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--vx-rescal-text);
	flex: 1;
}

.vx-group-count {
	background: var(--vx-rescal-bg-alt);
	color: var(--vx-rescal-text-muted);
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 20px;
	border: 1px solid var(--vx-rescal-border);
}

.vx-day-group-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Redesigned reservation cards for day view */
.vx-day-group .vx-reservation-card {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
}

.vx-day-group .vx-reservation-card.pickup {
	border-left: 4px solid var(--vx-rescal-pickup);
}

.vx-day-group .vx-reservation-card.return {
	border-left: 4px solid var(--vx-rescal-dropoff);
}

.vx-card-left {
	flex: 1;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vx-card-vehicle {
	font-size: 16px;
	font-weight: 700;
	color: var(--vx-rescal-text);
}

.vx-card-customer,
.vx-card-phone {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--vx-rescal-text-muted);
}

.vx-card-customer svg,
.vx-card-phone svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	flex-shrink: 0;
}

.vx-card-phone {
	color: var(--vx-rescal-ok);
}

.vx-card-right {
	padding: 14px 16px;
	background: var(--vx-rescal-bg-alt);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
	min-width: 140px;
}

.vx-card-dates {
	font-size: 12px;
	color: var(--vx-rescal-text-muted);
}

.vx-card-badges {
	display: flex;
	gap: 6px;
}

.vx-card-amount {
	font-size: 18px;
	font-weight: 700;
	color: var(--vx-rescal-ok);
}

.vx-card-duration {
	font-size: 12px;
	color: var(--vx-rescal-text-muted);
}

/* In-use list (middle days) */
.vx-day-group-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vx-in-use-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--vx-rescal-bg-alt);
	border-radius: 6px;
	border-left: 3px solid var(--vx-rescal-muted);
	cursor: pointer;
	transition: all 0.2s ease;
}

.vx-in-use-item:hover {
	background: var(--vx-rescal-bg);
	box-shadow: var(--vx-rescal-shadow);
}

.vx-in-use-vehicle {
	font-size: 13px;
	font-weight: 600;
	color: var(--vx-rescal-text);
}

.vx-in-use-customer {
	font-size: 13px;
	color: var(--vx-rescal-text-muted);
	flex: 1;
}

.vx-in-use-until {
	font-size: 12px;
	color: var(--vx-rescal-text-muted);
}

/* ==========================================
   IMPROVED WEEK VIEW MINI CARDS
   ========================================== */

.vx-mini-type {
	margin-bottom: 6px;
}

.vx-type-badge {
	display: inline-block;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 2px 6px;
	border-radius: 3px;
}

.vx-type-badge.pickup {
	background: var(--vx-rescal-pickup);
	color: white;
}

.vx-type-badge.return {
	background: var(--vx-rescal-dropoff);
	color: white;
}

.vx-type-badge.single {
	background: var(--vx-rescal-primary);
	color: white;
}

.vx-mini-badges {
	display: flex;
	gap: 4px;
	margin-top: 6px;
}

.vx-mini-badge {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}

.vx-mini-badge svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.vx-mini-badge.pending {
	background: color-mix(in srgb, var(--vx-rescal-alert) 15%, transparent);
	color: var(--vx-rescal-alert);
}

.vx-mini-badge.offline {
	background: color-mix(in srgb, var(--vx-rescal-alert) 15%, transparent);
	color: var(--vx-rescal-alert);
}

/* ==========================================
   IMPROVED MONTH VIEW
   ========================================== */

.vx-bar-type {
	font-size: 8px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1px 4px;
	border-radius: 2px;
	margin-right: 4px;
	flex-shrink: 0;
}

.vx-bar-type.pickup {
	background: var(--vx-rescal-pickup);
	color: white;
}

.vx-bar-type.return {
	background: var(--vx-rescal-dropoff);
	color: white;
}

/* ==========================================
   POPUP IMPROVEMENTS
   ========================================== */

.vx-popup-header {
	margin-bottom: 20px;
}

.vx-popup-type {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}

.vx-popup-type svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.vx-popup-type.pickup {
	background: color-mix(in srgb, var(--vx-rescal-pickup) 15%, var(--vx-rescal-bg));
	color: var(--vx-rescal-pickup);
}

.vx-popup-type.return {
	background: color-mix(in srgb, var(--vx-rescal-dropoff) 15%, var(--vx-rescal-bg));
	color: var(--vx-rescal-dropoff);
}

/* ==========================================
   RESPONSIVE FLEET VIEW
   ========================================== */

@media (max-width: 768px) {
	.vx-todays-actions {
		grid-template-columns: 1fr;
	}

	.vx-fleet-vehicle-col {
		width: 120px;
		min-width: 120px;
		padding: 10px;
	}

	.vx-fleet-vehicle-info {
		width: 120px;
		min-width: 120px;
		padding: 10px;
	}

	.vx-fleet-vehicle-name {
		font-size: 12px;
	}

	.vx-fleet-cell {
		min-width: 40px;
	}

	.vx-fleet-day-header {
		min-width: 40px;
		padding: 8px 2px;
	}

	.vx-fleet-weekday {
		font-size: 9px;
	}

	.vx-fleet-date {
		font-size: 12px;
	}

	.vx-day-group .vx-reservation-card {
		flex-direction: column;
	}

	.vx-card-right {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		min-width: 100%;
	}
}

/* ==========================================
   AVAILABILITY PANEL (NEW)
   ========================================== */

/* Availability button in filters */
.vx-availability-controls {
	display: flex;
	align-items: center;
}

.vx-availability-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: linear-gradient(135deg, var(--vx-rescal-primary), #8b5cf6);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.vx-availability-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.vx-availability-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Panel overlay */
.vx-availability-panel-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
}

/* Panel container */
.vx-availability-panel {
	background: var(--vx-rescal-bg);
	border-radius: 16px;
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	animation: vx-panel-slide-in 0.3s ease-out;
}

@keyframes vx-panel-slide-in {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Panel header */
.vx-avail-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 24px;
	border-bottom: 1px solid var(--vx-rescal-border);
	background: linear-gradient(135deg, var(--vx-rescal-bg-alt), var(--vx-rescal-bg));
}

.vx-avail-title h2 {
	margin: 0 0 6px 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--vx-rescal-text);
	display: flex;
	align-items: center;
	gap: 10px;
}

.vx-avail-title h2 svg {
	width: 24px;
	height: 24px;
	fill: var(--vx-rescal-primary);
}

.vx-avail-title p {
	margin: 0;
	font-size: 13px;
	color: var(--vx-rescal-text-muted);
}

.vx-avail-close {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vx-rescal-bg);
	border: 1px solid var(--vx-rescal-border);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.vx-avail-close svg {
	width: 18px;
	height: 18px;
	fill: var(--vx-rescal-text-muted);
}

.vx-avail-close:hover {
	background: #ef4444;
	border-color: #ef4444;
}

.vx-avail-close:hover svg {
	fill: white;
}

/* Vehicle selector */
.vx-avail-vehicle-selector {
	padding: 20px 24px;
	border-bottom: 1px solid var(--vx-rescal-border);
}

.vx-avail-vehicle-selector label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--vx-rescal-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.vx-avail-select-wrap {
	position: relative;
}

.vx-avail-select-wrap select {
	width: 100%;
	padding: 12px 40px 12px 14px;
	border: 1px solid var(--vx-rescal-border);
	border-radius: 8px;
	background: var(--vx-rescal-bg);
	font-size: 14px;
	font-weight: 500;
	color: var(--vx-rescal-text);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: all 0.2s ease;
}

.vx-avail-select-wrap select:hover {
	border-color: var(--vx-rescal-primary);
}

.vx-avail-select-wrap select:focus {
	outline: none;
	border-color: var(--vx-rescal-primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.vx-avail-select-wrap svg {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	fill: var(--vx-rescal-text-muted);
	pointer-events: none;
}

/* Loading state */
.vx-avail-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 60px 20px;
	color: var(--vx-rescal-text-muted);
	font-size: 14px;
}

/* Calendar section */
.vx-avail-calendar-section {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px;
}

/* Stats */
.vx-avail-stats {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 12px;
}

.vx-avail-stat {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.vx-stat-number {
	font-size: 28px;
	font-weight: 700;
	color: var(--vx-rescal-text);
}

.vx-stat-label {
	font-size: 13px;
	color: var(--vx-rescal-text-muted);
}

.vx-avail-unsaved {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: color-mix(in srgb, var(--vx-rescal-alert) 10%, var(--vx-rescal-bg));
	border: 1px solid var(--vx-rescal-alert);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--vx-rescal-alert);
}

.vx-avail-unsaved svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* Month navigation */
.vx-avail-month-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.vx-avail-nav-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vx-rescal-bg);
	border: 1px solid var(--vx-rescal-border);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.vx-avail-nav-btn svg {
	width: 16px;
	height: 16px;
	fill: var(--vx-rescal-text-muted);
}

.vx-avail-nav-btn:hover {
	background: var(--vx-rescal-primary);
	border-color: var(--vx-rescal-primary);
}

.vx-avail-nav-btn:hover svg {
	fill: white;
}

.vx-avail-month-label {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--vx-rescal-text);
}

.vx-avail-today-btn {
	padding: 6px 14px;
	background: var(--vx-rescal-bg);
	border: 1px solid var(--vx-rescal-border);
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--vx-rescal-text);
	cursor: pointer;
	transition: all 0.2s ease;
}

.vx-avail-today-btn:hover {
	border-color: var(--vx-rescal-primary);
	color: var(--vx-rescal-primary);
}

/* Quick actions */
.vx-avail-quick-actions {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
}

.vx-quick-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.vx-quick-btn svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.vx-quick-btn.exclude {
	background: color-mix(in srgb, #ef4444 10%, var(--vx-rescal-bg));
	border: 1px solid #ef4444;
	color: #ef4444;
}

.vx-quick-btn.exclude:hover {
	background: #ef4444;
	color: white;
}

.vx-quick-btn.clear {
	background: color-mix(in srgb, var(--vx-rescal-ok) 10%, var(--vx-rescal-bg));
	border: 1px solid var(--vx-rescal-ok);
	color: var(--vx-rescal-ok);
}

.vx-quick-btn.clear:hover {
	background: var(--vx-rescal-ok);
	color: white;
}

/* Calendar grid */
.vx-avail-calendar {
	border: 1px solid var(--vx-rescal-border);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 16px;
}

.vx-avail-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background: var(--vx-rescal-bg-alt);
	border-bottom: 1px solid var(--vx-rescal-border);
}

.vx-avail-weekday {
	padding: 10px 5px;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--vx-rescal-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.vx-avail-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.vx-avail-day {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border-right: 1px solid var(--vx-rescal-border);
	border-bottom: 1px solid var(--vx-rescal-border);
	cursor: pointer;
	transition: all 0.15s ease;
	position: relative;
	user-select: none;
}

.vx-avail-day:nth-child(7n) {
	border-right: none;
}

.vx-avail-day:nth-last-child(-n+7) {
	border-bottom: none;
}

.vx-avail-day:hover:not(.is-past):not(.is-other-month) {
	background: color-mix(in srgb, var(--vx-rescal-primary) 10%, var(--vx-rescal-bg));
}

.vx-avail-day.is-other-month {
	opacity: 0.3;
	cursor: default;
}

.vx-avail-day.is-today {
	background: color-mix(in srgb, var(--vx-rescal-primary) 8%, var(--vx-rescal-bg));
}

.vx-avail-day.is-today .vx-avail-day-num {
	background: var(--vx-rescal-primary);
	color: white;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vx-avail-day.is-past {
	opacity: 0.4;
	cursor: not-allowed;
	background: var(--vx-rescal-bg-alt);
}

.vx-avail-day.is-excluded {
	background: color-mix(in srgb, #ef4444 12%, var(--vx-rescal-bg));
}

.vx-avail-day.is-excluded:hover:not(.is-past) {
	background: color-mix(in srgb, #ef4444 20%, var(--vx-rescal-bg));
}

.vx-avail-day.is-selected {
	background: color-mix(in srgb, var(--vx-rescal-primary) 20%, var(--vx-rescal-bg)) !important;
	outline: 2px solid var(--vx-rescal-primary);
	outline-offset: -2px;
}

.vx-avail-day-num {
	font-size: 13px;
	font-weight: 500;
	color: var(--vx-rescal-text);
}

.vx-avail-day-icon {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.vx-avail-day-icon svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.vx-avail-day-icon.available {
	background: color-mix(in srgb, var(--vx-rescal-ok) 15%, transparent);
	color: var(--vx-rescal-ok);
}

.vx-avail-day-icon.excluded {
	background: color-mix(in srgb, #ef4444 15%, transparent);
	color: #ef4444;
}

/* Legend */
.vx-avail-legend {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.vx-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--vx-rescal-text-muted);
}

.vx-legend-color {
	width: 12px;
	height: 12px;
	border-radius: 3px;
}

.vx-legend-color.available {
	background: var(--vx-rescal-ok);
}

.vx-legend-color.excluded {
	background: #ef4444;
}

.vx-legend-color.past {
	background: var(--vx-rescal-border);
}

/* Panel footer */
.vx-avail-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-top: 1px solid var(--vx-rescal-border);
	background: var(--vx-rescal-bg-alt);
	gap: 12px;
}

.vx-avail-footer-right {
	display: flex;
	gap: 10px;
}

.vx-avail-footer .ts-btn {
	padding: 10px 20px;
	font-size: 14px;
}

.vx-avail-footer .ts-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Panel slide transition */
.vx-panel-slide-enter-active,
.vx-panel-slide-leave-active {
	transition: opacity 0.3s ease;
}

.vx-panel-slide-enter-active .vx-availability-panel,
.vx-panel-slide-leave-active .vx-availability-panel {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.vx-panel-slide-enter-from,
.vx-panel-slide-leave-to {
	opacity: 0;
}

.vx-panel-slide-enter-from .vx-availability-panel,
.vx-panel-slide-leave-to .vx-availability-panel {
	transform: translateY(20px) scale(0.95);
	opacity: 0;
}

/* Responsive */
@media (max-width: 480px) {
	.vx-availability-panel {
		max-width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}

	.vx-avail-header,
	.vx-avail-vehicle-selector,
	.vx-avail-calendar-section,
	.vx-avail-footer {
		padding-left: 16px;
		padding-right: 16px;
	}

	.vx-avail-quick-actions {
		flex-direction: column;
	}

	.vx-avail-footer {
		flex-direction: column;
	}

	.vx-avail-footer-right {
		width: 100%;
	}

	.vx-avail-footer .ts-btn {
		flex: 1;
	}
}