/**
 * Dashboard blend styles — keep the Motta header + footer visible
 * around the Dokan vendor dashboard, restyle the sidebar to a
 * lighter glassy look, and put the sidebar IN FLOW (not fixed)
 * so it doesn't overlay the site header.
 *
 * The Dokan React dashboard mounts inside
 *   <div id="dokan-vendor-dashboard-layout-root" class="dokan-layout">
 * and renders:
 *   <div class="dokan-frontend-layout w-full">
 *     <aside class="dokan-frontend-sidebar bg-primary-500 ... fixed start-0 bottom-0 z-20">
 *     <main ...>  (the main content)
 *
 * The `fixed` Tailwind utility on the aside is what pins the sidebar
 * to the viewport, covering our Motta header. We override it +
 * adjust the layout container to keep the React structure intact
 * but visually in flow.
 */

body.pb-dashboard-blended-page {
	background: #f8fafc;
}

body.pb-dashboard-blended-page #dokan-dashboard-fullwidth-wrapper.pb-dashboard-blended {
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	min-height: 60vh;
	/* Two-column grid: React sidebar (col 1, 250px) + legacy
	   dashboard content (col 2, fills). align-items:start so the
	   sidebar doesn't stretch to match the long content column. */
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 24px;
	align-items: start;
}

/* Mobile: stack. */
@media (max-width: 768px) {
	body.pb-dashboard-blended-page #dokan-dashboard-fullwidth-wrapper.pb-dashboard-blended {
		grid-template-columns: 1fr;
	}
}

/* The legacy .dokan-dashboard-wrap has its OWN sidebar inside —
   hide it because the React sidebar already covers nav. */
body.pb-dashboard-blended-page .dokan-dashboard-wrap .dokan-dash-sidebar,
body.pb-dashboard-blended-page .dokan-dashboard-wrap aside.dokan-dash-sidebar,
body.pb-dashboard-blended-page .dokan-dashboard-wrap nav.dokan-dashboard-nav,
body.pb-dashboard-blended-page .dokan-dashboard-wrap .dokan-dashboard-menu {
	display: none !important;
}

/* Legacy wrap is now just the content area — give it the card
   treatment matching the buyer-tab cards. */
body.pb-dashboard-blended-page .dokan-dashboard-wrap {
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.03);
	padding: 24px;
}

/* React layout root — make it a flex grid so sidebar + main sit
   side-by-side instead of stacked. */
body.pb-dashboard-blended-page #dokan-vendor-dashboard-layout-root {
	display: block;
}
body.pb-dashboard-blended-page #dokan-vendor-dashboard-layout-root > .dokan-frontend-layout,
body.pb-dashboard-blended-page .dokan-frontend-layout {
	display: flex !important;
	flex-direction: row;
	align-items: stretch;
	gap: 20px;
	width: 100%;
	min-height: 60vh;
}

/* SIDEBAR — defeat the React app's `fixed start-0 bottom-0` so it
   sits IN the page flow rather than pinned to the viewport. */
body.pb-dashboard-blended-page aside.dokan-frontend-sidebar {
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	z-index: auto !important;
	width: 250px !important;
	flex: 0 0 250px !important;
	height: auto !important;
	min-height: 60vh;
	align-self: flex-start;

	/* Glassy modern look */
	background: rgba(255, 255, 255, 0.75) !important;
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border: 1px solid rgba(226, 232, 240, 0.85);
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.03);
	color: #334155 !important;
	overflow: hidden;
}

