/* =========================================
   SOUKPRO DASHBOARD (Retailer + Supplier)
   Sidebar nav, stat cards, tables, tabs
   ========================================= */

/* --- Layout --- */
.sp-dash__layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--sp-space-2xl);
	align-items: start;
}

.sp-dash__sidebar,
.sp-dash__content {
	min-width: 0;
}

/* --- Sidebar --- */
.sp-dash__sidebar {
	background: var(--sp-color-white);
	border: 1px solid var(--sp-color-border-light);
	border-radius: var(--sp-radius-xl);
	padding: var(--sp-space-lg);
	position: sticky;
	top: calc(var(--sp-header-height, 80px) + var(--sp-space-md));
}

.sp-dash__user {
	display: flex;
	align-items: center;
	gap: var(--sp-space-sm);
	padding-bottom: var(--sp-space-md);
	margin-bottom: var(--sp-space-md);
	border-bottom: 1px solid var(--sp-color-border-light);
}

.sp-dash__avatar {
	border-radius: 50% !important;
	width: 48px !important;
	height: 48px !important;
}

.sp-dash__user-name {
	display: block;
	font-weight: var(--sp-font-weight-semibold);
	color: var(--sp-color-text);
	font-size: var(--sp-text-sm);
}

.sp-dash__user-role {
	display: block;
	font-size: var(--sp-text-xs);
	color: var(--sp-color-text-muted);
}

.sp-dash__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sp-dash__nav-item {
	display: flex;
	align-items: center;
	gap: var(--sp-space-sm);
	padding: var(--sp-space-sm) var(--sp-space-md);
	border-radius: var(--sp-radius-md);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-light);
	text-decoration: none;
	transition: all var(--sp-transition-fast);
}

.sp-dash__nav-item:hover {
	background: var(--sp-color-bg-alt);
	color: var(--sp-color-text);
}

.sp-dash__nav-item.is-active {
	background: var(--sp-color-primary-bg);
	color: var(--sp-color-primary);
	font-weight: var(--sp-font-weight-semibold);
}

.sp-dash__nav-item .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* --- Content --- */
.sp-dash__content {
	min-height: 400px;
}

.sp-dash__panel {
	display: none;
}

.sp-dash__panel.is-active {
	display: block;
}

.sp-dash__title {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-2xl);
	font-weight: var(--sp-font-weight-bold);
	margin-bottom: var(--sp-space-lg);
}

.sp-dash__sub {
	margin: calc(-1 * var(--sp-space-sm)) 0 var(--sp-space-lg);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-muted);
}

/* --- Stats Grid --- */
.sp-dash__stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--sp-space-md);
	margin-bottom: var(--sp-space-2xl);
}

.sp-stat-card {
	background: var(--sp-color-white);
	border: 1px solid var(--sp-color-border-light);
	border-radius: var(--sp-radius-xl);
	padding: var(--sp-space-lg);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-space-xs);
}

.sp-stat-card__icon {
	font-size: 28px;
	width: 28px;
	height: 28px;
	color: var(--sp-color-primary);
}

.sp-stat-card__val {
	font-size: var(--sp-text-3xl);
	font-weight: var(--sp-font-weight-bold);
	color: var(--sp-color-text);
}

.sp-stat-card__label {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-muted);
}

/* --- Section --- */
.sp-dash__section {
	margin-top: var(--sp-space-xl);
}

.sp-dash__section-title {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-lg);
	font-weight: var(--sp-font-weight-bold);
	margin-bottom: var(--sp-space-md);
}

/* --- Tables --- */
.sp-table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sp-text-sm);
	background: var(--sp-color-white);
	border-radius: var(--sp-radius-xl);
	overflow: hidden;
	border: 1px solid var(--sp-color-border-light);
}

.sp-table thead th {
	background: var(--sp-color-bg-alt);
	font-weight: var(--sp-font-weight-semibold);
	color: var(--sp-color-text);
	padding: var(--sp-space-sm) var(--sp-space-md);
	text-align: right;
	white-space: nowrap;
}

.sp-table tbody td {
	padding: var(--sp-space-sm) var(--sp-space-md);
	border-top: 1px solid var(--sp-color-border-light);
	color: var(--sp-color-text);
}

