/**
 * Partner portal styles (§R11). Plain CSS enqueued via wp_enqueue_style,
 * not a build step — this plugin has no asset pipeline of its own
 * (matches the plugin's overall scope: a handful of hand-written files,
 * not a package that needs bundling).
 */

/**
 * Referral-declaration rebuild (the "دکتر" reference dashboard): its own
 * design tokens, on :root rather than scoped to .yazd-partner-portal
 * (Elementor conversion, Phase B) — that class also carries page-container
 * layout (max-width/margin/padding, below), which is correct for the one
 * old shortcode-rendered wrapper but wrong to inherit for the new Elementor
 * widgets, which are independent siblings in Elementor's own Container/
 * Column layout, not nested inside a single 960px-centered box. Already
 * safely namespaced (`--yazd-*`), confirmed no collision with the theme's
 * own `--wp--preset--*` palette, so :root is safe. Values are the exact
 * ones read from the reference app's own generated CSS
 * (`_next/static/css/app/layout.css`), not approximated by eye.
 */
:root {
	--yazd-brand-300: oklch(0.79 0.105 205);
	--yazd-brand-500: oklch(0.62 0.13 205);
	--yazd-brand-600: oklch(0.53 0.12 207);
	--yazd-brand-700: oklch(0.44 0.1 209);

	/* Darkened from the reference app's own oklch(0.72 0.14 75) -- found
	   live via axe-core once the "previous referrals" list became
	   permanently visible on the main dashboard (2026-08-20 merge):
	   white text on the original lighter value measured 2.53:1, a real
	   "serious" violation against the 4.5:1 minimum. Same hue kept (still
	   reads as the same amber "pending" color), just dark enough for
	   white text to clear contrast -- same "darker variant for text on a
	   filled background" fix already used elsewhere in this file. */
	--yazd-status-pending: oklch(0.55 0.14 75);
	--yazd-status-matched: oklch(0.65 0.13 250);
	--yazd-status-verified: oklch(0.62 0.15 150);
	--yazd-status-paid: oklch(0.52 0.13 155);
	--yazd-status-expired: oklch(0.6 0.02 260);
	--yazd-status-rejected: oklch(0.58 0.19 25);
	--yazd-surface: oklch(0.99 0.003 240);
	--yazd-surface-raised: oklch(1 0 0);
	--yazd-surface-sunken: oklch(0.96 0.006 240);
	--yazd-border: oklch(0.9 0.008 240);
	--yazd-text: oklch(0.22 0.015 250);
	--yazd-text-secondary: oklch(0.48 0.015 250);
	--yazd-radius-card: 0.875rem;
}

@media (prefers-color-scheme: dark) {

	:root {
		--yazd-surface: oklch(0.19 0.012 250);
		--yazd-surface-raised: oklch(0.24 0.014 250);
		--yazd-surface-sunken: oklch(0.15 0.01 250);
		--yazd-border: oklch(0.32 0.014 250);
		--yazd-text: oklch(0.95 0.005 250);
		--yazd-text-secondary: oklch(0.72 0.012 250);
	}
}

.yazd-partner-portal {
	max-width: 960px;
	margin: 0 auto;
	padding: 20px;
}

.yazd-partner-portal__header h2 {
	margin-bottom: 4px;
}

.yazd-partner-portal__notice {
	background: #fef3c7;
	border: 1px solid #f59e0b;
	border-radius: 8px;
	padding: 16px 20px;
}

.yazd-partner-portal__card {
	background: #f8f9fa;
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 20px;
	border: 1px solid #e9ecef;
}

.yazd-partner-portal__code {
	font-size: 24px;
	font-weight: 700;
	color: #2563eb;
	margin: 10px 0;
	padding: 10px;
	background: #fff;
	border-radius: 4px;
	text-align: center;
	letter-spacing: 0.05em;
}

.yazd-partner-portal__description {
	font-size: 13px;
	color: #6b7280;
}

.yazd-partner-portal__balance {
	margin: 20px 0;
	padding: 15px;
	background: #fff;
	border-radius: 4px;
	text-align: center;
}

.yazd-partner-portal__balance-amount {
	font-size: 28px;
	font-weight: 700;
	color: #047857;
	margin: 10px 0;
}

.yazd-partner-portal__actions {
	margin-top: 15px;
	text-align: center;
}

