/*
 * Bootstrap overrides to match room card color palette
 * Include this file after Bootstrap's CSS so the variables and utility
 * classes are overridden with the room-card colors.
 */
:root {
	/* room card palette (from assets/css/booking.css) */
	--room-available: #10b981;
	/* green */
	--room-reserved: #fbbf24;
	/* yellow */
	--room-occupied: #1890ff;
	/* blue  */
	--room-cleaning: #1890ff;
	/* blue  */
	--room-maintenance: #6b7280;
	/* gray  */

	/* Map to Bootstrap CSS variables */
	--bs-primary: var(--room-occupied);
	--bs-success: var(--room-available);
	--bs-warning: var(--room-reserved);
	--bs-info: var(--room-occupied);
	--bs-secondary: var(--room-maintenance);
}

/* Ensure common Bootstrap utilities use the palette */
.bg-primary,
.btn-primary,
.badge.bg-primary {
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
	color: #fff !important;
}

.text-primary {
	color: var(--bs-primary) !important;
}

.bg-success,
.btn-success,
.badge.bg-success {
	background-color: var(--bs-success) !important;
	border-color: var(--bs-success) !important;
	color: #fff !important;
}

.text-success {
	color: var(--bs-success) !important;
}

.bg-warning,
.btn-warning,
.badge.bg-warning {
	background-color: var(--bs-warning) !important;
	border-color: var(--bs-warning) !important;
	color: #000 !important;
	/* better contrast on yellow */
}

.text-warning {
	color: var(--bs-warning) !important;
}

.bg-info,
.btn-info,
.badge.bg-info {
	background-color: var(--bs-info) !important;
	border-color: var(--bs-info) !important;
	color: #fff !important;
}

.text-info {
	color: var(--bs-info) !important;
}

.bg-secondary,
.btn-secondary,
.badge.bg-secondary {
	background-color: var(--bs-secondary) !important;
	border-color: var(--bs-secondary) !important;
	color: #fff !important;
}

.text-secondary {
	color: var(--bs-secondary) !important;
}

/* Optional: outlined buttons adopt color for border/text */
.btn-outline-primary {
	color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}

.btn-outline-success {
	color: var(--bs-success) !important;
	border-color: var(--bs-success) !important;
}

.btn-outline-warning {
	color: var(--bs-warning) !important;
	border-color: var(--bs-warning) !important;
}

.btn-outline-secondary {
	color: var(--bs-secondary) !important;
	border-color: var(--bs-secondary) !important;
}

/* Small utility to make legend dots match bootstrap background classes */
.legend-dot.bg-available {
	background: var(--room-available) !important;
}

.legend-dot.bg-reserved {
	background: var(--room-reserved) !important;
}

.legend-dot.bg-occupied {
	background: var(--room-occupied) !important;
}

.legend-dot.bg-maintenance {
	background: var(--room-maintenance) !important;
}

.legend-dot.bg-blocked {
	background: var(--room-maintenance) !important;
}

/* Hiệu ứng mượt mà cho modal khi xuất hiện và thay đổi kích thước */
.modal.fade .modal-dialog {
	transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
		top 0.3s ease-out,
		left 0.3s ease-out,
		width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
		max-width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
	transform: scale(0.95) translateY(-20px);
}

.modal.show .modal-dialog {
	transform: scale(1) translateY(0);
}

.modal-content {
	transition: height 0.3s ease-in-out, box-shadow 0.3s ease;
	border: none;
}

/* Hiệu ứng mượt cho nội dung bên trong modal khi thay đổi (ví dụ khi list phòng load xong) */
#changeRoom,
#layoutRoomForCheckout {
	transition: all 0.4s ease;
}

.modal-body {
	transition: padding 0.3s ease;
}