.admin-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-top: 32px;
}

.admin-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	text-decoration: none;
	color: var(--textColor);
	transition: all 0.3s ease;
	cursor: pointer;
}

.admin-card:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--geniBlue);
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(68, 138, 255, 0.2);
}

.admin-card-icon {
	margin-bottom: 16px;
	color: var(--geniBlue);
}

.admin-card-icon .icon {
	width: 48px;
	height: 48px;
}

.admin-card-content {
	text-align: center;
}

.admin-card-content h3 {
	margin: 0 0 8px 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--textColor);
}

.admin-card-content p {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
}

.admin-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}

.admin-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.filters-container {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
	flex-wrap: wrap;
	justify-content: space-between;
}

.filter-group {
	display: flex;
	align-items: center;
	gap: 12px;

	& label {
		color: var(--textColor);
		font-size: 14px;
		font-weight: 500;
		white-space: nowrap;
	}
}

.filter-select {
	padding: 10px 16px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	color: #FFFFFF;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 150px;

	&:hover {
		border-color: rgba(255, 255, 255, 0.2);
		background: rgba(255, 255, 255, 0.08);
	}

	&:focus {
		outline: none;
		border-color: var(--geniBlue);
		box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.1);
	}
}

.filter-select option {
	background: #0D1B2A;
	color: #FFFFFF;
}

.filter-results {
	margin-left: auto;
}

.results-count {
	color: var(--textColor);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	background: rgba(68, 138, 255, 0.1);
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 8px;
	white-space: nowrap;
}

.search-container {
	position: relative;
	width: 100%;
	max-width: 500px;
}

.search-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.5);
	pointer-events: none;
	z-index: 1;
}

.search-input {
	width: 100%;
	padding: 12px 16px 12px 48px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	color: var(--textColor);
	font-size: 14px;
	transition: all 0.2s ease;
}

.search-input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.search-input:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--geniBlue);
	box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.1);
}

.search-input:hover {
	border-color: rgba(255, 255, 255, 0.2);
}

.btn-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	color: var(--textColor);
	text-decoration: none;
	transition: all 0.2s ease;
	width: fit-content;
	font-size: 14px;
}

.btn-back:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--geniBlue);
	color: var(--geniBlue);
}

.btn-back .icon {
	width: 20px;
	height: 20px;
}

.table-container {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 0;
	overflow: auto;
	max-height: calc(100vh - 280px);
}

.admin-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 800px;
}

.admin-table thead {
	position: sticky;
	top: 0;
	z-index: 20;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.admin-table thead tr th {
	padding: 12px 16px;
	text-align: left;
	background: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%);
	border-bottom: 3px solid #1E3A8A;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
	color: #FFFFFF;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	cursor: pointer;
	user-select: none;
}

.admin-table thead tr th:last-child {
	border-right: none;
}

.admin-table thead tr th:first-child {
	padding-left: 40px;
}

.admin-table thead tr th:last-child {
	padding-right: 40px;
}

.admin-table thead tr th[data-sortable]:hover {
	background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
}

.admin-table thead tr th:not([data-sortable]) {
	cursor: default;
}

.admin-table thead tr th[data-sortable]::after {
	content: '';
	display: inline-block;
	margin-left: 8px;
	opacity: 0.3;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 6px solid currentColor;
}

.admin-table thead tr th[data-sortable][data-order="asc"]::after {
	opacity: 1;
	border-bottom: 6px solid currentColor;
	border-top: none;
}

.admin-table thead tr th[data-sortable][data-order="desc"]::after {
	opacity: 1;
	border-bottom: none;
	border-top: 6px solid currentColor;
}

.admin-table tbody tr {
	transition: background 0.2s ease;
}

.admin-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.05);
}

.admin-table tbody tr td {
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	color: var(--textColor);
	font-size: 14px;
	vertical-align: middle;
}

.admin-table tbody tr td:first-child {
	padding-left: 40px;
	font-weight: 700;
	color: #3B82F6;
}

.admin-table tbody tr td:last-child {
	padding-right: 40px;
}

.admin-table tbody tr td label {
	cursor: pointer;
	display: block;
	padding: 4px;
	border-radius: 4px;
	transition: background 0.2s ease;
}