.yazd-partner-portal__actions .button {
	margin: 0 5px;
}

.yazd-partner-portal__products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
	margin-top: 15px;
}

.yazd-partner-portal__product-card {
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.yazd-partner-portal__product-card h4 {
	margin: 0 0 10px;
	font-size: 16px;
}

.yazd-partner-portal__product-prices {
	margin-bottom: 8px;
}

.yazd-partner-portal__public-price {
	font-weight: 700;
	color: #1f2937;
	display: block;
}

.yazd-partner-portal__partner-price {
	font-size: 14px;
	color: #047857;
}

.yazd-partner-portal__credit-info {
	font-size: 13px;
	color: #2563eb;
	margin-bottom: 8px;
}

.yazd-partner-portal__item-code {
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 10px;
}

.yazd-partner-portal__item-code code {
	background: #f3f4f6;
	padding: 2px 6px;
	border-radius: 4px;
}

.yazd-partner-portal--denied {
	text-align: center;
	padding: 40px 20px;
}

/* Top nav (داشبورد / معرفی جدید / معرفی‌های من / کاتالوگ و پورسانت). */
.yazd-portal-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--yazd-border);
	padding-bottom: 4px;
}

.yazd-portal-nav a {
	padding: 8px 14px;
	border-radius: 8px 8px 0 0;
	color: var(--yazd-text-secondary);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
}

.yazd-portal-nav a:hover {
	background: var(--yazd-surface-sunken);
}

.yazd-portal-nav a.is-active {
	color: var(--yazd-brand-700);
	background: var(--yazd-surface-sunken);
	box-shadow: inset 0 -2px 0 var(--yazd-brand-600);
}

/* Stat tiles (dashboard). */
.yazd-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}

.yazd-stat-tile {
	background: var(--yazd-surface-raised);
	border: 1px solid var(--yazd-border);
	border-radius: var(--yazd-radius-card);
	padding: 16px 18px;
}

.yazd-stat-tile__label {
	font-size: 0.8rem;
	color: var(--yazd-text-secondary);
}

.yazd-stat-tile__value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--yazd-text);
	font-variant-numeric: tabular-nums;
	margin-top: 4px;
}

.yazd-stat-tile--pending {
	border-inline-start: 3px solid var(--yazd-status-pending);
}

.yazd-stat-tile--payable {
	border-inline-start: 3px solid var(--yazd-status-verified);
}

.yazd-stat-tile--paid {
	border-inline-start: 3px solid var(--yazd-status-paid);
}

.yazd-stat-tile--total {
	border-inline-start: 3px solid var(--yazd-brand-600);
}

/* Generic card. */
.yazd-card {
	background: var(--yazd-surface-raised);
	border: 1px solid var(--yazd-border);
	border-radius: var(--yazd-radius-card);
	padding: 18px 20px;
	margin-bottom: 18px;
}

.yazd-card h2,
.yazd-card h3 {
	margin-top: 0;
}

/* Status badges. */
.yazd-status-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 500;
	color: #fff;
}

.yazd-status-badge--pending {
	background: var(--yazd-status-pending);
}

.yazd-status-badge--matched {
	background: var(--yazd-status-matched);
}

.yazd-status-badge--verified {
	background: var(--yazd-status-verified);
}

.yazd-status-badge--paid {
	background: var(--yazd-status-paid);
}

.yazd-status-badge--expired {
	background: var(--yazd-status-expired);
}

.yazd-status-badge--rejected {
	background: var(--yazd-status-rejected);
}

/* "My Referrals" list rows. */
.yazd-referral-row {
	background: var(--yazd-surface-raised);
	border: 1px solid var(--yazd-border);
	border-radius: var(--yazd-radius-card);
	padding: 16px 18px;
	margin-bottom: 14px;
}

.yazd-referral-row__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.yazd-referral-row__patient {
	font-weight: 700;
}

.yazd-referral-row__phone,
.yazd-referral-row__meta {
	color: var(--yazd-text-secondary);
	font-size: 0.85rem;
}

.yazd-referral-row__items {
	margin: 8px 0;
	font-size: 0.9rem;
}

.yazd-referral-row__figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--yazd-border);
}

.yazd-referral-row__figure-label {
	font-size: 0.78rem;
	color: var(--yazd-text-secondary);
}

