/* =============================================================
   Balad Marketplace — Vendor Dashboard
   Design system tokens mirror design-samples/balad-picks/base.css
   ("Diaspora Bridge" direction: navy / gold / Playfair + Inter).
   This stylesheet redeclares the custom properties it needs rather
   than @import-ing the theme's font stylesheet, so the plugin still
   renders correctly if activated under a different theme.
   ============================================================= */

:root {
	--navy: #10141C;
	--navy-800: #161B27;
	--navy-700: #1A2033;
	--navy-600: #1F2640;
	--gold: #D4A84B;
	--gold-light: #E8C76A;
	--gold-dark: #A07A2E;
	--white: #FFFFFF;
	--gray-500: #6B7585;
	--gray-400: #8892A4;
	--gray-300: #B8C0CF;
	--green-wa: #25D366;
	--red-warn: #E0555F;
	--red-warn-bg: #4A2229;

	--font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-sans: 'Inter', system-ui, -apple-system, sans-serif;

	--r-sm: 6px;
	--r-md: 12px;
	--r-lg: 20px;
	--r-full: 9999px;

	--trans: all .25s ease;
	--trans-fast: all .15s ease;

	--shadow-card: 0 16px 40px rgba(0, 0, 0, .28);
}

/* ─── Container ──────────────────────────────────────────── */

.bld-dashboard {
	max-width: 1200px;
	margin: 2rem auto;
	background: var(--navy);
	color: var(--gray-300);
	font: 15px/1.6 var(--font-sans);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.bld-dashboard.bld-dashboard--gate {
	padding: clamp(2rem, 6vw, 4rem);
	text-align: center;
	display: grid;
	gap: 1rem;
	justify-items: center;
}

.bld-dashboard h1,
.bld-dashboard h2,
.bld-dashboard h3 {
	color: var(--white);
	font-family: var(--font-serif);
	line-height: 1.25;
}

.bld-dashboard h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-block-end: 1.25rem;
}

.bld-dashboard h3 {
	font-size: 1.2rem;
	margin-block: 1.5rem .75rem;
}

.bld-dashboard p {
	color: var(--gray-300);
}

.bld-dash-hint {
	color: var(--gray-400);
	font-size: .85rem;
}

.bld-dash-content {
	padding: clamp(1rem, 3vw, 2.5rem);
}

/* ─── Top nav ────────────────────────────────────────────── */

.bld-dash-nav {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding-inline: clamp(1rem, 3vw, 1.5rem);
	background: var(--navy-800);
	overflow-x: auto;
	border-block-end: 1px solid var(--navy-600);
}

.bld-dash-nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.bld-dash-nav a {
	display: block;
	padding: 1.2rem .8rem;
	color: var(--gray-300);
	text-decoration: none;
	border-block-end: 3px solid transparent;
	transition: var(--trans-fast);
}

.bld-dash-nav a:hover {
	color: var(--white);
}

.bld-dash-nav li.is-active a {
	color: var(--gold);
	border-color: var(--gold);
}

/* Logout sits at the end of the tab list but must not read as another tab. Pushed to the far
   edge with a divider, and in muted grey rather than the gold used for the active section —
   leaving is not a destination. Reported 2026-08-08: there was no logout anywhere, and the
   dashboard is the vendor's entire surface (they never see wp-admin's account menu). */
.bld-dash-nav__logout {
	margin-inline-start: auto;
	padding-inline-start: 1rem;
	border-inline-start: 1px solid var(--navy-600);
}

.bld-dash-nav__logout a {
	color: var(--gray-400, var(--gray-300));
	font-size: .85rem;
}

.bld-dash-nav__logout a:hover {
	color: var(--white);
}

/* BLD-038 (the last 2 of 9): paginate_links() emits bare .page-numbers anchors with no plugin
   styling, so they inherited whatever size the theme gave them — well under 44px on mobile, on
   a control whose whole job is to be tapped. Scoped to the dashboard so the storefront's own
   pagination is untouched. */
.bld-dash-content .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: .5rem;
	text-decoration: none;
}

.bld-dash-store-name {
	font-family: var(--font-serif);
	color: var(--gold);
	font-weight: 700;
	white-space: nowrap;
}

/* ─── Banners / notices ──────────────────────────────────── */