.admin-table tbody tr td label:hover {
	background: rgba(68, 138, 255, 0.1);
}

.admin-table input[type="checkbox"],
.order-checkbox {
	width: auto;
}

.coins-dialog {
	width: 95vw;
	max-width: 1800px;
	height: 90vh;
	max-height: 900px;
	padding: 0;
	margin: auto;
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 20px;
	background: #0D1B2A;
	color: var(--textColor);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.coins-dialog:not([open]) {
	display: none !important;
}

.coins-dialog::backdrop {
	backdrop-filter: blur(12px);
	background: rgba(0, 0, 0, 0.75);
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.dialog-close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 48px;
	height: 48px;
	background: rgba(255, 59, 48, 0.1);
	border: 2px solid rgba(255, 59, 48, 0.3);
	border-radius: 12px;
	padding: 0;
	cursor: pointer;
	color: #ff6b6b;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(255, 59, 48, 0.15);
	flex-shrink: 0;
}

.dialog-close:hover {
	background: rgba(255, 59, 48, 0.25);
	border-color: rgba(255, 59, 48, 0.6);
	color: #ff3b30;
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(255, 59, 48, 0.3);
}

.dialog-close .icon {
	width: 24px;
	height: 24px;
}

.dialog-header {
	padding: 32px 40px 24px;
	border-bottom: 2px solid rgba(68, 138, 255, 0.3);
	background: rgba(13, 27, 42, 0.8);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;

	& h2 {
		margin: 0;
		color: #FFFFFF;
		font-size: 28px;
		font-weight: 700;
		letter-spacing: -0.5px;
	}

	& .search-container {
		margin: 0;
	}
}

.dialog-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.dialog-controls {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.dialog-controls label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

.dialog-controls input[type="number"] {
	width: 90px;
	padding: 10px 14px;
	background: rgba(68, 138, 255, 0.1);
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 8px;
	color: var(--textColor);
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s ease;
}

.dialog-controls input[type="number"]:focus {
	outline: none;
	border-color: var(--geniBlue);
	background: rgba(68, 138, 255, 0.15);
	box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.1);
}

.dialog-controls input[type="number"]:hover {
	border-color: rgba(68, 138, 255, 0.5);
}

.dialog-content {
	flex: 1;
	overflow: auto;
	padding: 0;
	position: relative;
}

.dialog-content::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.dialog-content::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.02);
}

.dialog-content::-webkit-scrollbar-thumb {
	background: rgba(68, 138, 255, 0.3);
	border-radius: 5px;
}

.dialog-content::-webkit-scrollbar-thumb:hover {
	background: rgba(68, 138, 255, 0.5);
}

