/**
 * Terminal Manager Styles
 *
 * Custom styles for the Terminal Manager interface.
 *
 * @package MyLasertag
 * @since 1.0.0
 */

/* Base styles */
.terminal-manager {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.terminal-manager main {
	padding-bottom: 5rem;
}

/* Login view */
.login-container {
	max-width: 400px;
	margin: 0 auto;
	padding: 3rem 1rem;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.login-container .card {
	border: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.login-container .card-body {
	padding: 2rem;
}

#login-scan-area {
	padding: 2rem 0;
}

#login-scan-area i {
	display: block;
}

/* Footer */
.terminal-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	border-top: 1px solid #dee2e6;
	padding: 0.5rem 0;
	z-index: 1000;
}

/* Cards */
.terminal-manager .card {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border: none;
}

.terminal-manager .card-header {
	background-color: #fff;
	border-bottom: 1px solid #e9ecef;
}

/* Search form */
#search-form .form-control-lg {
	font-size: 1.5rem;
	padding: 1rem 1.5rem;
}

#search-form .btn-lg {
	font-size: 1.25rem;
	padding: 1rem 2rem;
}

/* Scan indicator */
#scan-indicator {
	padding: 2rem;
}

/* Results table */
.terminal-manager .table th {
	white-space: nowrap;
}

.terminal-manager .table td {
	vertical-align: middle;
}

/* Order items */
.order-item {
	transition: background-color 0.2s ease;
}

.order-item:hover {
	background-color: #f8f9fa;
}

.order-item:last-child {
	border-bottom: none !important;
}

/* Bracelet slots */
.bracelet-slots {
	padding: 0.5rem;
	background-color: #f8f9fa;
	border-radius: 0.25rem;
}

.bracelet-slot {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.bracelet-slot .badge {
	font-size: 0.9rem;
	padding: 0.5rem 0.75rem;
}

.bracelet-slot.linked .badge {
	background-color: #28a745;
}

.bracelet-slot.empty .badge {
	background-color: #6c757d;
}

.bracelet-slot .btn-sm {
	padding: 0.15rem 0.4rem;
	font-size: 0.75rem;
}

/* Timeslot status */
.timeslot-status {
	padding: 0.5rem;
	background-color: #e7f3ff;
	border-radius: 0.25rem;
}

.timeslot-info {
	color: #004085;
}

/* Checkin slots */
.checkin-slots {
	margin-top: 0.5rem;
}

.checkin-slot {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.checkin-slot .badge {
	font-size: 0.9rem;
	padding: 0.5rem 0.75rem;
}

.checkin-slot.checked-in .badge {
	background-color: #28a745;
}

.checkin-slot.not-checked-in .badge {
	background-color: #6c757d;
}

.checkin-slot .btn-sm {
	padding: 0.15rem 0.4rem;
	font-size: 0.75rem;
}

/* Redemption status */
.redemption-status {
	padding: 0.5rem;
	background-color: #fff3e0;
	border-radius: 0.25rem;
}

.redemption-slots {
	margin-top: 0.5rem;
}

.redemption-slot {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.redemption-slot .badge {
	font-size: 0.9rem;
	padding: 0.5rem 0.75rem;
}

.redemption-slot.redeemed .badge {
	background-color: #28a745;
}

.redemption-slot.not-redeemed .badge {
	background-color: #6c757d;
}

.redemption-slot .btn-sm {
	padding: 0.15rem 0.4rem;
	font-size: 0.75rem;
}

/* Status warnings */
.bracelet-slots .alert-warning {
	font-size: 0.85rem;
}

/* Status sections spacing */
.bracelet-slots + .timeslot-status,
.bracelet-slots + .redemption-status,
.timeslot-status + .redemption-status {
	margin-top: 0.75rem;
}

/* Loading overlay */
#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9998;
}

#loading-overlay .spinner-border {
	width: 4rem;
	height: 4rem;
}

/* Alert container */
#alert-container {
	padding: 0 1rem;
}

#alert-container .alert {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Status badges */
.badge {
	font-weight: 500;
}

/* Modal improvements */
.modal-header.bg-info .close,
.modal-header.bg-primary .close {
	color: #fff;
	text-shadow: none;
	opacity: 0.8;
}

.modal-header.bg-info .close:hover,
.modal-header.bg-primary .close:hover {
	opacity: 1;
}

/* Form improvements */
.form-control:focus {
	border-color: #007bff;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Table responsive improvements */
.table-responsive {
	max-height: 60vh;
	overflow-y: auto;
}

.table-responsive thead th {
	position: sticky;
	top: 0;
	background-color: #343a40;
	z-index: 1;
}

/* Animation for scan detection */
@keyframes pulse-success {
	0% {
		box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
	}
}

.scan-success {
	animation: pulse-success 0.5s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.terminal-manager .navbar-brand {
		font-size: 1rem;
	}

	.terminal-manager .navbar-text {
		font-size: 0.875rem;
	}

	#search-form .form-control-lg {
		font-size: 1.25rem;
		padding: 0.75rem 1rem;
	}

	#search-form .btn-lg {
		font-size: 1rem;
		padding: 0.75rem 1.5rem;
	}

	.table-responsive {
		font-size: 0.875rem;
	}

	.bracelet-slot .badge {
		font-size: 0.8rem;
		padding: 0.4rem 0.6rem;
	}
}

/* Print styles */
@media print {
	.terminal-manager nav,
	.terminal-manager #btn-back-search,
	.terminal-manager #btn-back-results,
	.terminal-manager .btn-select-order,
	.terminal-manager .btn-open-bracelet-modal,
	.terminal-manager .btn-unlink-bracelet,
	#loading-overlay,
	#alert-container {
		display: none !important;
	}

	.terminal-manager {
		background-color: #fff;
	}

	.terminal-manager .card {
		box-shadow: none;
		border: 1px solid #dee2e6;
	}
}