.bld-dash-banner,
.bld-dash-notice {
	padding: 1rem clamp(1rem, 3vw, 1.5rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.bld-dash-banner--warn {
	background: var(--red-warn-bg);
	color: #FFD8DC;
}

.bld-dash-notice--success {
	background: #174C36;
	color: #C7F5DF;
}

.bld-dash-notice--error {
	background: var(--red-warn-bg);
	color: #FFD8DC;
}

/* ─── KPI grid ───────────────────────────────────────────── */

.bld-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin-block-end: 1rem;
}

.bld-kpi-tile {
	display: grid;
	gap: .5rem;
	padding: 1.25rem;
	background: var(--navy-800);
	border-radius: var(--r-md);
	border: 1px solid var(--navy-600);
}

.bld-kpi-label {
	font-size: .8rem;
	color: var(--gray-400);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.bld-kpi-value,
.bld-kpi-tile strong {
	color: var(--gold);
	font: 700 1.7rem var(--font-serif);
}

/* ─── Tables ─────────────────────────────────────────────── */

/*
 * BLD-007 / BLD-021. The previous rules here looked like a responsive table and were not one:
 *
 *   .bld-dash-table { display: block; overflow-x: auto }
 *   thead, tbody, tr { display: table; width: 100%; table-layout: fixed }
 *
 * The wrapper offered horizontal scrolling, but forcing every `tr` to `width: 100%` meant the
 * content could never be wider than the box — so there was nothing to scroll and the overflow was
 * dead. `table-layout: fixed` then split the width equally regardless of content, and
 * `nowrap` + `ellipsis` truncated whatever did not fit. On a phone that produced a row of clipped
 * stubs with no way to reach the hidden text: not a degraded table, an unreadable one.
 *
 * `position: sticky` on `th` (BLD-021) never worked either, for a related reason: sticky needs a
 * scrolling ancestor with a constrained height, and this container had none. It was inert.
 *
 * The fix reuses the card pattern that .bld-stock-table already proved below, rather than
 * inventing a second responsive strategy — see the media query at the end of this file, now
 * scoped to every dashboard table instead of that one.
 */
.bld-dash-table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1rem;
}

.bld-dash-table th {
	background: var(--navy-700);
	color: var(--gold);
	text-align: start;
	font-weight: 600;
}

.bld-dash-table th,
.bld-dash-table td {
	padding: .75rem;
	border-block-end: 1px solid var(--navy-600);
	/*
	 * Wrap rather than clip. A vendor needs to read a product name or an order reference; an
	 * ellipsis in a column they cannot widen hides the one thing the row is for.
	 */
	white-space: normal;
	overflow-wrap: anywhere;
	vertical-align: middle;
}

/*
 * BLD-008: row actions had near-zero tap targets — the Delete control is a `.bld-link-danger`
 * button with `padding: 0`, and Edit is a bare anchor, so both were roughly the height of their
 * text. On a touch screen that is a coin-flip between "edit" and "delete", which is the worst
 * possible pair to sit a millimetre apart.
 *
 * 44px is the WCAG 2.5.5 / platform-guideline minimum. Applied to controls INSIDE table cells
 * only, so it cannot inflate buttons elsewhere in the dashboard.
 */
.bld-dash-table td a,
.bld-dash-table td button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: .25rem;
}

/* The two actions must not be adjacent by accident — give them real separation. */
.bld-dash-table td form {
	display: inline-flex;
	margin-inline-start: .75rem;
}

.bld-dash-table tbody tr:nth-child(even) {
	background: var(--navy-800);
}

.bld-dash-table tbody tr:hover {
	background: var(--navy-700);
}

.bld-dash-table img {
	border-radius: var(--r-sm);
}

/* ─── Badges ─────────────────────────────────────────────── */

.bld-badge {
	display: inline-block;
	padding: .15rem .6rem;
	border-radius: var(--r-full);
	background: #343D4D;
	color: var(--gray-300);
	font-size: .8rem;
	white-space: nowrap;
}

.bld-badge--status {
	background: rgba(212, 168, 75, .16);
	color: var(--gold-light);
}

.bld-badge--whatsapp {
	background: rgba(37, 211, 102, .16);
	color: var(--green-wa);
}

