/* Guest Search Styling - Top positioned */
#guest-search-container, #guest-search-container-8 {
	margin: 0 0 20px 0; /* Remove top margin, add bottom margin */
	padding: 20px;
	background: #f8f9fa;
	border: 2px solid #007cba;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Make it stand out more at the top */
.search-instructions p:first-child {
	font-weight: bold;
	color: #007cba;
	font-size: 16px;
	margin-bottom: 8px;
}

.search-instructions p {
	margin: 5px 0;
	font-size: 14px;
}

.search-instructions p:first-child {
	font-weight: bold;
	color: #333;
}

.search-input-group {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
	align-items: center;
}

#guest-search-input {
	flex: 1;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}

#search-guest-btn {
	background: #007cba;
	color: white;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

#search-guest-btn:hover {
	background: #005a87;
}

#guest-search-results {
	margin-top: 15px;
	border: 1px solid #ddd;
	padding: 15px;
	background: white;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.guest-results-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.guest-result-item {
	padding: 15px;
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
	background: #fafafa;
	border-radius: 4px;
}

.guest-result-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.select-guest-btn {
	background: #46b450;
	color: white;
	border: none;
	padding: 8px 15px;
	cursor: pointer;
	border-radius: 4px;
	margin-top: 8px;
	font-size: 13px;
}

.select-guest-btn:hover {
	background: #3e9f46;
}

.guest-selected-notice {
	color: #46b450;
	font-weight: bold;
	margin: 10px 0;
	padding: 10px;
	background: #d4edda;
	border: 1px solid #c3e6cb;
	border-radius: 4px;
}

/* Highlight matching text */
mark {
	background-color: #ffeb3b;
	padding: 1px 2px;
	border-radius: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	#guest-search-container {
		margin: 10px 0;
		padding: 10px;
	}
	
	.search-input-group {
		flex-direction: column;
		align-items: stretch;
	}
	
	#search-guest-btn {
		margin-top: 10px;
	}
	
	.guest-result-item {
		padding: 10px;
	}
}

#reservations-container {
	margin: 20px 0;
	width: 100%;
}

#loading-reservations {
	padding: 40px;
	text-align: center;
	color: #666;
}

.btn-sm {
	padding: 4px 8px;
	font-size: 12px;
}

/* DataTable responsive adjustments */
@media (max-width: 768px) {
	.btn-sm {
		padding: 2px 6px;
		font-size: 11px;
	}
}

/* Parking Pass Status Colors */
.green {
	color: #28a745;
	font-weight: bold;
}

.blue {
	color: #007bff;
	font-weight: bold;
}

.red {
	color: #dc3545;
	font-weight: bold;
}

.orange {
	color: #fd7e14;
	font-weight: bold;
}

.gray {
	color: #6c757d;
	font-weight: bold;
}

#vehicles-container {
	margin: 20px 0;
	width: 100%;
}

#loading-vehicles {
	padding: 40px;
	text-align: center;
	color: #666;
}

/* DataTable responsive adjustments for vehicles table */
@media (max-width: 768px) {
	#vehicles {
		font-size: 12px;
	}
}

/* Vehicle table styling */
#vehicles-container {
	margin: 20px 0;
}

#vehicles {
	width: 100% !important;
}

/* Status styling */
.status-active {
	background-color: #28a745;
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
}

.status-expired {
	background-color: #dc3545;
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
}

.status-upcoming {
	background-color: #007bff;
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
}

.status-pending {
	background-color: #ffc107;
	color: #212529;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
}

/* Row styling based on status */
.row-active {
	background-color: #f8fff9 !important;
}

.row-expired {
	background-color: #fff8f8 !important;
}

.row-upcoming {
	background-color: #f8f9ff !important;
}

.row-pending {
	background-color: #fffdf8 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	#vehicles {
		font-size: 14px;
	}
	
	.status-active,
	.status-expired,
	.status-upcoming,
	.status-pending {
		font-size: 10px;
		padding: 2px 4px;
	}
}

/* Loading state */
#loading-vehicles {
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	margin: 20px 0;
}

/* Parking Passes Table Styles */
.status-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.status-active {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.status-upcoming {
	background-color: #fff3cd;
	color: #856404;
	border: 1px solid #ffeaa7;
}

.status-expired {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.status-pending {
	background-color: #e2e3e5;
	color: #383d41;
	border: 1px solid #d6d8db;
}

/* Table responsive improvements */
#vehicles-container {
	margin: 20px 0;
}

#vehicles {
	width: 100% !important;
}

#vehicles th,
#vehicles td {
	padding: 12px 8px;
	vertical-align: middle;
}

#vehicles th {
	background-color: #f8f9fa;
	font-weight: 600;
	border-bottom: 2px solid #dee2e6;
}

#loading-vehicles {
	text-align: center;
	padding: 40px 20px;
	color: #6c757d;
}

#refresh-vehicles {
	background-color: #007cba;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}

#refresh-vehicles:hover {
	background-color: #005a87;
}

/* DataTables custom styling */
.dataTables_wrapper .dataTables_length select {
	padding: 5px 30px 5px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.dataTables_wrapper .dataTables_filter input {
	padding: 6px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-left: 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 6px 12px;
	margin: 0 2px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: white;
	color: #333;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: #f8f9fa;
	border-color: #007cba;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: #007cba;
	color: white;
	border-color: #007cba;
}