.sp-table tbody tr:hover {
	background: var(--sp-color-bg-alt);
}

/* Aggregated-RFQ table: top-aligned cells, product thumb + SKU, mobile cards. */
.sp-table--grq tbody td {
	vertical-align: top;
}

.sp-grq-product {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	min-width: 0;
}

.sp-grq-product__img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--sp-radius-md);
	background: var(--sp-color-bg-alt);
	flex-shrink: 0;
}

.sp-grq-product__meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.sp-grq-product__name {
	font-weight: var(--sp-font-weight-semibold);
	color: var(--sp-color-text);
}

.sp-grq-product__sku {
	font-size: var(--sp-text-xs);
	color: var(--sp-color-text-muted);
	direction: ltr;
	text-align: right;
}

/* PO table: product cell + supplier response action cluster. */
.sp-table--po tbody td {
	vertical-align: top;
}

.sp-po-product {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}

.sp-po-product__img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--sp-radius-md);
	background: var(--sp-color-bg-alt);
	flex-shrink: 0;
}

.sp-po-product__meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.sp-po-product__name {
	font-weight: var(--sp-font-weight-semibold);
	color: var(--sp-color-text);
}

.sp-po-product__sku {
	font-size: var(--sp-text-xs);
	color: var(--sp-color-text-muted);
	direction: ltr;
	text-align: right;
}

.sp-po-response {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.sp-po-response form {
	display: inline-flex;
	margin: 0;
	gap: 0.3rem;
	align-items: center;
}

.sp-po-qty-input {
	width: 90px;
}

@media (max-width: 768px) {
	.sp-table--grq thead,
	.sp-table--po thead {
		display: none;
	}

	.sp-table--grq,
	.sp-table--grq tbody,
	.sp-table--grq tr,
	.sp-table--grq td,
	.sp-table--po,
	.sp-table--po tbody,
	.sp-table--po tr,
	.sp-table--po td {
		display: block;
		width: 100%;
	}

	.sp-table--grq tbody tr,
	.sp-table--po tbody tr {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.4rem;
		padding: var(--sp-space-md);
		border: 1px solid var(--sp-color-border-light);
		border-radius: var(--sp-radius-md);
		margin-bottom: var(--sp-space-md);
	}

	.sp-table--grq tbody td,
	.sp-table--po tbody td {
		padding: 0.25rem 0;
		border-top: none;
		text-align: right;
	}

	.sp-table--grq td::before,
	.sp-table--po td::before {
		content: attr(data-label);
		display: block;
		font-size: var(--sp-text-xs);
		font-weight: var(--sp-font-weight-semibold);
		color: var(--sp-color-text-muted);
		margin-bottom: 0.15rem;
	}

	.sp-po-response form {
		width: 100%;
	}

	.sp-po-response .sp-po-qty-input {
		flex: 1;
		min-width: 0;
	}
}

/* --- Badges --- */
.sp-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--sp-space-sm);
	border-radius: var(--sp-radius-full);
	font-size: var(--sp-text-xs);
	font-weight: var(--sp-font-weight-semibold);
}

.sp-badge--completed,
.sp-badge--delivered {
	background: var(--sp-color-success-bg);
	color: var(--sp-color-success);
}

.sp-badge--confirmed,
.sp-badge--preparing,
.sp-badge--shipping,
.sp-badge--ready_for_shipping {
	background: rgba(59, 130, 246, 0.08);
	color: #3B82F6;
}

.sp-badge--new,
.sp-badge--under_review,
.sp-badge--sent_to_suppliers,
.sp-badge--awaiting_quotes {
	background: var(--sp-color-warning-bg);
	color: var(--sp-color-warning-dark);
}

.sp-badge--cancelled,
.sp-badge--stuck,
.sp-badge--dispute {
	background: rgba(239, 68, 68, 0.08);
	color: #EF4444;
}

.sp-badge--quote_received,
.sp-badge--negotiation,
.sp-badge--quote_selected,
.sp-badge--pending {
	background: rgba(139, 92, 246, 0.08);
	color: #8B5CF6;
}

/* --- Empty State --- */
.sp-empty-state {
	text-align: center;
	padding: var(--sp-space-3xl) var(--sp-space-xl);
	color: var(--sp-color-text-muted);
}