.bld-badge--warn {
	background: rgba(224, 85, 95, .18);
	color: #FF9AA5;
}

/* ─── Buttons ────────────────────────────────────────────── */

/* BLD-038 (the last 2 of 9): .bld-btn and the dashboard pagination were the two controls left
   under the 44px minimum touch target after the theme-side pass fixed the other seven — they
   live here in the plugin, which that pass did not cover. .55rem padding on a .9rem font gives
   roughly 36px, which is a miss on every phone. min-height is used rather than more padding so
   the button's visual proportions are unchanged on desktop, where it was never the problem. */
.bld-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	gap: .4rem;
	border: 1px solid var(--gold);
	border-radius: var(--r-full);
	padding: .55rem 1.1rem;
	background: transparent;
	color: var(--gold);
	cursor: pointer;
	text-decoration: none;
	font-size: .9rem;
	transition: var(--trans-fast);
}

.bld-btn:hover {
	transform: translateY(-1px);
	background: rgba(212, 168, 75, .1);
}

.bld-btn--gold {
	background: linear-gradient(135deg, var(--gold), var(--gold-light));
	color: var(--navy);
	font-weight: 700;
	border-color: transparent;
}

.bld-btn--gold:hover {
	box-shadow: 0 8px 24px rgba(212, 168, 75, .35);
}

.bld-link-danger {
	border: 0;
	background: none;
	color: #FF9AA5;
	cursor: pointer;
	text-decoration: underline;
	font-size: .85rem;
	padding: 0;
}

.bld-link-danger:hover {
	color: var(--red-warn);
}

/* ─── Forms ──────────────────────────────────────────────── */

.bld-dash-form {
	display: grid;
	gap: 1rem;
	max-width: 720px;
	padding: 1.25rem;
	background: var(--navy-800);
	border-radius: var(--r-md);
	border: 1px solid var(--navy-600);
}

.bld-dash-form label,
.bld-dash-form fieldset {
	display: grid;
	gap: .4rem;
	font-size: .9rem;
	color: var(--gray-300);
}

.bld-dash-form fieldset {
	border: 1px solid var(--navy-600);
	border-radius: var(--r-md);
	padding: 1rem;
}

.bld-dash-form legend {
	padding-inline: .4rem;
	color: var(--gold);
	font-weight: 600;
	font-size: .85rem;
}

.bld-inline-choice {
	display: inline-flex !important;
	flex-direction: row;
	align-items: center;
	gap: .4rem;
	margin-inline-end: 1rem;
}

.bld-payment-group {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	padding-block: .25rem;
}

.bld-dashboard input,
.bld-dashboard textarea,
.bld-dashboard select {
	box-sizing: border-box;
	width: 100%;
	padding: .65rem;
	background: var(--navy-700);
	border: 1px solid var(--gray-500);
	border-radius: var(--r-sm);
	color: var(--white);
	font-family: inherit;
	font-size: .9rem;
}

.bld-dashboard input[type="checkbox"],
.bld-dashboard input[type="radio"] {
	width: auto;
	accent-color: var(--gold);
}

.bld-dashboard input[type="color"] {
	padding: .2rem;
	height: 2.6rem;
}

.bld-dashboard input:focus,
.bld-dashboard textarea:focus,
.bld-dashboard select:focus {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.bld-dashboard input[type="file"] {
	padding: .5rem;
	background: var(--navy-600);
}

/* ─── Media picker ───────────────────────────────────────── */

.bld-media-preview {
	max-width: 220px;
	border-radius: var(--r-sm);
	border: 1px solid var(--navy-600);
	margin-block-end: .5rem;
}

.bld-gallery-preview {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.bld-gallery-preview img {
	border-radius: var(--r-sm);
	border: 1px solid var(--navy-600);
}

/* ─── Toolbar ────────────────────────────────────────────── */

.bld-dash-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.bld-dash-toolbar h2 {
	margin-block-end: 0;
}

/*
 * Task 6: product search, sitting between the heading and the Add-product button in the flex
 * toolbar. It takes the middle so it grows into spare width on desktop and wraps to its own line
 * on narrow screens, where .bld-dash-toolbar already sets flex-wrap.
 */
.bld-dash-search {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 1 1 16rem;
	min-width: 0;
}

.bld-dash-search input[type=search] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: .5rem .75rem;
	/* 16px minimum, or iOS Safari zooms the viewport the moment the field is focused. */
	font-size: 16px;
	color: var(--white);
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--navy-600);
	border-radius: var(--r-md);
}

