/**
 * Orders Feature CSS
 * Reusable styles for order listing and detail views across applications
 * Uses base.css variables and components
 */

/* ============================================================
   ORDER DETAIL VIEW
   ============================================================ */
.order-detail-view {
	padding: var(--space-6);
	max-width: 1200px;
	margin: 0 auto;
}

/* Spin animation for loading spinner */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Invoice Modal */
.modal-overlay {
	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: 9999;
	padding: var(--space-4);
	overflow-y: auto;
}

.invoice-modal {
	background: white;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-2xl);
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	margin: auto;
}

.invoice-modal .modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-6);
	border-bottom: 1px solid var(--color-gray-200);
	flex-shrink: 0;
}

.invoice-modal .modal-body {
	padding: var(--space-8);
	overflow-y: auto;
	flex: 1;
}

/* Print styles for invoice */
@media print {
	.modal-overlay {
		background: white;
		position: static;
	}
	
	.invoice-modal {
		box-shadow: none;
		max-width: 100%;
		max-height: none;
	}
	
	.modal-header {
		display: none !important;
	}
	
	.modal-body {
		padding: 0;
	}
}

/* ============================================================
   ORDERS CONTAINER
   ============================================================ */
.orders-container {
	padding: var(--spacing-6);
	max-width: 1200px;
	margin: 0 auto;
}

/* ============================================================
   ORDERS HEADER
   ============================================================ */
.orders-header {
	margin-bottom: var(--spacing-6);
}

.orders-title {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	margin: 0 0 var(--spacing-2) 0;
}

.orders-subtitle {
	color: var(--color-text-secondary);
	font-size: var(--font-size-base);
	margin: 0;
}

/* ============================================================
   FILTERS & SEARCH
   ============================================================ */
.orders-filters {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-4);
	margin-bottom: var(--spacing-6);
}

.filter-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--spacing-4);
}

@media (max-width: 768px) {
	.filter-row {
		grid-template-columns: 1fr;
	}
}

.filter-item {
	position: relative;
}

.filter-search {
	position: relative;
}

.search-icon {
	position: absolute;
	left: var(--spacing-3);
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: var(--color-text-tertiary);
	pointer-events: none;
}

.filter-search .form-input {
	padding-left: var(--spacing-10);
}

/* ============================================================
   ORDERS LIST
   ============================================================ */
.orders-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}

.order-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-5);
	cursor: pointer;
	transition: var(--transition-base);
}

.order-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.order-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: var(--spacing-4);
	padding-bottom: var(--spacing-4);
	border-bottom: 1px solid var(--color-border);
}

.order-info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1);
}

.order-number {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.order-date {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}

.order-status .badge {
	font-size: var(--font-size-xs);
	padding: var(--spacing-1) var(--spacing-3);
}

.order-items {
	margin-bottom: var(--spacing-4);
}

.items-summary {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	margin: 0;
	line-height: 1.5;
}

.order-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.order-amount {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-2);
}

.amount-label {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}

.amount-value {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
}

/* ============================================================
   ORDER DETAIL
   ============================================================ */
.order-detail-container {
	padding: var(--spacing-6);
	max-width: 900px;
	margin: 0 auto;
}

.btn-back {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-2) var(--spacing-4);
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition: var(--transition-base);
	margin-bottom: var(--spacing-6);
}

.btn-back:hover {
	background: var(--color-surface);
	color: var(--color-text-primary);
	border-color: var(--color-primary);
}

.order-detail {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
}

.detail-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: var(--spacing-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.header-left h2 {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	margin: 0 0 var(--spacing-2) 0;
}

.header-left p {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	margin: 0;
}

.badge-lg {
	padding: var(--spacing-2) var(--spacing-4);
	font-size: var(--font-size-sm);
}

.detail-section {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-6);
}

/* ============================================================
   ORDER ITEMS
   ============================================================ */
.items-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}

.item-card {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: var(--spacing-4);
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.item-info {
	flex: 1;
}

.item-name {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	margin: 0 0 var(--spacing-1) 0;
}

.item-variant {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	margin: 0 0 var(--spacing-1) 0;
}

.item-type {
	font-size: var(--font-size-xs);
	color: var(--color-text-tertiary);
	margin: 0;
}

.item-pricing {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--spacing-1);
	min-width: 120px;
}

.item-quantity {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}

.item-price {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}

.item-total {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

/* ============================================================
   PAYMENT SUMMARY
   ============================================================ */
.summary-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-2) 0;
}

.summary-row:not(:last-child) {
	border-bottom: 1px solid var(--color-border);
}

.summary-label {
	font-size: var(--font-size-base);
	color: var(--color-text-secondary);
}

.summary-value {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
}

.summary-discount {
	color: var(--color-success);
}

.summary-total {
	padding-top: var(--spacing-4);
	border-top: 2px solid var(--color-border) !important;
}

.summary-total .summary-label {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.summary-total .summary-value {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
}

/* ============================================================
   BILLING INFORMATION
   ============================================================ */
.info-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.info-row {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	padding: var(--spacing-2) 0;
	font-size: var(--font-size-base);
	color: var(--color-text-secondary);
}

.info-row svg {
	color: var(--color-text-tertiary);
}

/* ============================================================
   DETAIL ACTIONS
   ============================================================ */
.detail-actions {
	display: flex;
	gap: var(--spacing-3);
	flex-wrap: wrap;
}

.detail-actions .btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
}

/* ============================================================
   NOTES
   ============================================================ */
.notes-card {
	padding: var(--spacing-4);
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.notes-card p {
	margin: 0;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.orders-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-4);
	margin-top: var(--spacing-6);
	padding: var(--spacing-4);
}

.btn-pagination {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-2) var(--spacing-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-primary);
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition: var(--transition-base);
}

.btn-pagination:hover:not(:disabled) {
	background: var(--color-primary);
	color: white;
	border-color: var(--color-primary);
}

.btn-pagination:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pagination-info {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.badge.badge-pending {
	background: var(--color-warning-light);
	color: var(--color-warning);
}

.badge.badge-completed {
	background: var(--color-success-light);
	color: var(--color-success);
}

.badge.badge-failed {
	background: var(--color-error-light);
	color: var(--color-error);
}

.badge.badge-refunded {
	background: var(--color-info-light);
	color: var(--color-info);
}

/* ============================================================
   LOADING & EMPTY STATES
   ============================================================ */
.loading-state,
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-12) var(--spacing-6);
	text-align: center;
}

.empty-icon {
	width: 64px;
	height: 64px;
	color: var(--color-text-tertiary);
	margin-bottom: var(--spacing-4);
}

.empty-state h3 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	margin: 0 0 var(--spacing-2) 0;
}

.empty-state p {
	font-size: var(--font-size-base);
	color: var(--color-text-secondary);
	margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
	.orders-container,
	.order-detail-container {
		padding: var(--spacing-4);
	}

	.order-card-header,
	.order-card-footer,
	.detail-header {
		flex-direction: column;
		gap: var(--spacing-3);
	}

	.item-card {
		flex-direction: column;
		gap: var(--spacing-3);
	}

	.item-pricing {
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}

	.detail-actions {
		flex-direction: column;
	}

	.detail-actions .btn-secondary {
		width: 100%;
		justify-content: center;
	}
}