.yazd-referral-row__figure-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.yazd-referral-row__actions {
	margin-top: 10px;
	display: flex;
	gap: 12px;
	font-size: 0.85rem;
}

/* stylelint-disable-next-line no-descending-specificity -- flagged against
   .yazd-portal-nav a:hover above, an unrelated selector under a different
   parent class that this one can never actually conflict with. */
.yazd-referral-row__actions a {
	color: var(--yazd-brand-700);
}

.yazd-referral-row__actions a.is-destructive {
	color: var(--yazd-status-rejected);
}

/* Declare form. */
.yazd-form-field {
	margin-bottom: 16px;
}

.yazd-form-field label {
	display: block;
	font-weight: 500;
	margin-bottom: 6px;
}

.yazd-form-field input[type="text"],
.yazd-form-field input[type="tel"],
.yazd-form-field input[type="search"],
.yazd-form-field textarea {
	width: 100%;
	max-width: 480px;
	padding: 10px 12px;
	border: 1px solid var(--yazd-border);
	border-radius: 8px;
	background: var(--yazd-surface);
	color: var(--yazd-text);
	font: inherit;
}

.yazd-form-field .description {
	font-size: 0.8rem;
	color: var(--yazd-text-secondary);
	margin-top: 4px;
}

/* Patient info, collapsed by default (2026-08-20 store-owner request:
   "much smaller" now that the item picker below is the main event) — a
   native <details>/<summary> disclosure rather than a plain card, so its
   default (closed) footprint is just one summary line. */
.yazd-card--compact {
	padding: 4px 20px;
}

.yazd-patient-details summary {
	cursor: pointer;
	padding: 10px 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--yazd-text-secondary);
}

.yazd-patient-details[open] summary {
	color: var(--yazd-text);
	border-bottom: 1px solid var(--yazd-border);
	margin-bottom: 12px;
}

/* Item picker card, deliberately given more room than any other card in
   this column (2026-08-20 store-owner request: "has to be bigger") — see
   .yazd-merged-dashboard's own widened middle column track below. */
.yazd-card--items {
	padding: 20px 22px 22px;
}

.yazd-item-picker__heading {
	margin: 0 0 10px;
	font-size: 0.95rem;
	color: var(--yazd-text-secondary);
}

.yazd-item-picker__heading:not(:first-child) {
	margin-top: 22px;
}

/* Favorites photo grid, above the searchable plain list. */
.yazd-fav-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: 6px;
}

.yazd-fav-card {
	position: relative;
	border: 1px solid var(--yazd-border);
	border-radius: 10px;
	background: color-mix(in oklch, var(--yazd-brand-500) 6%, var(--yazd-surface-raised));
	overflow: hidden;
}

/* A single <label> (see render_item_picker_card()'s own comment on why
   just one, not two) wraps the image and the name/body text, so the
   whole card surface toggles the checkbox — plain <span>s throughout
   inside it (not <div>s, just to keep the markup itself visibly "this is
   all one label's content" at a glance), `display: block`ed here since
   they'd otherwise default to inline. */
.yazd-fav-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.yazd-fav-card__image {
	display: block;
	aspect-ratio: 1;
}

.yazd-fav-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yazd-fav-card__body {
	display: block;
	padding: 10px 12px 12px;
}

.yazd-fav-card__name {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 4px;
}

.yazd-fav-card__price {
	display: block;
	color: var(--yazd-text-secondary);
	font-size: 0.85rem;
	margin-bottom: 8px;
}

.yazd-fav-card__controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.yazd-item-picker {
	max-height: 480px;
	overflow-y: auto;
	border: 1px solid var(--yazd-border);
	border-radius: 8px;
}

.yazd-item-picker__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--yazd-border);
}

/* The row's own `display: flex` above outranks the UA stylesheet's
   `[hidden] { display: none }` (a class beats a bare attribute selector on
   specificity) — found live: portal.js was correctly setting `.hidden`
   on filtered-out rows, but they kept rendering anyway. This selector's
   extra attribute clause gives it the higher specificity needed to win. */
.yazd-item-picker__row[hidden] {
	display: none;
}

.yazd-item-picker__row:last-child {
	border-bottom: none;
}

