/* Mercato vendor dashboard — modern SaaS-style frontend UI */

.mercato-dashboard {
	max-width: 1100px;
	margin: 32px auto;
	padding: 0 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #111827;
}

.mercato-dashboard h1, .mercato-dashboard h2, .mercato-dashboard h3 { font-weight: 700; line-height: 1.25; }
.mercato-dashboard h1 { font-size: 28px; margin: 8px 0 16px; }
.mercato-dashboard h2 { font-size: 22px; margin: 24px 0 12px; }
.mercato-dashboard h3 { font-size: 16px; margin: 16px 0 8px; }
.mercato-dashboard p { line-height: 1.55; }

/* Sidebar layout */
.mercato-dash-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; }
@media (max-width: 768px) { .mercato-dash-layout { grid-template-columns: 1fr; } }

.mercato-side-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px;
	background: #fafafa;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	position: sticky;
	top: 20px;
	height: fit-content;
}
.mercato-side-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	color: #4b5563;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.15s ease;
}
.mercato-side-nav a:hover { background: #fff; color: #111827; }
.mercato-side-nav a.is-active { background: #4f46e5; color: #fff; }
.mercato-side-nav a .dot {
	margin-left: auto;
	min-width: 22px;
	text-align: center;
	padding: 2px 6px;
	border-radius: 9999px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.mercato-dash-content { min-width: 0; }

/* KPI grid */
.mercato-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 16px 0 28px; }
.mercato-kpi {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.mercato-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; font-weight: 600; }
.mercato-kpi-value { font-size: 26px; font-weight: 700; margin-top: 4px; color: #111827; }
.mercato-kpi-value.currency { color: #059669; }
.mercato-kpi-sub { font-size: 12px; color: #9ca3af; margin-top: 4px; }

/* Cards */
.mercato-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 16px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Forms (same as admin.css for consistency, but tuned for frontend) */
.mercato-form { display: grid; gap: 14px; max-width: 520px; }
.mercato-form label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 4px; }
.mercato-form input[type="text"], .mercato-form input[type="email"], .mercato-form input[type="password"],
.mercato-form input[type="number"], .mercato-form input[type="url"], .mercato-form input[type="tel"],
.mercato-form input[type="date"], .mercato-form input[type="datetime-local"], .mercato-form input[type="file"],
.mercato-form textarea, .mercato-form select {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	color: #111827;
	box-sizing: border-box;
}
.mercato-form input:focus, .mercato-form textarea:focus, .mercato-form select:focus {
	outline: none;
	border-color: #4f46e5;
	box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}

.mercato-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mercato-row > * { flex: 1; min-width: 200px; }

/* Buttons */
.mercato-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s ease;
}
.mercato-btn-primary { background: #4f46e5; color: #fff !important; }
.mercato-btn-primary:hover { background: #4338ca; transform: translateY(-1px); }
.mercato-btn-secondary { background: #fff; color: #111827 !important; border-color: #d1d5db; }
.mercato-btn-secondary:hover { background: #f9fafb; }
.mercato-btn-ghost { background: transparent; color: #4f46e5 !important; }
.mercato-btn-ghost:hover { background: #eef2ff; }
.mercato-btn-danger { background: #fff; color: #b91c1c !important; border-color: #fecaca; }
.mercato-btn-danger:hover { background: #fef2f2; }

/* Alerts */
.mercato-alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.mercato-alert-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.mercato-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.mercato-alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.mercato-alert-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

/* Badges */
.mercato-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.mercato-badge-pending { background: #fef3c7; color: #92400e; }
.mercato-badge-approved, .mercato-badge-verified, .mercato-badge-paid, .mercato-badge-active { background: #d1fae5; color: #065f46; }
.mercato-badge-rejected, .mercato-badge-suspended { background: #fee2e2; color: #991b1b; }
.mercato-badge-unverified { background: #f3f4f6; color: #6b7280; }

/* Tables */
.mercato-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.mercato-table th, .mercato-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #f3f4f6; }
.mercato-table thead th { background: #f9fafb; font-size: 12px; text-transform: uppercase; color: #6b7280; font-weight: 600; letter-spacing: 0.05em; }
.mercato-table tr:last-child td { border-bottom: none; }

/* Product grid */
.mercato-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.mercato-product-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: all 0.15s ease;
}
.mercato-product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.mercato-product-card img { width: 100%; height: 160px; object-fit: cover; display: block; background: #f3f4f6; }
.mercato-product-card .info { padding: 12px 14px; }
.mercato-product-card .price { color: #059669; font-weight: 600; margin-top: 4px; }

/* Messaging */
.mercato-inbox-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
@media (max-width: 768px) { .mercato-inbox-layout { grid-template-columns: 1fr; } }
.mercato-inbox-list {
	background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.mercato-inbox-item {
	display: block; padding: 12px 14px; border-bottom: 1px solid #f3f4f6;
	text-decoration: none; color: #111827;
	transition: background 0.1s ease;
}
.mercato-inbox-item:hover, .mercato-inbox-item.is-active { background: #f9fafb; }
.mercato-inbox-item.is-unread strong { font-weight: 700; }
.mercato-inbox-preview { font-size: 13px; color: #6b7280; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mercato-inbox-time { font-size: 11px; color: #9ca3af; margin-top: 3px; }

.mercato-thread-view { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; }
.mercato-messages { display: grid; gap: 10px; max-height: 55vh; overflow-y: auto; padding-bottom: 12px; }
.mercato-msg { padding: 10px 14px; border-radius: 10px; max-width: 70%; }
.mercato-msg.from-me { background: #4f46e5; color: #fff; margin-left: auto; }
.mercato-msg.from-them { background: #f3f4f6; color: #111827; }
.mercato-msg-meta { font-size: 11px; opacity: 0.7; margin-top: 4px; }

/* Public storefront */
.mercato-store-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 32px;
	padding: 24px;
	background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
	border: 1px solid #e5e7eb;
	border-radius: 16px;
}
.mercato-store-logo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.mercato-store-name { font-size: 26px; font-weight: 700; margin: 0; }
.mercato-store-desc { color: #6b7280; margin: 4px 0 0; }
.mercato-store-meta { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; color: #9ca3af; }

.mercato-vacation-banner {
	padding: 14px 18px;
	background: #fff7ed;
	border: 1px solid #fdba74;
	border-radius: 12px;
	margin-bottom: 24px;
}

.mercato-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; }
.mercato-store-card {
	display: block; text-decoration: none; color: inherit;
	padding: 18px; text-align: center;
	background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
	transition: all 0.15s ease;
}
.mercato-store-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.mercato-store-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; }