/**
 * Sumswork Multivendor — Dashboard Premium UI (Phase 1B)
 *
 * Hybrid layout:
 *  - Desktop ≥ 1024px: fixed sidebar + main content area + topbar.
 *  - Tablet  ≥ 768px : collapsible sidebar (icons only) + main + topbar.
 *  - Mobile  < 768px : full-screen main + topbar + bottom nav (sidebar is drawer).
 */

/* Reset wrapping container so dashboard fills the viewport area cleanly. */
.smv-dash {
	font-family: var(--smv-font);
	color: var(--smv-text);
	background: var(--smv-surface);
	min-height: 100vh;
	display: grid;
	grid-template-columns: 260px 1fr;
}

@media (max-width: 1023px) {
	.smv-dash { grid-template-columns: 0 1fr; }
}

/* ═══════════════════════════════════════════════════════
 * SIDEBAR
 * ═══════════════════════════════════════════════════════ */
.smv-dash-side {
	background: #0f172a;
	color: #fff;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	z-index: 50;
}

@media (max-width: 1023px) {
	.smv-dash-side {
		position: fixed;
		top: 0; left: 0;
		width: 280px;
		transform: translateX(-100%);
		transition: transform .25s cubic-bezier(.4, 0, .2, 1);
		box-shadow: 4px 0 24px rgba(0, 0, 0, .25);
	}
	.smv-dash-side.open { transform: translateX(0); }
}

.smv-dash-side-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.smv-dash-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.smv-dash-brand-mark {
	width: 40px; height: 40px;
	background: var(--smv-primary);
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 18px;
	color: #fff;
	flex-shrink: 0;
}
.smv-dash-brand-text { min-width: 0; }
.smv-dash-brand-text strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.smv-dash-brand-text small {
	font-size: 11px;
	color: rgba(255, 255, 255, .55);
	font-weight: 500;
}

.smv-dash-side-toggle {
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, .65);
	cursor: pointer;
	padding: 6px;
	display: none;
}
@media (max-width: 1023px) {
	.smv-dash-side-toggle { display: block; }
}

.smv-dash-nav {
	flex: 1;
	padding: 16px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.smv-dash-nav-item {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 11px 14px;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, .7);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border-radius: 8px;
	transition: background .15s, color .15s;
	text-align: left;
}
.smv-dash-nav-item:hover {
	background: rgba(255, 255, 255, .06);
	color: #fff;
}
.smv-dash-nav-item.active {
	background: var(--smv-primary);
	color: #fff;
	box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}
.smv-nav-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.smv-dash-side-foot {
	padding: 16px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.smv-dash-side-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	color: rgba(255, 255, 255, .65);
	font-size: 13px;
	text-decoration: none;
	border-radius: 6px;
	transition: color .15s, background .15s;
}
.smv-dash-side-link:hover {
	color: #fff;
	background: rgba(255, 255, 255, .06);
}
.smv-dash-logout:hover { color: var(--smv-danger); }

/* Backdrop for mobile drawer */
.smv-dash-side-backdrop {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 49;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s;
}
.smv-dash-side-backdrop.show {
	opacity: 1;
	pointer-events: all;
}

/* ═══════════════════════════════════════════════════════
 * MAIN AREA
 * ═══════════════════════════════════════════════════════ */
.smv-dash-main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-width: 0;
}

/* Topbar */
.smv-dash-top {
	background: #fff;
	border-bottom: 1px solid var(--smv-border);
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	position: sticky;
	top: 0;
	z-index: 30;
}
@media (max-width: 640px) {
	.smv-dash-top { padding: 12px 16px; }
}

.smv-dash-side-mob-toggle {
	background: transparent;
	border: none;
	color: var(--smv-text);
	padding: 6px;
	cursor: pointer;
	display: none;
	flex-shrink: 0;
}
@media (max-width: 1023px) {
	.smv-dash-side-mob-toggle { display: block; }
}

.smv-dash-top-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	letter-spacing: -.2px;
	flex: 1;
}