.bld-dash-search input[type=search]:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.bld-dash-search__clear {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--gray-400);
	white-space: nowrap;
}

/* ─── Reviews ────────────────────────────────────────────── */

.bld-review {
	padding: 1rem 0;
	border-block-end: 1px solid var(--navy-700);
	display: grid;
	gap: .35rem;
}

.bld-review-stars {
	color: var(--gold);
	letter-spacing: .1em;
}

.bld-review form {
	display: grid;
	gap: .5rem;
	max-width: 480px;
	margin-block-start: .5rem;
}

/* ─── Timeline ───────────────────────────────────────────── */

.bld-timeline {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.bld-timeline li {
	position: relative;
	padding: .5rem 1.25rem;
	color: var(--gray-400);
	font-size: .85rem;
	border-block-start: 3px solid var(--navy-600);
}

.bld-timeline li.is-current {
	color: var(--gold);
	font-weight: 700;
	border-color: var(--gold);
}

/* ─── Utility ────────────────────────────────────────────── */

.bld-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─── Stock tab (Stage 14E) ──────────────────────────────── */

.bld-stock-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-block-end: 1rem;
}

.bld-stock-search input[type="search"] {
	width: auto;
	flex: 1 1 220px;
	min-height: 44px;
}

/*
 * HISTORICAL NOTE, kept because it names the bug: this comment used to read "deliberately NOT
 * `table-layout: fixed; width: 100%` on the descendants — that combination (see .bld-dash-table
 * above) cancels the wrapper's overflow-x: auto and silently truncates columns on mobile."
 *
 * That diagnosis was exactly right, and it was written while leaving the broken combination in
 * place for every OTHER dashboard table — which is what BLD-007 turned out to be. The root cause
 * is now removed from .bld-dash-table itself, so there is nothing left to work around here.
 *
 * This wrapper still earns its place: a real horizontal-scroll container for the widest table in
 * the dashboard between the card breakpoint and full desktop width. The card layout it hands off
 * to is now at 768px, not 640px, and applies to every table rather than this one.
 */
.bld-stock-wrap {
	overflow-x: auto;
}

.bld-stock-table {
	width: 100%;
	border-collapse: collapse;
}

.bld-stock-product-cell {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.bld-stock-select-col {
	width: 2.75rem;
}

.bld-stock-select-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.bld-stock-select-wrap input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
}

.bld-stock-qty-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	max-width: none;
	padding: 0;
	background: none;
	border: 0;
}

.bld-stock-qty-input {
	width: 5rem;
	min-height: 44px;
	font-size: 1rem;
	padding: .5rem;
}

.bld-stock-qty-save {
	min-height: 44px;
	min-width: 44px;
	padding-inline: .75rem;
}

.bld-stock-row-msg {
	display: block;
	flex-basis: 100%;
	font-size: .8rem;
	color: var(--gray-400);
}

/*
 * The 44px tap-target rule that used to live here is now `.bld-dash-table td a` up in the shared
 * table block (BLD-008). Stock was the ONE table that already had it; the identical declarations
 * are what the generalisation was modelled on, so keeping a stock-specific copy would just be two
 * places to change.
 */

.bld-stock-status {
	white-space: nowrap;
}

.bld-stock-status--ok {
	background: rgba(37, 211, 102, .16);
	color: #7CE3A4;
}

.bld-stock-status--low {
	background: rgba(212, 168, 75, .18);
	color: var(--gold-light);
}

.bld-stock-status--out {
	background: rgba(224, 85, 95, .18);
	color: #FF9AA5;
}

.bld-stock-delta--up {
	color: #7CE3A4;
}

.bld-stock-delta--down {
	color: #FF9AA5;
}