/* Sidebar text + links — switch from white-on-purple to slate-on-white. */
body.pb-dashboard-blended-page aside.dokan-frontend-sidebar,
body.pb-dashboard-blended-page aside.dokan-frontend-sidebar * {
	color: #334155 !important;
}
body.pb-dashboard-blended-page aside.dokan-frontend-sidebar a {
	color: #334155 !important;
	text-decoration: none;
}
body.pb-dashboard-blended-page aside.dokan-frontend-sidebar a:hover {
	background: rgba(32, 149, 184, 0.08) !important;
	color: var(--pb-primary) !important;
}
/* Active state — react app likely uses aria-current or .active. */
body.pb-dashboard-blended-page aside.dokan-frontend-sidebar a[aria-current="page"],
body.pb-dashboard-blended-page aside.dokan-frontend-sidebar a.active,
body.pb-dashboard-blended-page aside.dokan-frontend-sidebar li.active a {
	background: rgba(32, 149, 184, 0.12) !important;
	color: var(--pb-primary-darker) !important;
	font-weight: 600;
}
/* Sidebar logo at top — hide it because the Motta header already
   shows the brand. Avoids two logos stacked. */
body.pb-dashboard-blended-page aside.dokan-frontend-sidebar > a:first-child {
	display: none !important;
}

/* Hide the React layout's internal top strip (hamburger + Visit Store
   + avatar dropdown). It's redundant with the Motta header above (which
   carries the account icon + List now CTA) and the sidebar's "Your
   Store" link at the bottom. Removing it eliminates the empty vertical
   gap that appears under it on the dashboard. */
body.pb-dashboard-blended-page .dokan-frontend-layout > main > header {
	display: none !important;
}

/* MAIN content area.
   Many dashboard routes (notably /dashboard/?path=/analytics/Overview)
   leave this <main> empty — the actual Overview / Charts UI is
   rendered by WooCommerce Admin into a SIBLING container further
   down the page, not into Dokan's <main>. The element has Tailwind
   utilities `bg-white ms-60 border-s` (margin-inline-start: 15rem
   + white background + left border) that fight us, so !important
   is needed on every property. */
body.pb-dashboard-blended-page .dokan-frontend-layout > main,
body.pb-dashboard-blended-page .dokan-frontend-layout > div:not(aside) {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	margin-inline-start: 0 !important;
	margin-inline-end: 0 !important;
	border: 0 !important;
	border-inline-start: 0 !important;
}
body.pb-dashboard-blended-page .dokan-frontend-layout > main:empty,
body.pb-dashboard-blended-page .dokan-frontend-layout > main:not(:has(*:not(header))) {
	display: none !important;
}

/* The React layout root sets `sticky top-8` which pins the whole
   sidebar+main row to the viewport top — that fights our blended
   flow placement. Undo. */
body.pb-dashboard-blended-page #dokan-vendor-dashboard-layout-root {
	position: static !important;
	top: auto !important;
	z-index: auto !important;
}

/* Legacy server-rendered dashboard content (buyer tabs etc) */
body.pb-dashboard-blended-page .dokan-dashboard-content,
body.pb-dashboard-blended-page .pb-buyer-tab {
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.03);
	padding: 24px;
}

/* Headings inside the dashboard. */
body.pb-dashboard-blended-page .dokan-dashboard-content h1,
body.pb-dashboard-blended-page .dokan-dashboard-content h2,
body.pb-dashboard-blended-page .pb-buyer-tab h1,
body.pb-dashboard-blended-page main h1 {
	color: #0f172a;
	font-weight: 700;
}

/* Push the dashboard down below the Motta sticky header. The header
   reserves ~133px on desktop (per measurement 22:35 — sticky bar at
   top 32 / height 101). On mobile the header collapses to less. */
body.pb-dashboard-blended-page.admin-bar #dokan-dashboard-fullwidth-wrapper.pb-dashboard-blended,
body.pb-dashboard-blended-page #dokan-dashboard-fullwidth-wrapper.pb-dashboard-blended {
	padding-top: 24px;
}

/* Responsive — collapse to single column on mobile. */
@media (max-width: 768px) {
	body.pb-dashboard-blended-page .dokan-frontend-layout {
		flex-direction: column;
	}
	body.pb-dashboard-blended-page aside.dokan-frontend-sidebar {
		flex: 0 0 auto !important;
		width: 100% !important;
		min-height: 0;
	}
}