.sp-empty-state .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	margin-bottom: var(--sp-space-md);
	display: inline-block;
}

.sp-empty-state p {
	font-size: var(--sp-text-base);
	margin-top: var(--sp-space-xs);
}

/* --- RFQ Cards --- */
.sp-rfq-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-md);
}

.sp-rfq-card {
	background: var(--sp-color-white);
	border: 1px solid var(--sp-color-border-light);
	border-radius: var(--sp-radius-xl);
	padding: var(--sp-space-md) var(--sp-space-lg);
}

.sp-rfq-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-space-sm);
}

.sp-rfq-card__title {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-base);
	font-weight: var(--sp-font-weight-bold);
	margin: 0;
}

.sp-rfq-card__meta {
	display: flex;
	gap: var(--sp-space-md);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-muted);
}

/* --- RFQ Groups + Accordion Cards --- */
.sp-rfq-group {
	margin-bottom: var(--sp-space-xl);
}

.sp-rfq-group__title {
	display: flex;
	align-items: center;
	gap: var(--sp-space-sm);
	margin-bottom: var(--sp-space-sm);
}

.sp-rfq-group__title h3 {
	margin: 0;
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-base);
	font-weight: var(--sp-font-weight-bold);
}

.sp-badge--quoted,
.sp-badge--submitted {
	background: var(--sp-color-success-bg);
	color: var(--sp-color-success);
}

.sp-badge--negotiating {
	background: rgba(139, 92, 246, 0.08);
	color: #8B5CF6;
}

.sp-rfq-card__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-space-md);
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: right;
}

.sp-rfq-card__toggle-main {
	display: flex;
	align-items: center;
	gap: var(--sp-space-sm);
	flex-wrap: wrap;
}

.sp-rfq-card__meta-inline {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-muted);
	margin-inline-start: auto;
}

.sp-rfq-card__chevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--sp-color-text-muted);
	border-bottom: 2px solid var(--sp-color-text-muted);
	transform: rotate(45deg);
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.sp-rfq-card.is-open .sp-rfq-card__chevron {
	transform: rotate(-135deg);
}

.sp-rfq-card__body {
	display: none;
	margin-top: var(--sp-space-md);
	padding-top: var(--sp-space-md);
	border-top: 1px solid var(--sp-color-border-light);
}

.sp-rfq-card.is-open .sp-rfq-card__body {
	display: block;
}

.sp-rfq-card--readonly {
	cursor: default;
}

.sp-rfq-card--readonly .sp-rfq-card__header {
	align-items: flex-start;
}

.sp-rfq-card__note {
	display: inline-flex;
	align-items: center;
	font-size: var(--sp-text-xs);
	color: var(--sp-color-text-muted);
}

/* --- Negotiation Cards --- */
.sp-negotiation-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-sm);
}

.sp-negotiation-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--sp-color-white);
	border: 1px solid var(--sp-color-border-light);
	border-radius: var(--sp-radius-xl);
	padding: var(--sp-space-md);
}

.sp-negotiation-card__msg {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text);
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left: var(--sp-space-md);
}

.sp-negotiation-card__date {
	font-size: var(--sp-text-xs);
	color: var(--sp-color-text-muted);
	white-space: nowrap;
}

/* --- Forms --- */
.sp-form--readonly .sp-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-xs);
	padding: var(--sp-space-md) 0;
	border-bottom: 1px solid var(--sp-color-border-light);
}

.sp-form--readonly .sp-form-group:last-child {
	border-bottom: none;
}

.sp-form--readonly .sp-form-group label {
	font-weight: var(--sp-font-weight-semibold);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-muted);
}

.sp-form--readonly .sp-form-group span {
	font-size: var(--sp-text-base);
	color: var(--sp-color-text);
}

/* --- Dashboard forms & notices --- */
.sp-dash__form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-md);
	margin-top: var(--sp-space-md);
}

.sp-dash__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--sp-space-md);
}

.sp-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-xs);
}

.sp-form-field label {
	font-weight: var(--sp-font-weight-semibold);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text);
}

.sp-dash .sp-input,
.sp-dash .sp-select {
	width: 100%;
	padding: var(--sp-space-sm) var(--sp-space-md);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-md);
	font-family: var(--sp-font-body);
	font-size: var(--sp-text-base);
	color: var(--sp-color-text);
	background: var(--sp-color-white);
	transition: border-color var(--sp-transition-fast);
}

