.supplier-upload-page-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	margin-bottom: 1.25rem;
}

.supplier-upload-page-heading .my-account-header {
	margin: 0;
}

#supplier-invoice-upload-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

.supplier-upload-section {
	margin-top: 3rem;
}

.supplier-upload-section-title,
.supplier-po-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.supplier-upload-section-title {
	border-bottom: 1px solid var(--border-color, #e5e7eb);
	padding-bottom: 0.75rem;
}

.supplier-upload-section-title h3 {
	font-size: 1.35rem;
	margin: 0;
}

.supplier-file-control {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2rem;
}

.supplier-file-control input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.supplier-file-button {
	flex: 0 0 auto;
	margin: 0;
	cursor: pointer;
}

#supplier-upload-file-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.supplier-po-field {
	margin-bottom: 1.75rem;
	margin-top: 1.5rem;
}

.supplier-po-card {
	border: 1px solid var(--border-color, #dfe2e5);
	border-radius: 0.5rem;
	background: var(--card-bg, #fff);
	overflow: hidden;
}

.supplier-po-heading {
	padding: 0.875rem 1rem;
}

.supplier-po-heading input {
	max-width: 18rem;
}

.supplier-po-heading label {
	margin-bottom: 0;
}

.supplier-po-selected-count {
	color: var(--text-muted, #6c757d);
	font-size: 0.8rem;
	margin-left: 0.5rem;
}

.supplier-po-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 2.5rem;
	padding: 0.35rem 1rem;
	background: var(--subtle-accent, #f8f9fa);
	border-top: 1px solid var(--border-color, #e5e7eb);
}

.supplier-po-select-all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	cursor: pointer;
}

.supplier-po-actions .btn-link {
	padding-left: 0.5rem;
	padding-right: 0;
}

.supplier-po-list {
	border-top: 1px solid var(--border-color, #dfe2e5);
	max-height: 18rem;
	overflow-y: auto;
}

.supplier-po-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.75rem;
	border-bottom: 1px solid var(--border-color, #edf0f2);
	cursor: pointer;
}

.supplier-po-row:hover {
	background: var(--bg-light-gray, #f8f9fa);
}

.supplier-po-row.is-selected {
	background: var(--control-bg-on-gray, #f1f5f9);
}

.supplier-po-row:last-child {
	border-bottom: 0;
}

.supplier-po-row span {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.supplier-po-row small {
	color: var(--text-muted, #6c757d);
	font-size: 0.78rem;
}

.supplier-po-total,
.supplier-upload-amount {
	text-align: right;
}

.supplier-upload-actions {
	display: flex !important;
	align-items: center;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 0.5rem !important;
}

.supplier-upload-website-list {
	padding-left: var(--padding-lg, 1.5rem);
	padding-right: var(--padding-lg, 1.5rem);
}

.supplier-upload-list-item .supplier-upload-actions {
	position: relative;
	z-index: 1;
}

.supplier-upload-empty {
	padding: 2rem 1rem;
	text-align: center;
}

@media (max-width: 767px) {
	.supplier-upload-page-heading {
		align-items: stretch;
		flex-direction: column;
		margin-bottom: 1rem;
	}

	#supplier-invoice-upload-btn {
		align-self: flex-start;
	}

	.supplier-po-heading {
		align-items: stretch;
		flex-direction: column;
		padding: 0.875rem;
	}

	.supplier-po-heading input {
		max-width: none;
	}

	.supplier-po-actions {
		padding-left: 0.875rem;
		padding-right: 0.875rem;
	}

}

@media (max-width: 575px) {
	#supplier-invoice-upload-modal .modal-dialog {
		margin: 0.5rem;
	}

	#supplier-invoice-upload-modal .modal-body,
	#supplier-invoice-upload-modal .modal-header,
	#supplier-invoice-upload-modal .modal-footer {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.supplier-upload-section-title {
		align-items: flex-start;
	}

	.supplier-upload-section-title h3 {
		font-size: 1.15rem;
	}

	.supplier-po-row {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
	}

	.supplier-po-total {
		grid-column: 2;
		text-align: left;
	}

	.supplier-upload-list-item .supplier-upload-status,
	.supplier-upload-list-item .supplier-upload-actions,
	.supplier-upload-list-item .supplier-upload-amount {
		margin-top: 0.75rem;
		text-align: left !important;
	}
}