.yazd-item-picker__name {
	flex: 1;
}

.yazd-item-picker__price {
	color: var(--yazd-text-secondary);
	font-size: 0.85rem;
	white-space: nowrap;
}

.yazd-item-picker__qty {
	width: 56px;
	padding: 4px 6px;
	border: 1px solid var(--yazd-border);
	border-radius: 6px;
}

/* Item-picker toolbar: search box + favorites-only filter, both added
   once the catalog grew past what one unfiltered checklist could stay
   easy to scan in (docs/qa/part2-r27-referral-declaration-rebuild.md). */
.yazd-item-picker__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.yazd-item-picker__search {
	flex: 1 1 220px;
	min-width: 160px;
	padding: 8px 10px;
	border: 1px solid var(--yazd-border);
	border-radius: 6px;
	background: var(--yazd-surface-raised);
	color: var(--yazd-text);
	font-size: 0.9rem;
}

.yazd-item-picker__empty {
	padding: 14px 12px;
	text-align: center;
	color: var(--yazd-text-secondary);
	font-size: 0.9rem;
}

/* A favorited catalog card gets a faint tinted background so a doctor's
   own shortlist stays visually distinct there too — the declare form's
   own item picker no longer needs this selector: favorited products get
   their own dedicated .yazd-fav-card treatment above, and the plain list
   below never holds a favorited product to begin with. */
.yazd-catalog-card.is-favorite {
	background: color-mix(in oklch, var(--yazd-brand-500) 8%, transparent);
}

.yazd-favorite-toggle {
	flex: 0 0 auto;
	background: none;
	border: 1px solid var(--yazd-border);
	border-radius: 6px;
	width: 32px;
	height: 32px;
	line-height: 1;
	font-size: 1rem;
	color: var(--yazd-text-secondary);
	cursor: pointer;
}

.yazd-favorite-toggle.is-active {
	color: var(--yazd-status-pending);
	border-color: var(--yazd-status-pending);
}

.yazd-favorite-toggle:disabled {
	opacity: 0.6;
	cursor: default;
}

.yazd-fav-card .yazd-favorite-toggle {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	background: var(--yazd-surface-raised);
	z-index: 1;
}

.yazd-totals {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	background: var(--yazd-surface-sunken);
	border-radius: 8px;
	padding: 14px 16px;
	margin: 16px 0;
}

.yazd-totals__label {
	font-size: 0.8rem;
	color: var(--yazd-text-secondary);
}

.yazd-totals__value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.yazd-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 16px 0;
	font-size: 0.9rem;
}

.yazd-consent input {
	margin-top: 4px;
}

.yazd-btn-primary {
	background: var(--yazd-brand-600);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 12px 20px;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}

.yazd-btn-primary:hover {
	background: var(--yazd-brand-700);
}

/* Declaration confirmation (code + QR + SMS text). */
.yazd-confirmation {
	text-align: center;
}

.yazd-confirmation__code {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--yazd-brand-700);
	background: var(--yazd-surface-sunken);
	border-radius: 10px;
	padding: 14px;
	margin: 16px auto;
	max-width: 280px;
}

.yazd-confirmation__qr {
	width: 180px;
	height: 180px;
	margin: 0 auto 16px;
}

.yazd-confirmation__qr svg {
	width: 100%;
	height: 100%;
}

.yazd-sms-box {
	background: var(--yazd-surface-sunken);
	border-radius: 8px;
	padding: 14px;
	text-align: right;
	white-space: pre-wrap;
	font-size: 0.9rem;
	margin: 16px 0;
}

/* Declaration-confirmation popup (2026-08-20 store-owner request) — a
   native <dialog>, opened via showModal() in portal.js. Styled fully
   rather than left to the UA stylesheet so it follows this plugin's own
   light/dark tokens like every other card. */
.yazd-confirmation-modal {
	max-width: 420px;
	width: calc(100% - 40px);
	border: 1px solid var(--yazd-border);
	border-radius: var(--yazd-radius-card);
	padding: 0;
	background: var(--yazd-surface-raised);
	color: var(--yazd-text);
}

.yazd-confirmation-modal::backdrop {
	background: oklch(0% 0 0 / 55%);
}

/* Neutralize .yazd-card's own border/background here — the <dialog>
   itself already renders that box; without this the card would render a
   second, redundant border/fill nested just inside the dialog's own. */