.sp-dash .sp-input:focus,
.sp-dash .sp-select:focus {
	outline: none;
	border-color: var(--sp-color-primary);
	box-shadow: 0 0 0 3px var(--sp-color-primary-bg);
}

.sp-dash .sp-input--inline {
	display: inline-block;
	width: auto;
	max-width: 150px;
	padding: calc(var(--sp-space-xs) + 1px) var(--sp-space-sm);
	font-size: var(--sp-text-sm);
	margin-inline-end: var(--sp-space-xs);
}

.sp-dash__hint {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-muted);
	margin: 0;
}

/* Competitive facilities checkboxes in the supplier RFQ quote form. */
.sp-rfq-facilities {
	margin: 0;
	padding: var(--sp-space-sm) var(--sp-space-md);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-md);
}

.sp-rfq-facilities__legend {
	font-weight: var(--sp-font-weight-semibold);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text);
	padding: 0 var(--sp-space-xs);
}

.sp-rfq-facilities__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--sp-space-xs);
	margin-top: var(--sp-space-xs);
}

.sp-rfq-facilities__item {
	display: flex;
	align-items: center;
	gap: var(--sp-space-xs);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text);
	cursor: pointer;
}

.sp-rfq-facilities__other {
	display: flex;
	align-items: center;
	gap: var(--sp-space-sm);
	margin-top: var(--sp-space-sm);
	padding-top: var(--sp-space-sm);
	border-top: 1px dashed var(--sp-color-border);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text);
}

.sp-rfq-facilities__other label {
	white-space: nowrap;
}

.sp-rfq-facilities__other .sp-input {
	flex: 1;
}

.sp-dash__muted {
	color: var(--sp-color-text-muted);
}

.sp-dash__row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-space-xs);
}

.sp-dash__notice {
	padding: var(--sp-space-sm) var(--sp-space-md);
	border-radius: var(--sp-radius-md);
	font-size: var(--sp-text-sm);
	font-weight: var(--sp-font-weight-semibold);
	margin-bottom: var(--sp-space-md);
	border: 1px solid transparent;
}

.sp-dash__notice--success {
	background: var(--sp-color-success-bg);
	color: var(--sp-color-success);
	border-color: rgba(16, 185, 129, 0.25);
}

.sp-dash__notice--error {
	background: rgba(239, 68, 68, 0.08);
	color: #EF4444;
	border-color: rgba(239, 68, 68, 0.25);
}

.sp-dash__notice--info {
	background: rgba(59, 130, 246, 0.08);
	color: #3B82F6;
	border-color: rgba(59, 130, 246, 0.25);
}

/* =========================================
   SUBSCRIPTION PANEL (yw-sub-* emitted by the
   plugin templates/account/subscription.php)
   ========================================= */
.yw-sub-panel {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-lg);
}

.yw-sub-panel__title {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-lg);
	color: var(--sp-color-text);
	margin: 0;
}

.yw-sub-card {
	background: var(--sp-color-white);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-lg);
	padding: var(--sp-space-md) var(--sp-space-lg);
}

.yw-sub-card--gold {
	border-color: var(--sp-color-warning);
	box-shadow: 0 0 0 1px var(--sp-color-warning);
}

.yw-sub-card--silver {
	border-color: #d4d4d8;
}

.yw-sub-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-space-sm);
	padding: var(--sp-space-xs) 0;
	border-bottom: 1px dashed var(--sp-color-border);
}

.yw-sub-card__row:last-child {
	border-bottom: 0;
}

.yw-sub-card__label {
	color: var(--sp-color-text-muted);
	font-size: var(--sp-text-sm);
}

.yw-sub-card__value {
	font-weight: var(--sp-font-weight-semibold);
	color: var(--sp-color-text);
	font-size: var(--sp-text-sm);
	text-align: end;
}

.yw-sub-card__cta {
	margin-top: var(--sp-space-sm);
}

.yw-sub-panel__heading {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-base);
	color: var(--sp-color-text);
	margin: 0;
}