.dialog-footer {
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	padding: 16px 24px;
	background: linear-gradient(135deg, rgba(68, 138, 255, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
	border: 2px solid rgba(68, 138, 255, 0.8);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(68, 138, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	z-index: 1000;
	display: none;
	justify-content: center;
	gap: 12px;
	max-width: 500px;
	animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dialog-footer.show {
	display: flex;
}

.coins-table {
	margin: 0;
}

.coins-table thead {
	position: sticky;
	top: 0;
	z-index: 20;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.coins-table thead tr th {
	padding: 12px 16px;
	background: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%);
	border-bottom: 3px solid #1E3A8A;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
	text-align: left;
	color: #FFFFFF;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.coins-table thead tr th:last-child {
	border-right: none;
}

.coins-table thead tr th:first-child {
	padding-left: 40px;
}

.coins-table thead tr th:last-child {
	padding-right: 40px;
}

.coins-table thead tr th[data-sortable]::after {
	content: '';
	display: inline-block;
	margin-left: 8px;
	opacity: 0.3;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 6px solid currentColor;
}

.coins-table thead tr th[data-sortable][data-order="asc"]::after {
	opacity: 1;
	border-bottom: 6px solid currentColor;
	border-top: none;
}

.coins-table thead tr th[data-sortable][data-order="desc"]::after {
	opacity: 1;
	border-bottom: none;
	border-top: 6px solid currentColor;
}

.coins-table tbody tr {
	transition: all 0.15s ease;
	border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.coins-table tbody tr:hover {
	background: rgba(68, 138, 255, 0.08);
	transform: scale(1.002);
}

.coins-table tbody tr td {
	padding: 14px 16px;
	font-size: 14px;
	vertical-align: middle;
}

.coins-table tbody tr td:first-child {
	padding-left: 40px;
	font-weight: 700;
	color: #3B82F6;
}

.coins-table tbody tr td:last-child {
	padding-right: 40px;
}

.coins-table tbody tr td label {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 6px;
	transition: all 0.15s ease;
}

.coins-table tbody tr td label:hover {
	background: rgba(68, 138, 255, 0.12);
	color: var(--geniBlue);
}

.coins-table tbody tr td input[type="checkbox"] {
	width: auto;
	height: 18px;
	cursor: pointer;
	accent-color: var(--geniBlue);
}

.btn-primary {
	background: var(--geniBlue);
	color: white;
	border: 1px solid var(--geniBlue);
	padding: 10px 20px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 500;
	transition: all 0.2s ease;
}

.btn-primary:hover {
	background: #5a9fff;
	border-color: #5a9fff;
	box-shadow: 0 4px 12px rgba(68, 138, 255, 0.3);
}

.btn-view-coins {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: linear-gradient(135deg, rgba(68, 138, 255, 0.15) 0%, rgba(68, 138, 255, 0.25) 100%);
	border: 1px solid rgba(68, 138, 255, 0.4);
	border-radius: 8px;
	color: var(--geniBlue);
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.btn-view-coins:hover {
	background: linear-gradient(135deg, rgba(68, 138, 255, 0.25) 0%, rgba(68, 138, 255, 0.35) 100%);
	border-color: var(--geniBlue);
	box-shadow: 0 4px 12px rgba(68, 138, 255, 0.3);
	transform: translateY(-2px);
}

.btn-view-coins .emoji {
	font-size: 16px;
	line-height: 1;
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 32px;
	padding: 24px;
}

.btn-pagination {
	padding: 10px 20px;
	background: rgba(68, 138, 255, 0.15);
	border: 1px solid rgba(68, 138, 255, 0.4);
	border-radius: 8px;
	color: var(--geniBlue);
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
	transition: all 0.2s ease;

	&:hover:not(:disabled) {
		background: rgba(68, 138, 255, 0.25);
		border-color: var(--geniBlue);
		box-shadow: 0 4px 12px rgba(68, 138, 255, 0.3);
	}

	&:disabled {
		opacity: 0.3;
		cursor: not-allowed;
	}
}

.pagination-info {
	color: var(--textColor);
	font-size: 14px;
	font-weight: 500;
}

.order-details-dialog {
	width: 90vw;
	max-width: 1200px;
	max-height: 85vh;
	padding: 0;
	margin: auto;
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 16px;
	background: #0D1B2A;
	color: var(--textColor);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.order-details-dialog:not([open]) {
	display: none !important;
}

.order-details-dialog::backdrop {
	backdrop-filter: blur(12px);
	background: rgba(0, 0, 0, 0.75);
	animation: fadeIn 0.3s ease;
}

.order-details-dialog .dialog-header {
	padding: 24px 32px;
	border-bottom: 2px solid rgba(68, 138, 255, 0.3);
	background: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%);
	position: relative;
}

.order-details-dialog .dialog-header h3 {
	margin: 0;
	color: #FFFFFF;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.order-details-dialog .dialog-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 40px;
	height: 40px;
	background: rgba(255, 59, 48, 0.1);
	border: 2px solid rgba(255, 59, 48, 0.3);
	border-radius: 10px;
	padding: 0;
	cursor: pointer;
	color: #ff6b6b;
	font-size: 28px;
	line-height: 1;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.order-details-dialog .dialog-close:hover {
	background: rgba(255, 59, 48, 0.25);
	border-color: rgba(255, 59, 48, 0.6);
	color: #ff3b30;
	transform: scale(1.05);
}

.order-details-dialog .dialog-content {
	padding: 32px;
	overflow-y: auto;
	max-height: calc(85vh - 100px);
}

.order-details-dialog .dialog-content::-webkit-scrollbar {
	width: 8px;
}

.order-details-dialog .dialog-content::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.02);
}

.order-details-dialog .dialog-content::-webkit-scrollbar-thumb {
	background: rgba(68, 138, 255, 0.3);
	border-radius: 4px;
}

.order-details-dialog .dialog-content::-webkit-scrollbar-thumb:hover {
	background: rgba(68, 138, 255, 0.5);
}

.admin-table tbody tr {
	cursor: pointer;
}

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

	.table-container {
		padding: 8px;
	}

	.admin-table thead tr th,
	.admin-table tbody tr td {
		padding: 8px;
		font-size: 14px;
	}

	.coins-dialog {
		width: 100vw;
		height: 100vh;
		border-radius: 0;
	}

	.order-details-dialog {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}

	.order-details-dialog .dialog-content {
		padding: 20px;
		max-height: calc(100vh - 80px);
	}
}

.bulk-actions-bar {
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, rgba(68, 138, 255, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
	border: 2px solid rgba(68, 138, 255, 0.8);
	border-radius: 16px;
	padding: 16px 24px;
	box-shadow: 0 12px 40px rgba(68, 138, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
	z-index: 1000;
	backdrop-filter: blur(12px);
	animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.bulk-actions-content {
	display: flex;
	align-items: center;
	gap: 24px;
}

.bulk-actions-count {
	color: white;
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	padding-right: 24px;
	border-right: 2px solid rgba(255, 255, 255, 0.3);
}

.bulk-actions-buttons {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bulk-status-select {
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	color: white;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 150px;
}

.bulk-status-select:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.5);
}

.bulk-status-select:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.bulk-status-select option {
	background: #1E40AF;
	color: white;
}

.bulk-delete-btn {
	padding: 8px 16px;
	background: rgba(239, 68, 68, 0.9);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.bulk-delete-btn:hover {
	background: #dc2626;
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
	transform: translateY(-2px);
}

.bulk-delete-btn:active {
	transform: translateY(0);
}

.order-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}

.order-info-card {
	background: rgba(255, 255, 255, 0.05);
	padding: 24px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);

	& h4 {
		margin: 0 0 16px 0;
		color: var(--geniBlue);
		font-size: 18px;
	}

	& .info-content {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	& .info-row {
		display: flex;
		align-items: center;
		gap: 12px;

		& strong {
			min-width: 120px;
		}
	}

	& .status-select {
		padding: 6px 12px;
		background: rgba(68, 138, 255, 0.2);
		border: 1px solid rgba(68, 138, 255, 0.4);
		border-radius: 6px;
		color: white;
		text-transform: capitalize;
		cursor: pointer;
	}

	& .paid-checkbox-label {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;

		& input[type="checkbox"] {
			width: 18px;
			height: 18px;
			cursor: pointer;
			accent-color: var(--geniBlue);
		}

		& .paid-label {
			font-weight: 600;

			&.paid {
				color: #10b981;
			}

			&.unpaid {
				color: #ef4444;
			}
		}
	}

	& .action-buttons {
		margin-top: 12px;
		display: flex;
		gap: 12px;

		& button {
			padding: 10px 24px;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			font-weight: 600;
			transition: all 0.2s ease;

			&.save-btn {
				background: var(--geniBlue);
				color: white;

				&:hover {
					background: #5a9fff;
				}
			}

			&.delete-btn {
				background: #ef4444;
				color: white;

				&:hover {
					background: #dc2626;
				}
			}

			&.download-btn {
				background: rgba(68, 138, 255, 0.2);
				border: 1px solid rgba(68, 138, 255, 0.4);
				color: white;
				width: 100%;

				&:hover {
					background: rgba(68, 138, 255, 0.3);
				}
			}
		}
	}
}

.order-items-section {
	background: rgba(255, 255, 255, 0.05);
	padding: 24px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);

	& h4 {
		margin: 0 0 16px 0;
		color: var(--geniBlue);
		font-size: 18px;
	}

	& .items-table-container {
		overflow-x: auto;

		& table {
			width: 100%;
			border-collapse: collapse;

			& thead tr {
				border-bottom: 2px solid rgba(255, 255, 255, 0.1);

				& th {
					text-align: left;
					padding: 12px 8px;
					font-size: 12px;
					text-transform: uppercase;
					color: rgba(255, 255, 255, 0.6);

					&.center {
						text-align: center;
					}

					&.right {
						text-align: right;
					}
				}
			}

			& tbody tr {
				border-bottom: 1px solid rgba(255, 255, 255, 0.05);

				& td {
					padding: 12px 8px;

					&.center {
						text-align: center;
					}

					&.right {
						text-align: right;
						font-weight: 600;
					}
				}
			}
		}
	}

	& .totals-section {
		margin-top: 24px;
		padding-top: 16px;
		border-top: 2px solid rgba(255, 255, 255, 0.2);

		& .total-row {
			display: flex;
			justify-content: flex-end;
			gap: 48px;
			padding: 8px 0;

			& .total-label {
				min-width: 120px;
				text-align: right;
			}

			& .total-value {
				min-width: 100px;
				text-align: right;
			}

			&.final {
				font-size: 20px;
				font-weight: 700;
				color: var(--geniBlue);
				margin-top: 8px;
				padding-top: 16px;
				border-top: 2px solid var(--geniBlue);
			}
		}
	}

	& .no-items {
		text-align: center;
		padding: 20px;
		color: rgba(255, 255, 255, 0.5);
	}
}

.image-upload-cell {
	& .upload-btn {
		padding: 6px 12px;
		background: rgba(68, 138, 255, 0.2);
		border: 1px solid rgba(68, 138, 255, 0.4);
		border-radius: 6px;
		color: white;
		cursor: pointer;
		font-size: 11px;
		transition: all 0.2s ease;

		&:hover {
			background: rgba(68, 138, 255, 0.3);
		}
	}

	& .image-preview {
		& .image-container {
			position: relative;
			display: inline-block;

			& img {
				max-width: 60px;
				max-height: 60px;
				border-radius: 4px;
				cursor: pointer;
				display: block;
				transition: transform 0.2s ease;
			}

			& .image-hover-overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.7);
				border-radius: 4px;
				display: none;
				align-items: center;
				justify-content: center;
				cursor: pointer;
			}

			&:hover .image-hover-overlay {
				display: flex;
			}
		}

		& .image-actions {
			display: flex;
			gap: 4px;
			margin-top: 6px;
			opacity: 0;
			transition: opacity 0.2s ease;

			& button {
				padding: 4px 8px;
				border-radius: 4px;
				color: white;
				cursor: pointer;
				font-size: 10px;
				transition: all 0.2s ease;
				border: 1px solid;

				&[data-view-img] {
					background: rgba(68, 138, 255, 0.2);
					border-color: rgba(68, 138, 255, 0.4);

					&:hover {
						background: rgba(68, 138, 255, 0.3);
					}
				}

				&[data-replace-img] {
					background: rgba(251, 191, 36, 0.2);
					border-color: rgba(251, 191, 36, 0.4);

					&:hover {
						background: rgba(251, 191, 36, 0.3);
					}
				}

				&[data-delete-img] {
					background: rgba(239, 68, 68, 0.2);
					border-color: rgba(239, 68, 68, 0.4);

					&:hover {
						background: rgba(239, 68, 68, 0.3);
					}
				}
			}
		}

		&:hover .image-actions {
			opacity: 1;
		}
	}
}

.assign-select {
	padding: 6px 12px;
	background: rgba(68, 138, 255, 0.2);
	border: 1px solid rgba(68, 138, 255, 0.4);
	border-radius: 6px;
	color: white;
	cursor: pointer;
	font-size: 11px;
}

.validation-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	border: 1px solid;

	&.validated {
		background: rgba(16, 185, 129, 0.2);
		color: #10b981;
		border-color: rgba(16, 185, 129, 0.4);
	}

	&.not-validated {
		background: rgba(239, 68, 68, 0.2);
		color: #ef4444;
		border-color: rgba(239, 68, 68, 0.4);
	}
}

.image-viewer-dialog {
	background: rgba(0, 0, 0, 0.95);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	padding: 0;
	max-width: 90vw;
	max-height: 90vh;

	& img {
		max-width: 100%;
		max-height: 85vh;
		display: block;
	}

	& .close-btn {
		position: absolute;
		top: 12px;
		right: 12px;
		background: rgba(239, 68, 68, 0.9);
		color: white;
		border: none;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		cursor: pointer;
		font-size: 24px;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;

		&:hover {
			background: #dc2626;
		}
	}
}

.empty-state {
	text-align: center;
	padding: 40px;
	color: rgba(255, 255, 255, 0.5);
}

.loading-state {
	text-align: center;
	padding: 40px;
}

.error-state {
	text-align: center;
	padding: 40px;
	color: #ef4444;
}

.paid-status {
	font-weight: 600;
	white-space: nowrap;

	&.paid {
		color: #10b981;
	}

	&.unpaid {
		color: #ef4444;
	}
}

.shipping-address-info {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);

	& strong {
		display: block;
		margin-bottom: 8px;
	}

	& .address-details {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin-left: 12px;
	}
}

.bulk-paid-select,
.bulk-download-select {
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	color: white;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 150px;

	&:hover {
		background: rgba(255, 255, 255, 0.25);
		border-color: rgba(255, 255, 255, 0.5);
	}

	&:focus {
		outline: none;
		box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
	}
}

.bulk-paid-select option,
.bulk-download-select option {
	background: #1E40AF;
	color: white;
}

.order-info-card .action-buttons button.success {
	background: #10b981 !important;
}

.order-items-section .total-row {
	border-top: 2px solid rgba(255, 255, 255, 0.2);

	& td {
		padding: 12px 8px;
		font-weight: 600;
	}

	&.final {
		& td {
			font-weight: 700;
			font-size: 16px;
			color: var(--geniBlue);
		}
	}
}

.admin-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.translations-container {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
}

.translations-categories {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}

.translation-category {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	transition: all 0.2s ease;

	&.expanded {
		background: rgba(255, 255, 255, 0.04);
		border-color: rgba(68, 138, 255, 0.2);
	}
}

.category-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	cursor: pointer;
	user-select: none;
	transition: all 0.2s ease;

	&:hover {
		background: rgba(255, 255, 255, 0.05);
	}

	& .expand-icon {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		transition: transform 0.2s ease;
		color: rgba(255, 255, 255, 0.6);
	}

	& .category-name {
		font-weight: 600;
		font-size: 16px;
		color: var(--textColor);
		text-transform: capitalize;
		flex: 1;
	}

	& .category-count {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.5);
		background: rgba(68, 138, 255, 0.15);
		padding: 4px 12px;
		border-radius: 12px;
		font-weight: 500;
	}
}