.smv-dash-top-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.smv-dash-search {
	position: relative;
	display: flex;
	align-items: center;
}
.smv-dash-search svg {
	position: absolute;
	left: 12px;
	color: var(--smv-text-muted);
	pointer-events: none;
}
.smv-dash-search input {
	width: 260px;
	padding: 9px 12px 9px 36px;
	border: 1px solid var(--smv-border-strong);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	background: var(--smv-surface);
}
.smv-dash-search input:focus {
	outline: none;
	background: #fff;
	border-color: var(--smv-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
@media (max-width: 768px) {
	.smv-dash-search { display: none; }
}

.smv-dash-bell {
	position: relative;
	background: var(--smv-surface);
	border: 1px solid var(--smv-border);
	color: var(--smv-text);
	width: 40px; height: 40px;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.smv-dash-bell:hover { background: var(--smv-surface-2); }
.smv-dash-bell-count {
	position: absolute;
	top: -6px; right: -6px;
	background: var(--smv-danger);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	min-width: 18px; height: 18px;
	border-radius: 9px;
	padding: 0 5px;
	line-height: 18px;
	text-align: center;
	border: 2px solid #fff;
}

.smv-dash-user {
	width: 40px; height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--smv-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	flex-shrink: 0;
}
.smv-dash-user img { width: 100%; height: 100%; object-fit: cover; }

/* Content */
.smv-dash-content {
	padding: 24px;
	flex: 1;
}
@media (max-width: 640px) {
	.smv-dash-content { padding: 16px; padding-bottom: 90px; }
}

.smv-panel { display: none; }
.smv-panel.active { display: block; }

.smv-panel-h {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.smv-panel-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.3px; }
.smv-panel-sub { color: var(--smv-text-muted); font-size: 14px; margin: 4px 0 0; }

/* ═══════════════════════════════════════════════════════
 * HOME — Hero & KPIs
 * ═══════════════════════════════════════════════════════ */
.smv-hero-card {
	background: linear-gradient(135deg, var(--smv-primary), var(--smv-primary-dark));
	color: #fff;
	padding: 28px;
	border-radius: 14px;
	margin-bottom: 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	box-shadow: 0 8px 24px rgba(37, 99, 235, .2);
}
.smv-hero-title { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -.4px; }
.smv-hero-sub { margin: 6px 0 0; opacity: .9; font-size: 15px; }
.smv-hero-right .smv-btn-primary {
	background: #fff;
	color: var(--smv-primary);
}
.smv-hero-right .smv-btn-primary:hover { background: #f0f7ff; }

.smv-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 22px;
}
@media (max-width: 1024px) { .smv-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .smv-kpi-grid { grid-template-columns: 1fr; } }

.smv-kpi {
	background: #fff;
	border: 1px solid var(--smv-border);
	border-radius: 12px;
	padding: 18px 20px;
}
.smv-kpi-label {
	font-size: 12px;
	color: var(--smv-text-muted);
	text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 600;
}
.smv-kpi-value {
	font-size: 28px;
	font-weight: 800;
	color: var(--smv-text);
	letter-spacing: -.6px;
	margin: 6px 0 4px;
	line-height: 1.1;
}
.smv-kpi-sub {
	font-size: 12px;
	color: var(--smv-text-muted);
}
.smv-kpi-primary {
	background: var(--smv-text);
	color: #fff;
	border-color: var(--smv-text);
}
.smv-kpi-primary .smv-kpi-label { color: rgba(255, 255, 255, .65); }
.smv-kpi-primary .smv-kpi-value { color: #fff; }
.smv-kpi-cta {
	margin-top: 8px;
	background: transparent;
	border: none;
	color: #93c5fd;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
}
.smv-kpi-cta:hover { color: #fff; }

.smv-grid-2-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 22px;
}
@media (max-width: 900px) { .smv-grid-2-cols { grid-template-columns: 1fr; } }

.smv-card-h { margin-bottom: 12px; }
.smv-card-h h3 { font-size: 16px; font-weight: 650; margin: 0; }

.smv-quick-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
@media (max-width: 480px) { .smv-quick-actions { grid-template-columns: 1fr; } }
.smv-qa-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background: var(--smv-surface);
	border: 1px solid var(--smv-border);
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--smv-text);
	text-align: left;
	transition: background .15s, border-color .15s, transform .05s;
}
.smv-qa-btn:hover {
	background: #fff;
	border-color: var(--smv-primary);
	color: var(--smv-primary);
}
.smv-qa-btn:active { transform: scale(.98); }
.smv-qa-ico { font-size: 22px; }

.smv-snapshot {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.smv-snapshot-logo {
	width: 88px; height: 88px;
	border-radius: 14px;
	background: var(--smv-surface-2);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight: 800;
	color: var(--smv-primary);
	overflow: hidden;
	flex-shrink: 0;
	border: 3px solid #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.smv-snapshot-logo img { width: 100%; height: 100%; object-fit: cover; }
.smv-snapshot-info { flex: 1; min-width: 0; }
.smv-snapshot-name { font-size: 16px; font-weight: 700; }
.smv-snapshot-tag { color: var(--smv-text-muted); font-size: 13px; margin: 2px 0; }
.smv-snapshot-loc { color: var(--smv-text-muted); font-size: 12px; }
.smv-snapshot-actions { margin-top: 10px; }

.smv-activity { display: flex; flex-direction: column; gap: 0; }
.smv-activity-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--smv-border);
}
.smv-activity-row:last-child { border-bottom: none; }
.smv-activity-icon {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--smv-primary-light);
	color: var(--smv-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
}
.smv-activity-body { flex: 1; min-width: 0; }
.smv-activity-text { font-size: 14px; color: var(--smv-text); }
.smv-activity-time { font-size: 11px; color: var(--smv-text-muted); margin-top: 2px; }
.smv-loading-row { color: var(--smv-text-muted); font-size: 14px; text-align: center; padding: 24px 0; }

/* ═══════════════════════════════════════════════════════
 * FILTERS / PILLS / VIEW TOGGLE
 * ═══════════════════════════════════════════════════════ */
.smv-filters {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.smv-status-pills {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	background: var(--smv-surface);
	padding: 4px;
	border-radius: 10px;
}
.smv-pill {
	background: transparent;
	border: none;
	padding: 7px 14px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--smv-text-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.smv-pill:hover { color: var(--smv-text); }
.smv-pill.active {
	background: #fff;
	color: var(--smv-primary);
	box-shadow: var(--smv-shadow-sm);
}

.smv-view-toggle {
	display: flex;
	background: var(--smv-surface);
	border: 1px solid var(--smv-border);
	border-radius: 8px;
	padding: 2px;
}
.smv-view-toggle button {
	background: transparent;
	border: none;
	padding: 7px 10px;
	cursor: pointer;
	color: var(--smv-text-muted);
	border-radius: 6px;
	display: flex;
	align-items: center;
}
.smv-view-toggle button.active {
	background: #fff;
	color: var(--smv-primary);
	box-shadow: var(--smv-shadow-sm);
}

/* ═══════════════════════════════════════════════════════
 * PRODUCT LIST (grid + list views)
 * ═══════════════════════════════════════════════════════ */
.smv-prod-list[data-view="grid"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
}
.smv-prod-list[data-view="list"] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.smv-prod-item {
	background: #fff;
	border: 1px solid var(--smv-border);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .15s, box-shadow .15s, border-color .15s;
	position: relative;
}
.smv-prod-item:hover {
	border-color: var(--smv-primary);
	box-shadow: var(--smv-shadow);
}

.smv-prod-list[data-view="grid"] .smv-prod-item-thumb {
	aspect-ratio: 1;
	background: var(--smv-surface-2);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.smv-prod-list[data-view="grid"] .smv-prod-item-thumb-placeholder {
	font-size: 40px; opacity: .25;
}
.smv-prod-list[data-view="grid"] .smv-prod-item-body { padding: 12px; }

.smv-prod-list[data-view="list"] .smv-prod-item {
	display: grid;
	grid-template-columns: 80px 1fr auto auto;
	gap: 16px;
	padding: 12px;
	align-items: center;
}
.smv-prod-list[data-view="list"] .smv-prod-item-thumb {
	width: 80px; height: 80px;
	border-radius: 8px;
	background: var(--smv-surface-2);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.smv-prod-list[data-view="list"] .smv-prod-item-thumb-placeholder {
	font-size: 28px; opacity: .25;
}
.smv-prod-list[data-view="list"] .smv-prod-item-body { padding: 0; }

.smv-prod-item-status {
	position: absolute;
	top: 10px; right: 10px;
	background: rgba(255, 255, 255, .95);
	padding: 3px 9px;
	border-radius: 99px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.smv-prod-list[data-view="list"] .smv-prod-item-status { position: static; }

.smv-prod-status-approved   { background: #dcfce7; color: #166534; }
.smv-prod-status-pending    { background: #fef3c7; color: #92400e; }
.smv-prod-status-draft      { background: #f1f5f9; color: #475569; }
.smv-prod-status-rejected   { background: #fee2e2; color: #991b1b; }

.smv-prod-item-cat { font-size: 11px; color: var(--smv-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.smv-prod-item-title { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; }
.smv-prod-item-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--smv-text-muted); }
.smv-prod-item-price { font-weight: 700; color: var(--smv-text); font-size: 13px; }
.smv-prod-item-sale { color: var(--smv-danger); font-weight: 700; margin-right: 5px; font-size: 13px; }
.smv-prod-item-orig { text-decoration: line-through; color: var(--smv-text-muted); font-size: 11px; }

.smv-prod-actions {
	display: flex;
	gap: 6px;
	margin-top: 8px;
}
.smv-prod-list[data-view="list"] .smv-prod-actions { margin-top: 0; }
.smv-prod-action {
	background: var(--smv-surface);
	border: 1px solid var(--smv-border);
	color: var(--smv-text);
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}
.smv-prod-action:hover { background: var(--smv-surface-2); border-color: var(--smv-text-muted); }
.smv-prod-action-danger { color: var(--smv-danger); }
.smv-prod-action-danger:hover { background: #fef2f2; border-color: #fca5a5; }
.smv-prod-action-primary { background: var(--smv-primary); color: #fff; border-color: var(--smv-primary); }
.smv-prod-action-primary:hover { background: var(--smv-primary-dark); }

.smv-pagination {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-top: 22px;
	flex-wrap: wrap;
}
.smv-page-btn {
	min-width: 36px; height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	background: #fff;
	border: 1px solid var(--smv-border);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	color: var(--smv-text);
	font-family: inherit;
}
.smv-page-btn:hover { border-color: var(--smv-primary); color: var(--smv-primary); }
.smv-page-btn.active { background: var(--smv-primary); border-color: var(--smv-primary); color: #fff; }

/* ═══════════════════════════════════════════════════════
 * ORDERS
 * ═══════════════════════════════════════════════════════ */
.smv-orders-list { display: flex; flex-direction: column; gap: 10px; }
.smv-order-row {
	background: #fff;
	border: 1px solid var(--smv-border);
	border-radius: 10px;
	padding: 14px 16px;
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	gap: 14px;
	align-items: center;
}
@media (max-width: 768px) {
	.smv-order-row {
		grid-template-columns: 1fr;
	}
}
.smv-order-prod { font-weight: 600; font-size: 14px; }
.smv-order-meta { font-size: 12px; color: var(--smv-text-muted); margin-top: 2px; }
.smv-order-status-sel {
	padding: 6px 10px;
	border: 1px solid var(--smv-border-strong);
	border-radius: 6px;
	font-size: 13px;
	background: #fff;
}

/* ═══════════════════════════════════════════════════════
 * FINANCE
 * ═══════════════════════════════════════════════════════ */
.smv-balance-card {
	background: linear-gradient(135deg, var(--smv-text), #1e293b);
	color: #fff;
	border-radius: 14px;
	padding: 26px 28px;
	margin-bottom: 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.smv-balance-label { font-size: 12px; color: rgba(255, 255, 255, .65); text-transform: uppercase; font-weight: 600; letter-spacing: .5px; }
.smv-balance-value { font-size: 36px; font-weight: 800; letter-spacing: -.8px; margin: 4px 0; }
.smv-balance-sub { font-size: 13px; color: rgba(255, 255, 255, .65); }

.smv-payout-row {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	gap: 16px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--smv-border);
	align-items: center;
}
.smv-payout-row:last-child { border-bottom: none; }
.smv-payout-amount { font-weight: 700; }
.smv-payout-method { font-size: 13px; color: var(--smv-text-muted); }
.smv-payout-time   { font-size: 12px; color: var(--smv-text-muted); }
@media (max-width: 640px) {
	.smv-payout-row { grid-template-columns: 1fr 1fr; }
}

/* Method radio cards */
.smv-method-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 6px;
}
.smv-method-card {
	border: 2px solid var(--smv-border);
	border-radius: 10px;
	padding: 14px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.smv-method-card input {
	width: auto !important;
	margin-top: 3px;
}
.smv-method-card span { display: flex; flex-direction: column; gap: 2px; }
.smv-method-card small { font-size: 11px; color: var(--smv-text-muted); }
.smv-method-card.is-active {
	border-color: var(--smv-primary);
	background: var(--smv-primary-light);
}
.smv-method-card.disabled {
	opacity: .5;
	pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
 * PROFILE
 * ═══════════════════════════════════════════════════════ */
.smv-profile-form { display: flex; flex-direction: column; gap: 18px; }
.smv-profile-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 18px;
}
@media (max-width: 900px) { .smv-profile-grid { grid-template-columns: 1fr; } }

.smv-sticky-save {
	position: sticky;
	bottom: 16px;
	background: #fff;
	border: 1px solid var(--smv-border);
	border-radius: 10px;
	padding: 14px 18px;
	display: flex;
	gap: 14px;
	align-items: center;
	box-shadow: 0 -2px 16px rgba(0, 0, 0, .05);
	z-index: 10;
}

/* Info rows in Security */
.smv-info-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--smv-border);
	font-size: 14px;
}
.smv-info-row:last-child { border-bottom: none; }
.smv-info-row span { color: var(--smv-text-muted); }

/* ═══════════════════════════════════════════════════════
 * MODAL
 * ═══════════════════════════════════════════════════════ */
.smv-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.smv-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(15, 23, 42, .55);
	backdrop-filter: blur(2px);
}
.smv-modal-panel {
	position: relative;
	background: #fff;
	border-radius: 14px;
	width: min(720px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
	animation: smv-modal-in .2s cubic-bezier(.16, 1, .3, 1);
}
.smv-modal-narrow { width: min(440px, calc(100vw - 32px)); }
@keyframes smv-modal-in {
	from { opacity: 0; transform: translateY(20px) scale(.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.smv-modal-head {
	padding: 18px 24px;
	border-bottom: 1px solid var(--smv-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.smv-modal-head h3 { margin: 0; font-size: 18px; font-weight: 700; }
.smv-modal-close {
	background: transparent;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: var(--smv-text-muted);
	cursor: pointer;
	padding: 0 4px;
}
.smv-modal-close:hover { color: var(--smv-text); }
.smv-modal-body {
	padding: 22px 24px;
	overflow-y: auto;
	flex: 1;
}
.smv-modal-foot {
	padding: 14px 24px;
	border-top: 1px solid var(--smv-border);
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

/* Product gallery in modal */
.smv-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 8px;
	margin-bottom: 8px;
}
.smv-gallery-thumb {
	position: relative;
	aspect-ratio: 1;
	background-size: cover;
	background-position: center;
	background-color: var(--smv-surface-2);
	border-radius: 6px;
}
.smv-gallery-remove {
	position: absolute;
	top: 4px; right: 4px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .75);
	color: #fff;
	border: none;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.smv-gallery-remove:hover { background: var(--smv-danger); }

/* ═══════════════════════════════════════════════════════
 * BOTTOM NAVIGATION (mobile only)
 * ═══════════════════════════════════════════════════════ */
.smv-dash-bottom-nav {
	display: none;
	position: fixed;
	bottom: 0; left: 0; right: 0;
	background: #fff;
	border-top: 1px solid var(--smv-border);
	padding: 6px 4px env(safe-area-inset-bottom, 6px);
	justify-content: space-around;
	align-items: flex-end;
	z-index: 40;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .04);
}
@media (max-width: 768px) {
	.smv-dash-bottom-nav { display: flex; }
}
.smv-bn-item {
	background: transparent;
	border: none;
	padding: 7px 6px;
	color: var(--smv-text-muted);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	font-family: inherit;
	font-size: 10px;
	font-weight: 600;
	cursor: pointer;
	flex: 1;
}
.smv-bn-item.active { color: var(--smv-primary); }
.smv-bn-add {
	background: var(--smv-primary);
	color: #fff;
	border-radius: 50%;
	width: 56px; height: 56px;
	transform: translateY(-12px);
	flex: 0 0 56px;
	box-shadow: 0 6px 16px rgba(37, 99, 235, .4);
}
.smv-bn-add:hover { background: var(--smv-primary-dark); }
.smv-bn-add svg { width: 26px; height: 26px; }

/* ═══════════════════════════════════════════════════════
 * Small button modifier
 * ═══════════════════════════════════════════════════════ */
.smv-btn-sm { padding: 6px 12px; min-height: 0; font-size: 13px; }
.smv-btn-lg { padding: 13px 28px; font-size: 15px; }
.smv-btn-outline {
	background: transparent;
	color: var(--smv-text);
	border-color: var(--smv-border-strong);
}
.smv-btn-outline:hover { background: var(--smv-surface); border-color: var(--smv-text-muted); }

/* ═══════════════════════════════════════════════════════
 * Tiny utilities
 * ═══════════════════════════════════════════════════════ */
.smv-empty-state {
	text-align: center;
	padding: 48px 24px;
	color: var(--smv-text-muted);
}
.smv-empty-state h4 {
	margin: 8px 0 4px;
	font-size: 16px;
	color: var(--smv-text);
}
.smv-empty-state .smv-empty-icon { font-size: 48px; opacity: .35; margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════
 * Phase 2B — Orders enhancements
 * ═══════════════════════════════════════════════════════ */
.smv-order-row {
	grid-template-columns: 2fr 1fr 1fr auto auto;
}
@media (max-width: 768px) {
	.smv-order-row { grid-template-columns: 1fr 1fr; }
}

.smv-order-earn {
	font-weight: 700;
	color: #059669;
}

.smv-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.smv-status-pending,
.smv-status-processing            { background: #fef3c7; color: #92400e; }
.smv-status-shipped               { background: #dbeafe; color: #1e40af; }
.smv-status-delivered,
.smv-status-completed             { background: #dcfce7; color: #166534; }
.smv-status-cancelled             { background: #fee2e2; color: #991b1b; }
.smv-status-refunded              { background: #ede9fe; color: #5b21b6; }
.smv-status-partially_refunded    { background: #fef3c7; color: #92400e; }

/* Order detail modal */
.smv-order-detail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--smv-border);
}
.smv-order-detail-head h4 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
 * Phase 4 — Sidebar badge
 * ═══════════════════════════════════════════════════════ */
.smv-nav-badge {
	background: var(--smv-danger);
	color: #fff;
	border-radius: 99px;
	padding: 1px 7px;
	font-size: 10px;
	font-weight: 800;
	margin-left: auto;
}

/* ═══════════════════════════════════════════════════════
 * Phase 4 — Reviews panel
 * ═══════════════════════════════════════════════════════ */
.smv-rating-summary { display: flex; align-items: center; justify-content: center; padding: 24px; }
.smv-rating-big { text-align: center; }
.smv-rating-num {
	font-size: 56px;
	font-weight: 800;
	color: var(--smv-text);
	line-height: 1;
	letter-spacing: -1px;
}
.smv-rating-stars { font-size: 28px; color: #f59e0b; margin: 4px 0; letter-spacing: 2px; }
.smv-rating-count { color: var(--smv-text-muted); font-size: 14px; }

.smv-review-card {
	background: #fff;
	border: 1px solid var(--smv-border);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 10px;
}
.smv-review-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.smv-review-stars { color: #f59e0b; font-size: 18px; }
.smv-review-customer { font-weight: 600; color: var(--smv-text); flex: 1; }
.smv-review-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.smv-review-body { color: var(--smv-text); margin: 0 0 8px; line-height: 1.5; }
.smv-review-product { font-size: 12px; color: var(--smv-text-muted); margin-bottom: 8px; }
.smv-review-reply {
	background: var(--smv-primary-light);
	border-left: 3px solid var(--smv-primary);
	padding: 10px 14px;
	border-radius: 6px;
	margin-top: 8px;
	font-size: 13px;
	color: var(--smv-text);
}

/* ═══════════════════════════════════════════════════════
 * Phase 4 — Coupons panel
 * ═══════════════════════════════════════════════════════ */
.smv-coupon-card {
	background: #fff;
	border: 1px dashed var(--smv-border-strong);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 10px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 18px;
	align-items: center;
}
@media (max-width: 768px) {
	.smv-coupon-card { grid-template-columns: 1fr; }
}
.smv-coupon-code {
	background: var(--smv-text);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 1.5px;
	padding: 12px 18px;
	border-radius: 8px;
	font-family: monospace;
}
.smv-coupon-amount { font-size: 16px; font-weight: 700; color: var(--smv-danger); }
.smv-coupon-desc { font-size: 13px; color: var(--smv-text-muted); margin-top: 4px; }
.smv-coupon-meta { font-size: 12px; color: var(--smv-text-muted); margin-top: 4px; }
.smv-coupon-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-end;
}
@media (max-width: 768px) { .smv-coupon-actions { align-items: stretch; flex-direction: row; flex-wrap: wrap; } }

/* ═══════════════════════════════════════════════════════
 * Phase 4 — Messages panel
 * ═══════════════════════════════════════════════════════ */
.smv-msg-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 14px;
	height: calc(100vh - 280px);
	min-height: 500px;
}
@media (max-width: 768px) {
	.smv-msg-layout { grid-template-columns: 1fr; height: auto; }
}
.smv-msg-threads {
	background: #fff;
	border: 1px solid var(--smv-border);
	border-radius: 10px;
	overflow-y: auto;
}
.smv-thread-row {
	padding: 14px;
	border-bottom: 1px solid var(--smv-border);
	cursor: pointer;
	transition: background .15s;
}
.smv-thread-row:hover { background: var(--smv-surface); }
.smv-thread-row.active { background: var(--smv-primary-light); border-left: 3px solid var(--smv-primary); }
.smv-thread-row.unread { background: #f0f9ff; }
.smv-thread-head {
	display: flex;
	align-items: center;
	gap: 8px;
}
.smv-thread-name { font-weight: 600; font-size: 14px; flex: 1; }
.smv-thread-badge {
	background: var(--smv-danger);
	color: #fff;
	border-radius: 99px;
	padding: 1px 7px;
	font-size: 10px;
	font-weight: 700;
}
.smv-thread-subj { font-size: 13px; color: var(--smv-text); margin: 2px 0; }
.smv-thread-snippet {
	font-size: 12px;
	color: var(--smv-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.smv-thread-time { font-size: 11px; color: var(--smv-text-muted); margin-top: 4px; }

.smv-msg-pane {
	background: #fff;
	border: 1px solid var(--smv-border);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.smv-msg-pane-head {
	padding: 14px 18px;
	border-bottom: 1px solid var(--smv-border);
	background: var(--smv-surface);
}
.smv-msg-pane-head h4 { margin: 0; font-size: 16px; font-weight: 700; }
.smv-msg-subj { font-size: 12px; color: var(--smv-text-muted); margin-top: 2px; }

.smv-msg-list {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.smv-msg-bubble {
	max-width: 75%;
	padding: 10px 14px;
	border-radius: 14px;
	background: var(--smv-surface);
}
.smv-msg-from-vendor {
	background: var(--smv-primary);
	color: #fff;
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}
.smv-msg-from-customer { align-self: flex-start; border-bottom-left-radius: 4px; }
.smv-msg-from-admin {
	background: #fef3c7;
	color: #92400e;
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}
.smv-msg-text { font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.smv-msg-time {
	font-size: 10px;
	opacity: .7;
	margin-top: 4px;
}
.smv-msg-from-vendor .smv-msg-time { color: rgba(255,255,255,.8); }

.smv-msg-compose {
	padding: 12px;
	border-top: 1px solid var(--smv-border);
	display: flex;
	gap: 8px;
}
.smv-msg-compose textarea {
	flex: 1;
	resize: vertical;
	min-height: 40px;
	max-height: 120px;
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid var(--smv-border-strong);
	font-family: inherit;
	font-size: 14px;
}

.smv-msg-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 40px;
	text-align: center;
	color: var(--smv-text-muted);
}
.smv-msg-empty .smv-empty-icon { font-size: 48px; margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════
 * Phase 4 — KYC panel
 * ═══════════════════════════════════════════════════════ */
.smv-kyc-status-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.smv-kyc-status-label {
	font-size: 12px;
	color: var(--smv-text-muted);
	text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 600;
}
.smv-kyc-status-value {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.4px;
}

.smv-kyc-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--smv-border);
}
.smv-kyc-row:last-child { border-bottom: none; }
.smv-kyc-doc-label { font-weight: 600; font-size: 14px; }
.smv-kyc-doc-num { font-size: 12px; color: var(--smv-text-muted); font-family: monospace; }
.smv-kyc-note { font-size: 12px; color: var(--smv-danger); margin-top: 4px; font-style: italic; }

/* ═══════════════════════════════════════════════════════
 * Phase 5 — Analytics panel
 * ═══════════════════════════════════════════════════════ */
.smv-analytics-controls select {
	padding: 8px 12px;
	border: 1px solid var(--smv-border-strong, #d1d5db);
	border-radius: 8px;
	font-size: 13px;
	background: #fff;
	font-family: inherit;
	cursor: pointer;
}

.smv-chart-wrap {
	width: 100%;
	overflow-x: auto;
	margin-top: 10px;
}
#smv-sales-chart {
	max-width: 100%;
	width: 100%;
	height: auto;
}

/* Top products */
.smv-top-row {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--smv-border, #e5e7eb);
}
.smv-top-row:last-child { border-bottom: none; }
.smv-top-rank {
	font-weight: 800;
	color: var(--smv-text-muted, #64748b);
	font-size: 14px;
}
.smv-top-title {
	font-weight: 600;
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.smv-top-meta { font-size: 12px; color: var(--smv-text-muted, #64748b); margin-top: 2px; }
.smv-top-earnings { color: #059669; font-weight: 700; }

/* Status breakdown bars */
.smv-status-row {
	display: grid;
	grid-template-columns: 110px 1fr 40px;
	gap: 10px;
	align-items: center;
	padding: 8px 0;
}
.smv-status-bar {
	background: #f1f5f9;
	height: 12px;
	border-radius: 99px;
	overflow: hidden;
}
.smv-status-bar-fill {
	background: linear-gradient(90deg, var(--smv-primary, #2563eb), #60a5fa);
	height: 100%;
	border-radius: 99px;
}
.smv-status-cnt {
	text-align: right;
	font-weight: 700;
	font-size: 13px;
	color: var(--smv-text, #0f172a);
}

/* Export buttons */
.smv-export-note {
	color: var(--smv-text-muted, #64748b);
	font-size: 13px;
	margin: 0 0 14px;
}
.smv-export-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
}
.smv-export-btn {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	background: var(--smv-surface, #f9fafb);
	border: 1px solid var(--smv-border, #e5e7eb);
	border-radius: 10px;
	text-decoration: none;
	color: var(--smv-text, #0f172a);
	transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.smv-export-btn:hover {
	background: #fff;
	border-color: var(--smv-primary, #2563eb);
	color: var(--smv-primary, #2563eb);
	transform: translateY(-1px);
}
.smv-export-ico { font-size: 26px; }
.smv-export-btn span:last-child { display: flex; flex-direction: column; gap: 2px; }
.smv-export-btn strong { font-size: 14px; font-weight: 700; }
.smv-export-btn small { color: var(--smv-text-muted, #64748b); font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════════
 * PHASE 7 — CRITICAL FIXES
 * All 14 mobile + modal + theme conflict fixes
 * ═══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────
 * FIX #8 + #9: Hide theme header/footer on dashboard page only
 * ──────────────────────────────────────────────────── */
body.smv-dashboard-page header,
body.smv-dashboard-page > header,
body.smv-dashboard-page .site-header,
body.smv-dashboard-page #masthead,
body.smv-dashboard-page #site-header,
body.smv-dashboard-page .header,
body.smv-dashboard-page .main-header,
body.smv-dashboard-page .page-header,
body.smv-dashboard-page .top-bar,
body.smv-dashboard-page .topbar,
body.smv-dashboard-page .announcement-bar,
body.smv-dashboard-page .promo-bar,
body.smv-dashboard-page .free-shipping-banner,
body.smv-dashboard-page .header-info,
body.smv-dashboard-page nav.main-navigation,
body.smv-dashboard-page nav.primary-menu,
body.smv-dashboard-page > footer,
body.smv-dashboard-page .site-footer,
body.smv-dashboard-page #colophon,
body.smv-dashboard-page .main-footer {
	display: none !important;
}

/* Force full-width on dashboard page — break out of theme containers */
body.smv-dashboard-page .site,
body.smv-dashboard-page #page,
body.smv-dashboard-page .site-content,
body.smv-dashboard-page #content,
body.smv-dashboard-page .content-area,
body.smv-dashboard-page .container,
body.smv-dashboard-page .container-fluid,
body.smv-dashboard-page .wrapper,
body.smv-dashboard-page .site-main,
body.smv-dashboard-page main,
body.smv-dashboard-page article,
body.smv-dashboard-page .entry-content,
body.smv-dashboard-page .page-content {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Hide theme page title on dashboard */
body.smv-dashboard-page .entry-header,
body.smv-dashboard-page .page-title,
body.smv-dashboard-page .entry-title {
	display: none !important;
}

/* Hide WooCommerce floating cart on dashboard (FIX #4) */
body.smv-dashboard-page .wc-floating-cart,
body.smv-dashboard-page .floating-cart,
body.smv-dashboard-page .cart-floating,
body.smv-dashboard-page .ts-floating-cart,
body.smv-dashboard-page .xoo-wsc-modal,
body.smv-dashboard-page .xoo-wsc-container {
	display: none !important;
}

/* Force dashboard to occupy full viewport */
body.smv-dashboard-page {
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: hidden;
}

/* ────────────────────────────────────────────────────
 * FIX #1 + #2 + #3 + #5: Mobile layout overhaul
 * ──────────────────────────────────────────────────── */

/* CRITICAL: Override existing grid for mobile */
@media (max-width: 1023px) {
	.smv-dash {
		grid-template-columns: 1fr !important; /* Single column */
		display: block !important;
	}

	/* Sidebar becomes drawer */
	.smv-dash-side {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 280px !important;
		height: 100vh !important;
		transform: translateX(-100%) !important;
		transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
		z-index: 9999 !important;
	}
	.smv-dash-side.open {
		transform: translateX(0) !important;
	}

	/* Main area always full width on mobile */
	.smv-dash-main {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		padding-bottom: 80px; /* Space for bottom nav */
	}

	/* Content padding mobile-friendly */
	.smv-dash-content {
		padding: 14px !important;
		padding-bottom: 100px !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* Topbar mobile fix */
	.smv-dash-top {
		padding: 12px 14px !important;
		gap: 10px !important;
		width: 100% !important;
		box-sizing: border-box;
	}
	.smv-dash-top-title {
		font-size: 16px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* FIX #5: Hero card horizontal on mobile, not vertical strip */
	.smv-hero-card {
		flex-direction: column !important;
		align-items: stretch !important;
		padding: 20px 18px !important;
		gap: 14px !important;
		width: 100% !important;
		box-sizing: border-box;
	}
	.smv-hero-title {
		font-size: 20px !important;
		line-height: 1.3 !important;
	}
	.smv-hero-sub {
		font-size: 14px !important;
	}
	.smv-hero-right {
		width: 100%;
	}
	.smv-hero-right .smv-btn {
		width: 100%;
		justify-content: center;
	}

	/* FIX #3: Prevent single-word breaks — content should flow properly */
	.smv-panel-title,
	.smv-panel-sub,
	.smv-kpi-label,
	.smv-kpi-sub,
	.smv-snapshot-name,
	.smv-snapshot-tag,
	.smv-snapshot-loc,
	.smv-activity-text,
	.smv-prod-item-title,
	.smv-prod-item-meta,
	.smv-order-prod,
	.smv-order-meta,
	.smv-balance-label,
	.smv-balance-sub,
	.smv-card-h h3,
	.smv-info-row,
	.smv-help,
	.smv-msg,
	.smv-empty-state h4,
	.smv-empty-state p {
		word-break: normal !important;
		overflow-wrap: break-word !important;
		hyphens: none !important;
		white-space: normal !important;
		max-width: 100% !important;
	}

	/* KPI grid mobile (FIX #6 also) */
	.smv-kpi-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}
	.smv-kpi {
		padding: 14px !important;
	}
	.smv-kpi-label { font-size: 11px !important; }
	.smv-kpi-value { font-size: 20px !important; }

	/* Snapshot card */
	.smv-snapshot {
		flex-direction: column;
		gap: 12px;
	}
	.smv-snapshot-logo {
		width: 72px;
		height: 72px;
	}

	/* Balance card */
	.smv-balance-card {
		flex-direction: column !important;
		text-align: center;
		padding: 22px !important;
	}
	.smv-balance-value {
		font-size: 28px !important;
	}

	/* Profile + KYC + Security cards width fix */
	.smv-profile-grid,
	.smv-grid-2-cols {
		grid-template-columns: 1fr !important;
	}
	.smv-card {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box;
		padding: 16px !important;
	}

	/* Form fields full width */
	.smv-field input[type="text"],
	.smv-field input[type="email"],
	.smv-field input[type="tel"],
	.smv-field input[type="number"],
	.smv-field input[type="password"],
	.smv-field input[type="date"],
	.smv-field select,
	.smv-field textarea {
		width: 100% !important;
		box-sizing: border-box;
		min-height: 44px !important; /* FIX #7: Touch target */
		font-size: 16px !important; /* Prevent iOS zoom on focus */
	}

	/* Search bar */
	.smv-dash-search input {
		width: 100% !important;
		min-width: 0 !important;
	}

	/* FIX #7: Touch-friendly buttons */
	.smv-btn,
	.smv-pill,
	.smv-bn-item,
	.smv-prod-action,
	.smv-order-status-sel {
		min-height: 44px !important;
		min-width: 44px;
		font-size: 14px !important;
	}
	.smv-btn-sm {
		min-height: 38px !important;
	}

	/* Product list mobile */
	.smv-prod-list[data-view="grid"] {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}

	/* Profile form sticky save bar */
	.smv-sticky-save {
		position: fixed !important;
		bottom: 76px !important;
		left: 12px !important;
		right: 12px !important;
		z-index: 30;
		margin: 0 !important;
	}

	/* Quick actions stack */
	.smv-quick-actions {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
	}
	.smv-qa-btn {
		padding: 12px 10px !important;
		font-size: 13px !important;
	}

	/* Messages layout mobile - single column */
	.smv-msg-layout {
		grid-template-columns: 1fr !important;
		height: auto !important;
	}

	/* Coupon cards mobile */
	.smv-coupon-card {
		grid-template-columns: 1fr !important;
	}

	/* Filters mobile */
	.smv-filters {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.smv-status-pills {
		overflow-x: auto;
		flex-wrap: nowrap;
	}
}

/* Small phones (≤ 480px) — even tighter */
@media (max-width: 480px) {
	.smv-dash-content { padding: 10px !important; padding-bottom: 100px !important; }
	.smv-kpi-grid { grid-template-columns: 1fr !important; }
	.smv-prod-list[data-view="grid"] { grid-template-columns: 1fr !important; }
	.smv-hero-title { font-size: 18px !important; }
	.smv-panel-title { font-size: 18px !important; }
}

/* ────────────────────────────────────────────────────
 * FIX #10 + #11 + #12: Modal critical fixes
 * ──────────────────────────────────────────────────── */

/* Highest z-index — beats any theme header */
.smv-modal {
	z-index: 999999 !important;
	position: fixed !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.smv-modal-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(15, 23, 42, 0.65) !important;
	backdrop-filter: blur(3px);
}

/* FIX #10 + #12: Modal panel always fits in viewport */
.smv-modal-panel {
	position: relative !important;
	max-height: calc(100vh - 32px) !important;
	display: flex !important;
	flex-direction: column !important;
	width: min(720px, calc(100vw - 32px)) !important;
	background: #ffffff !important;
	border-radius: 14px !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3) !important;
	overflow: hidden;
}

.smv-modal-narrow {
	width: min(440px, calc(100vw - 32px)) !important;
}

/* Modal header sticky */
.smv-modal-head {
	flex-shrink: 0 !important;
	background: #ffffff !important;
	padding: 16px 22px !important;
	border-bottom: 1px solid #e5e7eb !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
}

/* FIX #12: Modal body scrolls, not the page */
.smv-modal-body {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding: 20px 22px !important;
	min-height: 0;
}

/* FIX #11: Modal footer ALWAYS visible with white background */
.smv-modal-foot {
	flex-shrink: 0 !important;
	background: #ffffff !important;
	padding: 14px 22px !important;
	border-top: 1px solid #e5e7eb !important;
	display: flex !important;
	justify-content: flex-end !important;
	gap: 10px !important;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

/* FIX #11: Cancel button proper visibility */
.smv-modal-foot .smv-btn-outline,
.smv-modal-foot .smv-modal-close {
	background: #ffffff !important;
	color: #0f172a !important;
	border: 1px solid #d1d5db !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
	border-radius: 8px !important;
	min-height: 42px !important;
}
.smv-modal-foot .smv-btn-outline:hover {
	background: #f9fafb !important;
	border-color: #2563eb !important;
	color: #2563eb !important;
}

/* FIX #11: Primary save button proper styling */
.smv-modal-foot .smv-btn-primary {
	background: #2563eb !important;
	color: #ffffff !important;
	border: 1px solid #2563eb !important;
	font-weight: 600 !important;
	padding: 10px 24px !important;
	border-radius: 8px !important;
	min-height: 42px !important;
}
.smv-modal-foot .smv-btn-primary:hover {
	background: #1e40af !important;
}

/* When modal is open, prevent theme header from interfering */
body.smv-modal-open {
	overflow: hidden;
}
body.smv-modal-open header,
body.smv-modal-open .site-header,
body.smv-modal-open #masthead {
	z-index: 1 !important;
}

/* WP Media Library modal fix — ensure it appears above our modal */
.media-modal {
	z-index: 9999999 !important;
}
.media-modal-backdrop {
	z-index: 9999998 !important;
}

/* Mobile modal — full screen on phones */
@media (max-width: 640px) {
	.smv-modal {
		padding: 0 !important;
		align-items: stretch !important;
	}
	.smv-modal-panel {
		width: 100% !important;
		max-width: 100% !important;
		max-height: 100vh !important;
		height: 100vh !important;
		border-radius: 0 !important;
	}
	.smv-modal-head {
		padding: 14px 16px !important;
	}
	.smv-modal-body {
		padding: 16px !important;
	}
	.smv-modal-foot {
		padding: 12px 16px !important;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
	}
	.smv-modal-foot .smv-btn {
		flex: 1;
	}
}

/* ═══════════════════════════════════════════════════════════════════
 * PHASE 8 — MOBILE SIDEBAR + IMAGE UPLOAD + FINAL POLISH
 * ═══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────
 * FIX #17: Mobile sidebar drawer + backdrop
 * ──────────────────────────────────────────────────── */
.smv-dash-side-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.25s ease;
	backdrop-filter: blur(2px);
}
.smv-dash-side-backdrop.show {
	opacity: 1;
}

/* Mobile hamburger button — MUST be visible on small screens */
@media (max-width: 1023px) {
	.smv-dash-side-mob-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		background: #f1f5f9 !important;
		color: #0f172a !important;
		cursor: pointer;
		flex-shrink: 0;
		border: none;
		transition: background 0.15s;
	}
	.smv-dash-side-mob-toggle:hover,
	.smv-dash-side-mob-toggle:active {
		background: #e2e8f0 !important;
	}
	.smv-dash-side-mob-toggle svg {
		width: 22px;
		height: 22px;
		stroke: currentColor;
		stroke-width: 2;
	}

	/* When sidebar is open on mobile */
	.smv-dash-side.open {
		transform: translateX(0) !important;
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
	}

	/* Hide internal sidebar toggle on mobile (we use mob-toggle instead) */
	.smv-dash-side-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border-radius: 6px;
		background: transparent;
		border: none;
		color: #0f172a;
		cursor: pointer;
		margin-left: auto;
	}
	.smv-dash-side-toggle svg {
		width: 20px;
		height: 20px;
	}
}

/* Desktop: hide sidebar close button */
@media (min-width: 1024px) {
	.smv-dash-side-toggle {
		display: none !important;
	}
}

/* ────────────────────────────────────────────────────
 * FIX #18: Image upload preview + loading states
 * ──────────────────────────────────────────────────── */
.smv-upload-box {
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.smv-upload-box:hover {
	border-color: #2563eb !important;
	background: #eff6ff !important;
}
.smv-upload-box.has-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.smv-upload-box.has-image .smv-upload-inner {
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 12px;
}
.smv-upload-error {
	background: #fef2f2 !important;
	border-color: #dc2626 !important;
	color: #dc2626 !important;
}

/* ────────────────────────────────────────────────────
 * FIX: Nuclear hide for ANY remaining theme elements
 * ──────────────────────────────────────────────────── */
body.smv-dashboard-page [data-smv-hidden="1"] {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	left: -9999px !important;
}

/* ────────────────────────────────────────────────────
 * FIX: Mobile bottom nav z-index above content
 * ──────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.smv-dash-bottom-nav {
		z-index: 100 !important;
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		background: #fff !important;
		border-top: 1px solid #e5e7eb !important;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08) !important;
	}

	/* Ensure topbar is sticky */
	.smv-dash-top {
		position: sticky !important;
		top: 0 !important;
		z-index: 50 !important;
		background: #fff !important;
		border-bottom: 1px solid #e5e7eb !important;
	}
}

/* ────────────────────────────────────────────────────
 * Loading spinner overlay for image upload
 * ──────────────────────────────────────────────────── */
.smv-upload-loading {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	border-radius: inherit;
}
.smv-upload-loading::after {
	content: '';
	width: 24px;
	height: 24px;
	border: 3px solid #e5e7eb;
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: smv-spin 0.8s linear infinite;
}
@keyframes smv-spin {
	to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════
 * PHASE 9 — UNIFIED IMAGE GRID + MULTI-CATEGORY CHIP SELECT
 * ═══════════════════════════════════════════════════════════════════ */

/* ──── Help text under labels ──── */
.smv-help-text {
	font-size: 12px;
	color: #64748b;
	margin: -4px 0 8px;
}

/* ──── Image grid (WooCommerce-app style) ──── */
.smv-images-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
	margin-top: 6px;
}

.smv-image-card,
.smv-image-add {
	position: relative;
	aspect-ratio: 1;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
	background-color: #f3f4f6;
	overflow: hidden;
	transition: transform 0.12s, box-shadow 0.12s;
}

.smv-image-card {
	border: 2px solid #e5e7eb;
	cursor: grab;
}
.smv-image-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	border-color: #cbd5e1;
}
.smv-image-card.uploading {
	background: #eff6ff;
	border-color: #2563eb;
	border-style: dashed;
}
.smv-image-card.error {
	background: #fef2f2;
	border-color: #dc2626;
}

/* ──── Main badge on first image ──── */
.smv-image-main-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	background: #2563eb;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 6px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

/* ──── Action buttons on cards ──── */
.smv-image-remove,
.smv-image-up,
.smv-image-down {
	position: absolute;
	background: rgba(15, 23, 42, 0.85);
	color: #fff;
	border: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background 0.12s, transform 0.05s;
}
.smv-image-remove:hover { background: #dc2626; }
.smv-image-up:hover, .smv-image-down:hover { background: #2563eb; }
.smv-image-remove:active, .smv-image-up:active, .smv-image-down:active {
	transform: scale(0.92);
}

.smv-image-remove { top: 6px; right: 6px; }
.smv-image-up    { bottom: 6px; right: 38px; }
.smv-image-down  { bottom: 6px; right: 6px; }

/* ──── Add Photos button ──── */
.smv-image-add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 2px dashed #cbd5e1;
	background: #f9fafb;
	color: #2563eb;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
}
.smv-image-add:hover {
	border-color: #2563eb;
	background: #eff6ff;
}
.smv-image-add svg {
	color: #2563eb;
}

/* ──── Upload progress overlay ──── */
.smv-image-progress {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.9);
}
.smv-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid #e5e7eb;
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: smv-spin 0.8s linear infinite;
}
.smv-progress-pct {
	font-size: 12px;
	font-weight: 700;
	color: #2563eb;
}

/* ──── Error state ──── */
.smv-image-error {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px;
	text-align: center;
}
.smv-image-error small {
	font-size: 10px;
	color: #dc2626;
	font-weight: 600;
	line-height: 1.3;
}

/* ───────────────────────────────────────────────────
 * Multi-category chip select
 * ─────────────────────────────────────────────────── */
.smv-chip-select {
	position: relative;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.smv-chip-select:focus-within {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.smv-chip-display {
	min-height: 44px;
	padding: 8px 38px 8px 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	cursor: pointer;
}

.smv-chip-placeholder {
	color: #94a3b8;
	font-size: 14px;
}

.smv-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: #2563eb;
	color: #fff;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 600;
}
.smv-chip-x {
	background: rgba(255, 255, 255, 0.25);
	border: none;
	color: #fff;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-weight: 700;
	transition: background 0.12s;
}
.smv-chip-x:hover { background: rgba(255, 255, 255, 0.45); }

.smv-chip-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: #64748b;
	cursor: pointer;
	padding: 4px;
}

.smv-chip-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 100;
	max-height: 280px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.smv-chip-search {
	border: none;
	border-bottom: 1px solid #e5e7eb;
	padding: 10px 12px;
	font-size: 14px;
	outline: none;
	width: 100%;
	font-family: inherit;
}

.smv-chip-options {
	overflow-y: auto;
	flex: 1;
}

.smv-chip-option {
	padding: 10px 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	transition: background 0.1s;
}
.smv-chip-option:hover {
	background: #f3f4f6;
}
.smv-chip-option.selected {
	background: #eff6ff;
	color: #2563eb;
	font-weight: 600;
}
.smv-chip-check {
	width: 18px;
	height: 18px;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: #fff;
	flex-shrink: 0;
}
.smv-chip-option.selected .smv-chip-check {
	background: #2563eb;
	border-color: #2563eb;
}

.smv-chip-empty {
	padding: 16px;
	text-align: center;
	color: #94a3b8;
	font-size: 13px;
}

/* Mobile adjustments */
@media (max-width: 640px) {
	.smv-images-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}
	.smv-image-up, .smv-image-down, .smv-image-remove {
		width: 32px;
		height: 32px;
	}
}

/* ═══════════════════════════════════════════════════════════════════
 * PHASE 11 — UI/UX POLISH + MOBILE/TABLET PARITY
 * ═══════════════════════════════════════════════════════════════════ */

/* ──────── FIX #5: Size hints in upload labels ──────── */
.smv-size-hint {
	font-weight: 400;
	font-size: 11px;
	color: #94a3b8;
	margin-left: 6px;
	white-space: nowrap;
}

/* ──────── FIX #4: View store button with logo ──────── */
.smv-view-store-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}
.smv-view-store-logo {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid #e5e7eb;
}

/* ──────── FIX #7: Hide page title on vendor-store page ──────── */
body.smv-store-page .entry-header,
body.smv-store-page .page-title,
body.smv-store-page .entry-title,
body.smv-store-page header.entry-header,
body.smv-store-page > header,
body.smv-store-page .page-header {
	display: none !important;
}

/* ──────── FIX #6: Drag-drop image reorder ──────── */
.smv-image-card {
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.smv-image-card:active {
	cursor: grabbing;
}
.smv-image-card.smv-dragging {
	opacity: 0.45;
	transform: scale(0.95);
	box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}
.smv-image-card.smv-drag-over {
	transform: scale(1.05);
	box-shadow: 0 0 0 3px #2563eb;
}
.smv-drag-hint {
	position: absolute;
	bottom: 6px;
	right: 6px;
	background: rgba(15, 23, 42, 0.7);
	color: #fff;
	font-size: 14px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0.85;
	letter-spacing: -2px;
	font-weight: 700;
}

/* ──────── FIX #8: Remove black bg on mobile bottom nav tap ──────── */
.smv-dash-bottom-nav .smv-bn-item {
	background: transparent !important;
	border: none !important;
	-webkit-tap-highlight-color: transparent !important;
	transition: color 0.15s;
}
.smv-dash-bottom-nav .smv-bn-item:active,
.smv-dash-bottom-nav .smv-bn-item:focus {
	background: transparent !important;
	outline: none !important;
}
.smv-dash-bottom-nav .smv-bn-item:hover {
	background: transparent !important;
}
.smv-dash-bottom-nav .smv-bn-item.active {
	color: #2563eb !important;
	background: transparent !important;
}

/* ──────── FIX #9: Center the + (add) button ──────── */
.smv-dash-bottom-nav {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
	align-items: center !important;
	padding: 4px 0 !important;
	padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
}
.smv-dash-bottom-nav .smv-bn-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px;
	padding: 6px 0 !important;
	font-size: 11px;
	color: #64748b;
	cursor: pointer;
	min-height: 56px;
}
.smv-dash-bottom-nav .smv-bn-item span {
	font-size: 10.5px;
	line-height: 1.1;
	font-weight: 500;
}
.smv-dash-bottom-nav .smv-bn-add {
	position: relative;
	background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
	color: #fff !important;
	width: 56px;
	height: 56px;
	border-radius: 50% !important;
	margin: -18px auto 0 !important;
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
	justify-self: center;
	min-height: 56px !important;
	min-width: 56px;
	padding: 0 !important;
	align-self: center;
}
.smv-dash-bottom-nav .smv-bn-add:active,
.smv-dash-bottom-nav .smv-bn-add:focus {
	background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
	transform: scale(0.95);
}
.smv-dash-bottom-nav .smv-bn-add svg {
	color: #fff;
}

/* ──────── FIX #10 + #11: Mobile "More" drawer (all options) ──────── */
.smv-more-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
}
.smv-more-drawer.open .smv-more-backdrop {
	opacity: 1;
}
.smv-more-drawer.open .smv-more-sheet {
	transform: translateY(0);
}
.smv-more-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	opacity: 0;
	transition: opacity 0.25s ease;
	backdrop-filter: blur(2px);
}
.smv-more-sheet {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-radius: 18px 18px 0 0;
	max-height: 80vh;
	transform: translateY(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.smv-more-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
}
.smv-more-head h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}
.smv-more-close {
	background: #f1f5f9;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0f172a;
}
.smv-more-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	padding: 16px 12px 20px;
	overflow-y: auto;
}
.smv-more-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 14px 8px;
	cursor: pointer;
	color: #0f172a;
	transition: background 0.15s, transform 0.05s;
	min-height: 80px;
}
.smv-more-item:active {
	background: #e2e8f0;
	transform: scale(0.96);
}
.smv-more-item svg {
	color: #2563eb;
}
.smv-more-item span {
	font-size: 12px;
	font-weight: 500;
	text-align: center;
}

/* Phase 11 FIX #11: Tablet = Mobile mode. Use same breakpoint up to 1023px. */
@media (max-width: 1023px) {
	/* Hamburger + sidebar drawer already covered. */
	/* Bottom nav already covered. */
	/* More drawer covered. */

	/* Ensure all dashboard panels are full-width on tablets too. */
	.smv-dash-content {
		max-width: 100% !important;
		padding: 14px !important;
		padding-bottom: 110px !important;
	}
}

/* Smaller phones: 2-column more drawer */
@media (max-width: 380px) {
	.smv-more-list {
		grid-template-columns: 1fr 1fr;
	}
}

/* ──────── FIX #3: Hide remaining helper text on small screens too ──────── */
.smv-panel-sub,
.smv-hero-sub {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
 * PHASE 12 — Theme Color Picker + Logout + Polish
 * ═══════════════════════════════════════════════════════════════════ */

/* Theme color picker grid */
.smv-theme-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
	margin-top: 6px;
}
.smv-theme-swatch {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.smv-theme-swatch:hover {
	background: #f9fafb;
}
.smv-theme-swatch:active {
	transform: scale(0.98);
}
.smv-theme-swatch.active {
	border-color: #0f172a;
	background: #f1f5f9;
}
.smv-theme-swatch input[type="radio"] {
	display: none;
}
.smv-theme-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.15);
}
.smv-theme-name {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
}

/* Per-theme primary color overrides */
.smv-dash[data-theme="green"]  .smv-btn-primary,
.smv-dash[data-theme="green"]  .smv-bn-add,
.smv-dash[data-theme="green"]  .smv-pill.active,
.smv-dash[data-theme="green"]  .smv-image-main-badge,
.smv-dash[data-theme="green"]  .smv-chip { background: #059669 !important; border-color: #059669 !important; }
.smv-dash[data-theme="green"]  .smv-dash-nav-item.active,
.smv-dash[data-theme="green"]  .smv-bn-item.active { color: #059669 !important; }
.smv-dash[data-theme="green"]  .smv-hero-card { background: linear-gradient(135deg, #059669, #047857) !important; }

.smv-dash[data-theme="red"]  .smv-btn-primary,
.smv-dash[data-theme="red"]  .smv-bn-add,
.smv-dash[data-theme="red"]  .smv-pill.active,
.smv-dash[data-theme="red"]  .smv-image-main-badge,
.smv-dash[data-theme="red"]  .smv-chip { background: #dc2626 !important; border-color: #dc2626 !important; }
.smv-dash[data-theme="red"]  .smv-dash-nav-item.active,
.smv-dash[data-theme="red"]  .smv-bn-item.active { color: #dc2626 !important; }
.smv-dash[data-theme="red"]  .smv-hero-card { background: linear-gradient(135deg, #dc2626, #991b1b) !important; }

.smv-dash[data-theme="purple"]  .smv-btn-primary,
.smv-dash[data-theme="purple"]  .smv-bn-add,
.smv-dash[data-theme="purple"]  .smv-pill.active,
.smv-dash[data-theme="purple"]  .smv-image-main-badge,
.smv-dash[data-theme="purple"]  .smv-chip { background: #7c3aed !important; border-color: #7c3aed !important; }
.smv-dash[data-theme="purple"]  .smv-dash-nav-item.active,
.smv-dash[data-theme="purple"]  .smv-bn-item.active { color: #7c3aed !important; }
.smv-dash[data-theme="purple"]  .smv-hero-card { background: linear-gradient(135deg, #7c3aed, #5b21b6) !important; }

.smv-dash[data-theme="orange"]  .smv-btn-primary,
.smv-dash[data-theme="orange"]  .smv-bn-add,
.smv-dash[data-theme="orange"]  .smv-pill.active,
.smv-dash[data-theme="orange"]  .smv-image-main-badge,
.smv-dash[data-theme="orange"]  .smv-chip { background: #ea580c !important; border-color: #ea580c !important; }
.smv-dash[data-theme="orange"]  .smv-dash-nav-item.active,
.smv-dash[data-theme="orange"]  .smv-bn-item.active { color: #ea580c !important; }
.smv-dash[data-theme="orange"]  .smv-hero-card { background: linear-gradient(135deg, #ea580c, #9a3412) !important; }

.smv-dash[data-theme="pink"]  .smv-btn-primary,
.smv-dash[data-theme="pink"]  .smv-bn-add,
.smv-dash[data-theme="pink"]  .smv-pill.active,
.smv-dash[data-theme="pink"]  .smv-image-main-badge,
.smv-dash[data-theme="pink"]  .smv-chip { background: #db2777 !important; border-color: #db2777 !important; }
.smv-dash[data-theme="pink"]  .smv-dash-nav-item.active,
.smv-dash[data-theme="pink"]  .smv-bn-item.active { color: #db2777 !important; }
.smv-dash[data-theme="pink"]  .smv-hero-card { background: linear-gradient(135deg, #db2777, #9d174d) !important; }

/* Logout in More drawer — red accent */
.smv-more-logout {
	color: #dc2626 !important;
	text-decoration: none;
}
.smv-more-logout svg {
	color: #dc2626 !important;
}
.smv-more-logout:hover,
.smv-more-logout:active {
	background: #fef2f2 !important;
	border-color: #fecaca !important;
}

/* ═══════════════════════════════════════════════════════════════════
 * PHASE 12 FINAL FIX: Mobile-only bottom nav (≤ 768px)
 * Tablets and above get desktop sidebar layout.
 * ═══════════════════════════════════════════════════════════════════ */

/* Tablets and desktop (≥ 769px): show sidebar, hide bottom nav + hamburger */
@media (min-width: 769px) {
	.smv-dash {
		grid-template-columns: 260px 1fr !important;
		display: grid !important;
	}
	.smv-dash-side {
		position: static !important;
		transform: none !important;
		width: 260px !important;
		height: auto !important;
		min-height: 100vh !important;
		box-shadow: none !important;
		z-index: auto !important;
	}
	.smv-dash-main {
		width: auto !important;
		padding-bottom: 0 !important;
	}
	.smv-dash-bottom-nav {
		display: none !important;
	}
	.smv-dash-side-mob-toggle {
		display: none !important;
	}
	.smv-dash-side-toggle {
		display: none !important;
	}
	.smv-dash-side-backdrop {
		display: none !important;
	}
	/* More drawer (mobile-only feature) — hide on tablet+ */
	.smv-more-drawer {
		display: none !important;
	}
	/* Content padding sane on tablet */
	.smv-dash-content {
		padding: 22px 26px !important;
		padding-bottom: 26px !important;
	}
}

/* Mobile only (≤ 768px): keep drawer sidebar + bottom nav */
@media (max-width: 768px) {
	.smv-dash {
		grid-template-columns: 1fr !important;
		display: block !important;
	}
	.smv-dash-side {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 280px !important;
		height: 100vh !important;
		transform: translateX(-100%) !important;
		z-index: 9999 !important;
	}
	.smv-dash-side.open {
		transform: translateX(0) !important;
	}
	.smv-dash-main {
		width: 100% !important;
		padding-bottom: 80px !important;
	}
	.smv-dash-bottom-nav {
		display: grid !important;
	}
	.smv-dash-side-mob-toggle {
		display: inline-flex !important;
	}
}

/* ─── KYC: 2 document blocks (5.6.2 patch) ─── */
.smv-kyc-doc-block {
	padding: 14px 16px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
}
.smv-kyc-doc-title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════
 * PHASE 13 — Mobile polish + tap highlight + iOS no-zoom
 * ═══════════════════════════════════════════════════════════════════ */

body.smv-dashboard-page {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
body.smv-dashboard-page button,
body.smv-dashboard-page a,
body.smv-dashboard-page .smv-bn-item,
body.smv-dashboard-page .smv-more-item,
body.smv-dashboard-page [role="button"] {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/* iOS: prevent input zoom by enforcing 16px font on all editable inputs */
@media (max-width: 768px) {
	body.smv-dashboard-page input[type="text"],
	body.smv-dashboard-page input[type="email"],
	body.smv-dashboard-page input[type="password"],
	body.smv-dashboard-page input[type="tel"],
	body.smv-dashboard-page input[type="number"],
	body.smv-dashboard-page input[type="search"],
	body.smv-dashboard-page input[type="url"],
	body.smv-dashboard-page input[type="date"],
	body.smv-dashboard-page select,
	body.smv-dashboard-page textarea {
		font-size: 16px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════
 * PHASE 15 — Vacation Mode toggle styling
 * ═══════════════════════════════════════════════════════════════════ */

.smv-switch input:checked + .smv-switch-slider {
	background: #059669 !important;
}
.smv-switch-slider:before {
	content: "";
	position: absolute;
	height: 22px;
	width: 22px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	border-radius: 50%;
	transition: .3s;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.smv-switch input:checked + .smv-switch-slider:before {
	transform: translateX(22px);
}

/* Vacation banner on store page */
.smv-vacation-banner {
	animation: smvVacFadeIn .4s ease-out;
}
@keyframes smvVacFadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Low stock badge on product list */
.smv-low-stock-badge {
	background: #fef3c7;
	color: #92400e;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	margin-left: 6px;
}
.smv-out-stock-badge {
	background: #fee2e2;
	color: #991b1b;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	margin-left: 6px;
}