.yw-status-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--sp-radius-full);
	font-size: var(--sp-text-xs);
	font-weight: var(--sp-font-weight-semibold);
	background: var(--sp-color-bg-alt);
	color: var(--sp-color-text-muted);
}

.yw-status--active {
	background: var(--sp-color-success-bg);
	color: var(--sp-color-success);
}

.yw-status--pending {
	background: rgba(245, 158, 11, 0.15);
	color: #B45309;
}

.yw-status--expired {
	background: rgba(239, 68, 68, 0.1);
	color: #EF4444;
}

.yw-sub-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--sp-radius-full);
	font-size: var(--sp-text-xs);
	font-weight: var(--sp-font-weight-bold);
	margin-inline-start: var(--sp-space-xs);
}

.yw-sub-badge--silver {
	background: #f4f4f5;
	color: #3f3f46;
	border: 1px solid #d4d4d8;
}

.yw-sub-badge--gold {
	background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
	color: #78350f;
	border: 1px solid #d97706;
}

.yw-notice {
	padding: var(--sp-space-sm) var(--sp-space-md);
	border-radius: var(--sp-radius-md);
	background: var(--sp-color-bg-alt);
	color: var(--sp-color-text-muted);
	font-size: var(--sp-text-sm);
}

.yw-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--sp-color-white);
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
}

.yw-table th,
.yw-table td {
	padding: var(--sp-space-xs) var(--sp-space-sm);
	border-bottom: 1px solid var(--sp-color-border);
	text-align: start;
	font-size: var(--sp-text-sm);
}

.yw-table th {
	background: var(--sp-color-bg-alt);
	color: var(--sp-color-text-muted);
	font-weight: var(--sp-font-weight-semibold);
}

.yw-sub-bank-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-xs);
}

.yw-sub-bank {
	padding: var(--sp-space-xs) var(--sp-space-sm);
	border-radius: var(--sp-radius-md);
	background: var(--sp-color-white);
	border: 1px solid var(--sp-color-border);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text);
}

.yw-text-muted {
	color: var(--sp-color-text-muted);
	font-size: var(--sp-text-sm);
}

.yw-sub-notify-form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-sm);
	max-width: 460px;
}

.yw-sub-notify-form select,
.yw-sub-notify-form textarea {
	width: 100%;
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-md);
	padding: var(--sp-space-xs) var(--sp-space-sm);
	font-family: var(--sp-font-body);
	font-size: var(--sp-text-sm);
	background: var(--sp-color-white);
}

.yw-sub-notify-form .yw-btn {
	align-self: flex-start;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
	.sp-dash__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-dash__sidebar {
		position: static;
	}

	.sp-dash__nav {
		flex-direction: row;
		overflow-x: auto;
		gap: 0;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--sp-space-xs);
	}

	.sp-dash__nav-item {
		white-space: nowrap;
		padding: var(--sp-space-sm) var(--sp-space-md);
	}

	.sp-dash__stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.sp-table thead th,
	.sp-table tbody td {
		padding: var(--sp-space-xs) var(--sp-space-sm);
	}
}

/* --- Notifications --- */
.sp-stat-card--link {
	display: flex;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: box-shadow .15s ease, transform .15s ease;
}

.sp-stat-card--link:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

.sp-notif-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-notif-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-space-md);
	padding: var(--sp-space-md);
	border: 1px solid var(--sp-color-border-light);
	border-radius: var(--sp-radius-md);
	margin-bottom: var(--sp-space-sm);
}

.sp-notif-item.is-unread {
	border-color: var(--sp-color-primary);
	background: var(--sp-color-bg-alt);
}

.sp-notif-item__main {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-xs);
	min-width: 0;
}

.sp-notif-item__text {
	margin: 0;
	color: var(--sp-color-text);
}

.sp-notif-item.is-read .sp-notif-item__text {
	opacity: .72;
}

.sp-notif-item__meta {
	font-size: var(--sp-text-xs);
	color: var(--sp-color-text-muted);
}

.sp-notif-item__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-space-sm);
	flex-shrink: 0;
	flex-wrap: wrap;
}

.sp-notif-item__actions form {
	margin: 0;
}

@media (max-width: 768px) {
	.sp-notif-item {
		flex-wrap: wrap;
	}

	.sp-notif-item__actions {
		width: 100%;
	}
}