.translation-category.expanded .category-header .expand-icon {
	transform: rotate(90deg);
	color: var(--geniBlue);
}

.category-body {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.category-body .translations-header {
	display: grid;
	grid-template-columns: 250px repeat(5, 1fr);
	gap: 16px;
	padding: 12px 16px;
	background: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%);
	border-bottom: 2px solid #1E3A8A;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #FFFFFF;
	position: sticky;
	top: 75px;
	z-index: 10;
}

.translation-key-col,
.translation-lang-col {
	padding: 8px;
}

.category-body .translations-body {
}

.translation-row {
	display: grid;
	grid-template-columns: 250px repeat(5, 1fr);
	gap: 16px;
	padding: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	transition: background 0.2s ease;

	&:hover {
		background: rgba(255, 255, 255, 0.03);
	}
}

.translation-key {
	padding: 8px;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	color: #3B82F6;
	font-weight: 600;
	word-break: break-word;
	display: flex;
	align-items: flex-start;
}

.translation-lang {
	padding: 8px;

	& textarea {
		width: 100%;
		min-height: 48px;
		padding: 10px 12px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 6px;
		color: var(--textColor);
		font-size: 14px;
		font-family: inherit;
		resize: vertical;
		transition: all 0.2s ease;
		line-height: 1.5;

		&:focus {
			outline: none;
			background: rgba(255, 255, 255, 0.08);
			border-color: var(--geniBlue);
			box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.1);
		}

		&:hover {
			border-color: rgba(255, 255, 255, 0.2);
		}
	}
}

@media (max-width: 1400px) {
	.category-body .translations-header,
	.translation-row {
		grid-template-columns: 200px repeat(5, 1fr);
		gap: 12px;
	}
}

@media (max-width: 1200px) {
	.category-body .translations-header,
	.translation-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.translation-lang-col {
		display: none;
	}

	.translation-lang::before {
		content: attr(data-lang);
		display: block;
		font-size: 12px;
		color: rgba(255, 255, 255, 0.6);
		margin-bottom: 4px;
		text-transform: uppercase;
	}

	.category-header .category-count {
		display: none;
	}
}