/**
 * WP Career Board — BuddyX Pro theme compatibility styles.
 *
 * Bridges WCB design tokens to BuddyX Pro's own theme tokens so every
 * WCB card, button, border and label inherits the theme palette and
 * flips automatically with BuddyX Pro's html.dark-mode class.
 *
 * Loaded on any page containing a WCB block or displaying a WCB CPT.
 *
 * @package WP_Career_Board
 * @since   1.0.0
 */

/*
 * Token bridge — re-map the WCB palette to BuddyX Pro's variables.
 * BuddyX Pro updates `--color-theme-white-box`, `--global-border-color`,
 * etc. when its dark-mode class is active, so the WCB components re-color
 * for free in both modes. The hex fallbacks keep things sane if a BuddyX
 * token is ever missing (e.g. older theme version).
 *
 * The `html.dark-mode` selector matches the dark-mode block in WCB's own
 * frontend.css (specificity 0,1,1) and load-order tips the tiebreak in
 * favor of the bridge so BuddyX's palette beats the WCB defaults.
 */
:root,
:root[data-bx-mode="dark"],
body.buddyx-dark-theme,
body.buddyx-dark-style-variation,
html.dark-mode {
	/* Brand — BuddyX 5.1 exposes `--bx-color-primary` / `--bx-color-accent`.
	   Legacy BuddyX Pro used `--bbg-primary` / `--buddyx-primary-color`; kept as
	   fallbacks so older theme builds still bridge. */
	--wcb-primary: var( --bx-color-primary, var( --bx-color-accent, var( --bbg-primary, var( --buddyx-primary-color, #2563eb ) ) ) );
	/* No --wcb-primary-dark remap: BuddyX's own hover token isn't reliably
	   darker than the (possibly capped) fill on every accent/mode. The
	   plugin's own frontend.css derives it from --wcb-primary-strong, which
	   is always darker, so hover is guaranteed to read as pressed-in. */

	/* Theme-aware primary tints — older browsers fall back to the static
	   rgba on the first declaration; modern browsers use color-mix below. */
	--wcb-primary-soft: rgba( 37, 99, 235, 0.08 );
	--wcb-primary-ring: rgba( 37, 99, 235, 0.16 );
	--wcb-primary-soft: color-mix( in srgb, var( --wcb-primary ) 8%, transparent );
	--wcb-primary-ring: color-mix( in srgb, var( --wcb-primary ) 16%, transparent );

	/* Text — 5.1: `--bx-color-text-primary`/`--bx-color-fg` for strong titles,
	   `--bx-color-text`/`--bx-color-fg` for body, `--bx-color-text-muted`/
	   `--bx-color-fg-muted` for secondary/muted. These flip automatically under
	   BuddyX's `:root[data-bx-mode="dark"]`, so WCB re-colors in dark mode free. */
	--wcb-contrast:       var( --bx-color-text-primary, var( --bx-color-fg, var( --bbg-headings-color, #0f172a ) ) );
	--wcb-text-primary:   var( --bx-color-text-primary, var( --bx-color-fg, var( --bbg-headings-color, #111111 ) ) );
	--wcb-text-secondary: var( --bx-color-text, var( --bx-color-fg-muted, var( --global-font-color, #475569 ) ) );
	--wcb-text-muted:     var( --bx-color-text-muted, var( --bx-color-fg-subtle, #6b7280 ) );
	--wcb-text-tertiary:  var( --bx-color-fg-subtle, var( --bx-color-text-muted, #9ca3af ) );

	/* Surfaces — 5.1: `--bx-color-bg-elevated` is the card/panel surface,
	   `--bx-color-bg-subtle`/`--bx-color-bg-muted` are the subtle bands. */
	--wcb-base:      var( --bx-color-bg-elevated, var( --color-theme-white-box, #ffffff ) );
	--wcb-surface:   var( --bx-color-bg-subtle, var( --global-body-lightcolor, #f1f5f9 ) );
	--wcb-bg-subtle: var( --bx-color-bg-muted, var( --bx-color-bg-subtle, var( --color-theme-body, #f8fafc ) ) );
	--wcb-bg-hover:  color-mix( in srgb, var( --wcb-primary ) 6%, var( --wcb-base, #ffffff ) );

	/* Borders — 5.1: `--bx-color-border`. */
	--wcb-border: var( --bx-color-border, var( --global-border-color, #e2e8f0 ) );

	/* Status — keep WCB's accessible defaults rather than bridging to BuddyX's
	   semantic tokens: `--bx-color-warning` (#eab308) and friends are tuned for
	   chips/icons, not text-on-white, and fail contrast for stat values. Legacy
	   `--bbg-*` overrides still win when a site explicitly sets them. */
	--wcb-success: var( --bbg-success-color, #16a34a );
	--wcb-warning: var( --bbg-warning-color, #d97706 );
	--wcb-danger:  var( --bbg-danger-color, #dc2626 );
	--wcb-info:    var( --wcb-primary );

	/* No --wcb-avatar-bg here: it is a surface, and the theme's text colour is
	   light in dark mode. The plugin's own light and dark values apply. */
}

/*
 * WCB's brand pill buttons (apply / primary / save) sit on the saturated
 * `--wcb-primary`. The label is `--wcb-on-primary`, which is derived from that
 * same accent (white on a dark one, near-black on a light one), so it passes
 * contrast whatever palette the Customizer picks. BuddyX's own button text
 * colour is chosen for BuddyX's fill, not ours, so it is not used here.
 */
.wcb-btn--primary,
.wcb-btn-primary,
.wcb-apply-btn,
.wcb-save-btn {
	color: var( --wcb-on-primary, #ffffff ) !important;
	transition: filter var( --wcb-transition-snappy, 0.15s ease );
}

/*
 * Text / ghost buttons rendered as links.
 *
 * The token bridge above maps WCB colors to BuddyX's palette, but BuddyX 5.1
 * ALSO sets `color` directly on every non-wp <button>
 * (`button:not([class*="wp-"]){ color: var(--bx-color-button-fg) }`, specificity
 * ~0,5,1) and gives panel-link buttons the full primary fill. A token remap
 * cannot undo a direct `color`/`background` declaration, so these WCB buttons —
 * the dashboard nav tabs and the "View all" panel links, which are <button>s
 * styled as text/ghost links on light surfaces — must re-assert the bridged
 * token here or they render white-on-white / as solid coral pills. This is the
 * same override pattern as the primary-button rule above; it lives in the theme
 * compat layer (not block CSS) and uses the bridged WCB tokens, so it follows
 * the BuddyX palette and dark mode automatically. `-webkit-text-fill-color`
 * tracks `currentColor` because the theme's fill would otherwise still win.
 */
.wcb-dashboard .wcb-nav-item {
	color: var( --wcb-text-secondary ) !important;
	-webkit-text-fill-color: currentColor !important;
}

.wcb-dashboard .wcb-nav-item:hover {
	color: var( --wcb-contrast ) !important;
	-webkit-text-fill-color: currentColor !important;
}

/* Active tab: brand text on the brand tint, same as every other theme. */
.wcb-dashboard .wcb-nav-item.wcb-nav-active,
.wcb-dashboard .wcb-nav-item.wcb-view-active {
	color: var( --wcb-primary-text ) !important;
	-webkit-text-fill-color: currentColor !important;
}

.wcb-dashboard .wcb-panel-link {
	background: none !important;
	color: var( --wcb-blue, var( --wcb-primary, #2563eb ) ) !important;
	-webkit-text-fill-color: currentColor !important;
}

/* #OpenToWork badge shown on BuddyX Pro member profiles — uses the WCB
   teal accent family so it reads as a "trust / availability" signal
   rather than competing with the theme's primary brand color. */
.wcb-open-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2em 0.6em;
	font-size: var( --wcb-text-xs, 0.75rem );
	font-weight: var( --wcb-font-semibold, 600 );
	color: var( --wcb-base, #ffffff );
	background-color: var( --wcb-teal, #0d9488 );
	border-radius: var( --wcb-radius-full, 9999px );
	vertical-align: middle;
}

/*
 * Registration role-picker cards ("Find a Job" / "Hire Talent") are <button>s
 * used as full surface cards, not brand pills. BuddyX 5.1 paints every non-wp
 * <button> with the accent fill + button-fg color (specificity ~0,8,2, plus a
 * direct -webkit-text-fill-color), turning the white cards solid coral and the
 * labels low-contrast. Re-assert the bridged surface tokens — same override
 * pattern as the button rules above; compat layer, not block CSS. The back
 * control (.wcb-reg-back) is a ghost/text button caught by the same theme rule.
 */
.wcb-role-card {
	background: var( --wcb-base, #ffffff ) !important;
	border-color: var( --wcb-border, #e2e8f0 ) !important;
	color: var( --wcb-text-primary, #111111 ) !important;
	-webkit-text-fill-color: currentColor !important;
}

.wcb-role-card:hover,
.wcb-role-card:focus-visible {
	background: var( --wcb-info-bg, var( --wcb-surface, #f1f5f9 ) ) !important;
	border-color: var( --wcb-primary, #2563eb ) !important;
}

.wcb-role-card .wcb-role-label {
	color: var( --wcb-contrast, #0f172a ) !important;
	-webkit-text-fill-color: currentColor !important;
}

.wcb-role-card .wcb-role-desc {
	color: var( --wcb-text-secondary, #475569 ) !important;
	-webkit-text-fill-color: currentColor !important;
}

.wcb-reg-back {
	background: none !important;
	color: var( --wcb-text-secondary, #475569 ) !important;
	-webkit-text-fill-color: currentColor !important;
}

/*
 * WCB button system vs BuddyX's blanket <button> fill.
 *
 * BuddyX 5.1 paints every non-wp <button> with the accent fill + button-fg
 * (`button:not([class*="wp-"])…`, specificity ~0,8,2, direct declarations).
 * That coral-fills WCB's ENTIRE button system — secondary/ghost/danger pills,
 * view toggles, bookmark, filter-clear and salary-reset icon/text buttons —
 * not just the intended primary CTAs. A token remap can't undo a direct
 * background/color, so re-assert the WCB ladder here with the same !important
 * pattern as the button rules above (compat layer, not block CSS). Only the
 * *filled* families keep a solid fill; everything else returns to its
 * token-driven transparent/surface background with readable token text.
 */

/* Filled CTAs — keep the brand fill + a legible label. Also covers the
   Pro <button>s (job-map/resume-map location search) BuddyX's
   blanket strip below used to catch unfilled — same allowlist, both sides. */
button.wcb-btn--primary,
button.wcb-search-button,
button.wcb-search-hero__button,
button.wcb-jm-location-btn {
	background-color: var(--wcb-primary-strong) !important;
	color: var( --wcb-on-primary, #ffffff ) !important;
	-webkit-text-fill-color: currentColor !important;
}

button.wcb-btn--primary:hover,
button.wcb-btn--primary:focus-visible,
button.wcb-btn--primary:active,
button.wcb-search-button:hover,
button.wcb-search-button:focus-visible,
button.wcb-search-button:active,
button.wcb-search-hero__button:hover,
button.wcb-search-hero__button:focus-visible,
button.wcb-search-hero__button:active,
button.wcb-jm-location-btn:hover,
button.wcb-jm-location-btn:focus-visible,
button.wcb-jm-location-btn:active {
	background-color: var(--wcb-primary-dark, var(--wcb-primary-strong)) !important;
	color: var( --wcb-on-primary, #ffffff ) !important;
	-webkit-text-fill-color: currentColor !important;
}

/* The alert-card CTA is an <a>, not a <button> — BuddyX's own anchor-as-button
   styling paints it with a dark label (#111 light / #ff6b6b dark) that the
   button-only rules above never reach. */
a.wcb-job-alert-card__btn,
a.wcb-job-alert-card__btn:hover,
a.wcb-job-alert-card__btn:focus-visible {
	color: var( --wcb-on-primary, #ffffff ) !important;
	-webkit-text-fill-color: currentColor !important;
}

a.wcb-job-alert-card__btn:hover,
a.wcb-job-alert-card__btn:focus-visible,
a.wcb-job-alert-card__btn:active {
	background-color: var(--wcb-primary-dark, var(--wcb-primary-strong)) !important;
}

/* Every other WCB <button>: strip BuddyX's blanket accent fill back to a
   transparent surface with readable token text. The allowlist (:not()) is the
   intentionally-filled families above, so this one rule covers all current AND
   future WCB buttons — ladder pills, view toggles, bookmark/filter/reset icon
   buttons, dashboard chips/pills, bell and db-link actions — without having to
   enumerate every class as new widgets are added. */
button[class*="wcb-"]:not(.wcb-btn--primary, .wcb-search-button, .wcb-search-hero__button, .wcb-jm-location-btn) {
	background-color: transparent !important;
	color: var( --wcb-text-primary, #111111 ) !important;
	-webkit-text-fill-color: currentColor !important;
}

/* The employer dashboard's row actions mix <button> (Feature, Close, Publish,
   Reopen — the blanket rule above already neutralises these to one text
   colour, their accent border still shows through) and <a> (View, Edit,
   Pipeline — never reached by a button-only selector). Edit is the one
   anchor carrying an accent-text modifier, so it alone kept a coloured
   label while every other action read as the same neutral tone. */
a[class*="wcb-"].wcb-db-link-btn--edit {
	color: var( --wcb-text-primary, #111111 ) !important;
	-webkit-text-fill-color: currentColor !important;
}

/* Surface (outline-on-white) variants keep a solid light background. The extra
   [class*="wcb-"] qualifier lifts these above the blanket rule's specificity. */
button[class*="wcb-"].wcb-btn--secondary,
button[class*="wcb-"].wcb-btn--danger,
button[class*="wcb-"].wcb-layout-btn.wcb-active {
	background-color: var( --wcb-base, #ffffff ) !important;
}

/* ...and keep the shared hover tint, which the !important surface above
   would otherwise cancel for <button> actions (Reopen, Close) but not <a>. */
button[class*="wcb-"].wcb-btn--secondary:is(:hover, :focus-visible) {
	background-color: var( --wcb-bg-hover, #f1f5f9 ) !important;
}

/* The selected row in the applications picker: the blanket strip above was
   also stripping its .wcb-active tint, leaving it identical to every other
   row. Keeps the same info-tint the non-BuddyX design already uses instead
   of falling back to a plain surface, so BuddyX isn't a third look. */
button[class*="wcb-"].wcb-apps-job-item.wcb-active {
	background-color: var( --wcb-primary-soft ) !important;
}

/* Link-style + active-toggle buttons carry the primary accent on their label. */
button[class*="wcb-"].wcb-filter-panel__clear,
button[class*="wcb-"].wcb-salary-popover__reset,
button[class*="wcb-"].wcb-layout-btn.wcb-active,
button[class*="wcb-"].wcb-apps-job-item.wcb-active {
	color: var( --wcb-primary-text, #1d4ed8 ) !important;
}

/* Rating stars: the blanket strip's forced --wcb-text-primary made an
   unrated (off) star the same brightness as a filled (on) one in BuddyX dark
   mode (measured #f5f5f5 — an unrated applicant read as 5 stars). Restore
   each state's own token. */
button[class*="wcb-"].wcb-rating__star:not(.wcb-rating__star--on) {
	color: var( --wcb-text-secondary, #667085 ) !important;
}

button[class*="wcb-"].wcb-rating__star--on {
	color: var( --wcb-warning, #d97706 ) !important;
}

/* Danger actions keep their danger label tone. */
button[class*="wcb-"].wcb-btn--danger,
button[class*="wcb-"].wcb-bell-clear-all,
button[class*="wcb-"].wcb-cd-withdraw-btn {
	color: var( --wcb-danger-fg, #991b1b ) !important;
}

/* BuddyX paints every input with `input:not(...)x5` (0,5,1) using
 * --bx-radius-form, which outranks the shared field rule. Inside Career Board
 * blocks that token resolves to the plugin's field radius instead, so inputs,
 * selects and textareas share one corner. */
:is([class*="wp-block-wp-career-board"], [class*="wp-block-wcb-"]) {
	--bx-radius-form: var(--wcb-radius-md);
}

/*
 * Content edge: flush with the theme's own. BuddyX wraps the shell in its
 * .container (see the shared rule in frontend-components.css). BuddyX Pro has
 * no wrapper, so the shell mirrors that container (1270px wide, 15px gutter)
 * and lands on the same left edge as a plain page.
 */
#page > .wcb-archive-shell {
	max-width: 1270px !important; /* the theme's own .container width */
	padding-inline: 15px;
}