/* --- Supplier profile --- */
.sp-profile-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-space-md);
}

.sp-field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-xs);
	margin-bottom: 0;
}

.sp-field--full {
	grid-column: 1 / -1;
}

.sp-field label {
	font-size: var(--sp-text-sm);
	font-weight: var(--sp-font-weight-semibold);
	color: var(--sp-color-text);
}

.sp-field input,
.sp-field textarea,
.sp-field select {
	width: 100%;
	padding: var(--sp-space-sm);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-sm);
	background: var(--sp-color-bg);
	color: var(--sp-color-text);
	font-size: var(--sp-text-sm);
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sp-field input:hover,
.sp-field select:hover,
.sp-field textarea:hover {
	border-color: #CBD5E1;
}

.sp-field input:focus-visible,
.sp-field select:focus-visible,
.sp-field textarea:focus-visible {
	outline: 0;
	border-color: var(--sp-color-primary);
	box-shadow: 0 0 0 3px rgba(232, 74, 53, 0.12);
}

.sp-field input::placeholder,
.sp-field textarea::placeholder {
	color: var(--sp-color-text-muted);
}

.sp-logo__preview {
	max-width: 150px;
	max-height: 150px;
	height: auto;
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-sm);
	padding: 4px;
	object-fit: contain;
}

.sp-logo input[type="file"] {
	padding: 4px 0;
	border: 0;
	box-shadow: none;
}

.sp-logo__remove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--sp-text-sm);
	font-weight: var(--sp-font-weight-normal);
	color: var(--sp-color-text-muted);
}

.sp-logo__remove input {
	width: auto;
	padding: 0;
}

.sp-logo--grid {
	grid-column: 1 / -1;
}

.sp-cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-space-sm);
}

.sp-check {
	position: relative;
}

.sp-check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sp-check span {
	display: inline-flex;
	align-items: center;
	padding: var(--sp-space-xs) var(--sp-space-md);
	border: 1px solid var(--sp-color-border);
	border-radius: 999px;
	background: var(--sp-color-bg);
	color: var(--sp-color-text);
	font-size: var(--sp-text-sm);
	font-weight: 500;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sp-check span:hover {
	border-color: #CBD5E1;
}

.sp-check input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(232, 74, 53, 0.15);
}

.sp-check input:checked + span {
	border-color: var(--sp-color-primary);
	background: var(--sp-color-primary-bg);
	color: var(--sp-color-primary);
	font-weight: 600;
}

.sp-dash__sep {
	border: 0;
	border-top: 1px solid var(--sp-color-border-light);
	margin: var(--sp-space-lg) 0;
}

.sp-dash__subtitle {
	margin-bottom: var(--sp-space-sm);
}

.sp-prod-items {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-md);
	margin-bottom: var(--sp-space-md);
}

.sp-prod-item {
	display: flex;
	gap: var(--sp-space-md);
	padding: var(--sp-space-md);
	border: 1px solid var(--sp-color-border-light);
	border-radius: var(--sp-radius-md);
	background: var(--sp-color-bg);
}

.sp-prod-item[data-slot="template"] {
	display: none !important;
}

.sp-prod-item__preview {
	flex-shrink: 0;
	width: 140px;
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-sm);
}

.sp-prod-item__thumb {
	width: 140px;
	height: 100px;
	object-fit: cover;
	border-radius: var(--sp-radius-sm);
}

.sp-prod-item__fields {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-space-sm);
}

.sp-prod-item__fields .sp-field:last-child {
	grid-column: 1 / -1;
}

.sp-prod-actions {
	display: flex;
	gap: var(--sp-space-sm);
	align-items: center;
}

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

	.sp-prod-item {
		flex-direction: column;
	}
}

.sp-prod-item__preview img.sp-prod-item__thumb {
	display: block;
	margin-bottom: var(--sp-space-xs);
}

.sp-file {
	font-size: var(--sp-text-sm);
}

.sp-prod-gal-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-space-xs);
	margin-bottom: var(--sp-space-sm);
}

.sp-prod-gal-thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--sp-radius-sm);
	border: 1px solid var(--sp-color-border-light);
}

.sp-form__submit {
	width: 100%;
	padding: var(--sp-space-md);
	font-size: 1rem;
	font-weight: 700;
}