.yazd-confirmation-modal .yazd-confirmation {
	padding: 30px 22px 24px;
	position: relative;
	margin-bottom: 0;
	background: none;
	border: none;
}

.yazd-modal-close {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	width: 32px;
	height: 32px;
	line-height: 1;
	font-size: 1.2rem;
	border: 1px solid var(--yazd-border);
	border-radius: 999px;
	background: var(--yazd-surface-sunken);
	color: var(--yazd-text);
	cursor: pointer;
}

.yazd-confirmation__next {
	display: block;
	width: 100%;
	margin-top: 18px;
}

/* Catalog tab. */
.yazd-catalog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.yazd-catalog-filters button {
	background: var(--yazd-surface-sunken);
	border: 1px solid var(--yazd-border);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.85rem;
	cursor: pointer;
	color: var(--yazd-text);
}

.yazd-catalog-filters button.is-active {
	background: var(--yazd-brand-600);
	border-color: var(--yazd-brand-600);
	color: #fff;
}

.yazd-catalog-card {
	background: var(--yazd-surface-raised);
	border: 1px solid var(--yazd-border);
	border-radius: var(--yazd-radius-card);
	padding: 16px 18px;
	margin-bottom: 14px;
}

.yazd-catalog-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.yazd-catalog-card__price-original {
	text-decoration: line-through;
	color: var(--yazd-text-secondary);
}

.yazd-catalog-card__price-patient {
	font-weight: 700;
}

.yazd-catalog-card__commission {

	/* --yazd-status-verified (the same green used for status badges, where
	   it's a light-on-dark background and passes fine) measured 3.42:1 as
	   bold text-on-white here — found live via axe-core, real "serious"
	   violation. --yazd-status-paid is the same hue, darker, and does
	   clear 4.5:1 as body/bold text — same "darker variant for text,
	   lighter for a filled background" fix already used for the badge
	   colors in the Phase 11 accessibility pass. */
	color: var(--yazd-status-paid);
	font-weight: 700;
}

/* ---------------------------------------------------------------------
   Merged dashboard (2026-08-20 store-owner request): replaces what used
   to be three separate tabs (dashboard / new referral / my referrals)
   with one 3-column working view. Column naming follows the store
   owner's own spec literally: right = previous referrals, middle =
   products for selection (+ patient info/note), left = rates/code/
   payable total + submit. Widens the portal's own base container only
   on this view (`:has()`, well past Baseline by now) — 960px is fine for
   every other tab, but genuinely cramped for three working columns side
   by side.
   --------------------------------------------------------------------- */
.yazd-partner-portal:has(.yazd-merged-dashboard) {
	max-width: 1400px;
}

.yazd-merged-dashboard {
	display: grid;

	/* Middle widened from 1.6fr (2026-08-20 store-owner request: the item
	   picker "has to be bigger" now that it holds a photo grid too). */
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-areas: "right middle left";
	gap: 18px;
	align-items: start;
}

.yazd-merged-dashboard__right {
	grid-area: right;
}

.yazd-merged-dashboard__middle {
	grid-area: middle;
	min-width: 0; /* let long product names/inputs shrink instead of overflowing the grid track */
}

.yazd-merged-dashboard__left {
	grid-area: left;
	position: sticky;
	top: 18px;
}

@media (width < 1024px) {

	.yazd-merged-dashboard {
		grid-template-columns: 1fr;
		grid-template-areas:
			"middle"
			"left"
			"right";
	}

	.yazd-merged-dashboard__left {
		position: static;
	}
}

.yazd-previous-referrals {
	max-height: 900px;
	overflow-y: auto;
}

/* Chrome-free portal header (parts/partner-header.html's own
   [yazd_partner_header_actions] shortcode) — deliberately plain, not
   reusing .yazd-card/etc. tokens, since it renders inside the theme's
   own header template part, outside .yazd-partner-portal's scoped
   custom properties. */
.yazd-portal-header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 0.9rem;
}

.yazd-portal-header-actions__name {
	font-weight: 600;
}

.yazd-portal-header-actions__link {
	text-decoration: none;
}

.yazd-portal-header-actions__link:hover,
.yazd-portal-header-actions__link:focus-visible {
	text-decoration: underline;
}