/*
 * BLD-007: card layout for EVERY dashboard table, not just the stock one.
 *
 * This pattern was written for .bld-stock-table and worked; the other five tables (orders,
 * products, coupons, billing, overview) kept the truncating fixed-layout table and were the
 * actual defect. Since .bld-stock-table is only ever applied alongside .bld-dash-table, widening
 * the selector to the shared class covers stock as well and leaves exactly one responsive
 * strategy in this file instead of two.
 *
 * Depends on every `<td>` carrying a `data-label` — the ::before below is what supplies the
 * column name once the header row is hidden. A cell without one renders as a bare value with no
 * indication of what it means, so the markup pass adding those attributes is a hard prerequisite,
 * not a nicety.
 *
 * 768px, not the 640px this previously used: it matches the theme's own nav breakpoint
 * (base.css), so the dashboard and the storefront now change shape at the same width instead of
 * 128px apart. That is a step toward BLD-020 (two disjoint breakpoint scales) rather than another
 * entry in it.
 */
@media (max-width: 768px) {
	.bld-dash-table thead {
		display: none;
	}

	.bld-dash-table,
	.bld-dash-table tbody,
	.bld-dash-table tr,
	.bld-dash-table td {
		display: block;
		width: 100%;
		table-layout: auto;
	}

	.bld-dash-table tr {
		margin-block-end: 1rem;
		border: 1px solid var(--navy-600);
		border-radius: var(--r-md);
		padding: .25rem .75rem;
	}

	.bld-dash-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .75rem;
		padding: .6rem 0;
		border: 0;
		border-block-end: 1px solid var(--navy-700);
		white-space: normal;
		text-align: end;
	}

	.bld-dash-table td:last-child {
		border-block-end: 0;
	}

	.bld-dash-table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--gray-400);
		text-align: start;
		padding-inline-end: .75rem;
		/* Keep the label readable when the value is long — the label column must not collapse. */
		flex: 0 0 auto;
	}

	/*
	 * A cell with no data-label (a checkbox column, an image thumbnail) would otherwise render an
	 * empty ::before and push its value to the right for no reason.
	 */
	.bld-dash-table td:not([data-label])::before {
		content: none;
	}

	.bld-stock-qty-form {
		justify-content: flex-end;
	}
}

/* ─── RTL ────────────────────────────────────────────────── */

[dir="rtl"] .bld-dash-table th,
[dir="rtl"] .bld-dash-table td {
	text-align: right;
}

[dir="rtl"] .bld-dash-nav a {
	border-inline-start: none;
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 900px) {
	.bld-dashboard {
		margin: 0;
		border-radius: 0;
	}

	.bld-dash-nav {
		gap: 0;
	}

	.bld-dash-nav ul {
		width: 100%;
	}

	.bld-dash-store-name {
		display: none;
	}
}

@media (max-width: 700px) {
	.bld-dash-toolbar {
		align-items: flex-start;
		flex-direction: column;
	}

	.bld-kpi-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.bld-kpi-grid {
		grid-template-columns: 1fr;
	}
}

/* Product-edit variation matrix (product-edit.php + dashboard.js section 4b).
   One row per attribute combination: label, then price and stock side by side. */
.bld-var-attr {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 12px;
	margin-bottom: 10px;
}

.bld-var-matrix {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bld-var-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px;
	align-items: end;
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
}

.bld-var-row__label {
	font-weight: 600;
	align-self: center;
}

.bld-var-row input {
	width: 9ch;
}

@media (max-width: 600px) {
	.bld-var-attr,
	.bld-var-row {
		grid-template-columns: 1fr;
	}

	.bld-var-row input {
		width: 100%;
	}
}

/* Stock screen — variation child rows (views/stock.php).
   Indented and tinted so a variation reads as belonging to the product above it, rather than
   as another catalogue entry. */
.bld-stock-row--variation > td:first-child + td {
	padding-inline-start: 28px;
}

.bld-stock-row--variation {
	background: rgba(0, 0, 0, 0.02);
}

.bld-stock-variation-label {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: #555;
}

.bld-stock-total-hint {
	display: block;
	margin: 0;
}

@media (max-width: 782px) {
	/* The table collapses to stacked cards on mobile, where an inline indent would read as a
	   broken cell; a left border keeps the parent/child relationship legible instead. */
	.bld-stock-row--variation > td:first-child + td {
		padding-inline-start: 0;
	}

	.bld-stock-row--variation {
		border-inline-start: 3px solid rgba(0, 0, 0, 0.15);
	}
}