/**
 * Candidate Dashboard — Widget styles.
 *
 * Notification bell, overview stats cards, first-time welcome card,
 * GDPR privacy panel, and the @media rules that target these
 * selectors. Co-locating responsive overrides with their base rules
 * keeps the cascade order correct independent of block.json file
 * declaration order.
 *
 * Extracted from style.css (was 1356 LOC) per the upscale stabilization
 * plan (plan/upscale-stabilization-plan-2026-05-07.md F4 / Task 5.2).
 * Tokens are inherited from frontend-tokens.css via cascade — no
 * duplication.
 *
 * @package WP_Career_Board
 * @since   1.2.2
 */

/* Notifications tab styles live in assets/css/wcb-ui.css (shared). */

/* ── Welcome card — first-time candidate onboarding (C-4) ─────────────────── */

.wcb-welcome-card {
	display: none;
	background: linear-gradient( 135deg, var( --wcb-primary-soft, #eef2ff ) 0%, var( --wcb-surface, #ffffff ) 100% );
	/* The accent is for focus, selection and buttons, not a card edge. */
	border: 1px solid var( --wcb-border );
	border-radius: var( --wcb-radius-xl );
	padding: var( --wcb-space-lg, 16px );
	margin-bottom: var( --wcb-space-lg, 16px );
}

.wcb-welcome-card.wcb-shown {
	display: block;
}

.wcb-welcome-card__header {
	margin-bottom: var( --wcb-space-md, 12px );
}

.wcb-welcome-card__title {
	font-size: var(--wcb-text-2xl);
	font-weight: var(--wcb-font-semibold);
	margin: 0 0 var(--wcb-space-xs) 0;
	color: var( --wcb-contrast );
}

.wcb-welcome-card__subtitle {
	margin: 0;
	color: var( --wcb-muted );
	font-size: var(--wcb-text-md);
}

.wcb-welcome-card__steps {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: var( --wcb-space-md, 16px );
}

/*
 * Steps 1 = <a>, steps 2/3 = <button>. The extra specificity, appearance reset,
 * and !important stop the active theme's default button styling from overriding
 * the step surface in either mode. BuddyX paints buttons with the theme primary
 * using `!important`, so the override must match it - otherwise steps 2/3 render
 * as solid coral with low-contrast text.
 */
.wcb-welcome-card__steps .wcb-welcome-step {
	display: flex;
	align-items: flex-start;
	gap: var(--wcb-space-md);
	padding: var( --wcb-space-md, 16px );
	background: var(--wcb-base) !important;
	border: 1px solid var( --wcb-border ) !important;
	border-radius: var( --wcb-radius-md, 8px );
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--wcb-transition-snappy), box-shadow var(--wcb-transition-snappy), transform var(--wcb-transition-snappy);
	text-align: left;
	font: inherit;
}

.wcb-welcome-step:hover,
.wcb-welcome-step:focus-visible {
	border-color: var( --wcb-primary, #4f46e5 );
	box-shadow: 0 1px 4px rgba( 79, 70, 229, 0.15 );
	box-shadow: 0 1px 4px color-mix(in srgb, var(--wcb-primary) 15%, transparent);
	transform: translateY( -1px );
}

.wcb-welcome-step:focus-visible {
	outline: 2px solid var( --wcb-primary, #4f46e5 );
	outline-offset: 2px;
}

.wcb-welcome-step__num {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wcb-primary-strong);
	color: var(--wcb-on-primary);
	font-weight: var(--wcb-font-semibold);
	font-size: var(--wcb-text-md);
}

.wcb-welcome-step__body {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xs);
	flex: 1 1 auto;
	min-width: 0;
}

.wcb-welcome-step__title {
	font-weight: var(--wcb-font-semibold);
	color: var( --wcb-contrast );
}

.wcb-welcome-step__desc {
	font-size: var(--wcb-text-base);
	color: var( --wcb-muted );
	line-height: 1.4;
}

@media ( max-width: 640px ) {
	.wcb-welcome-card { padding: var( --wcb-space-md, 16px ); }
	.wcb-welcome-card__title { font-size: var(--wcb-text-xl); }
	.wcb-welcome-card__steps { grid-template-columns: minmax(0, 1fr); }
}

@media ( prefers-reduced-motion: reduce ) {
	.wcb-welcome-step { transition: none !important; }
	.wcb-welcome-step:hover,
	.wcb-welcome-step:focus-visible { transform: none !important; }
}

/* ── Privacy panel — GDPR self-service controls (A-11) ────────────────────── */

.wcb-privacy-panel { margin-top: var( --wcb-space-md, 16px ); }

.wcb-privacy-desc {
	color: var( --wcb-muted );
	font-size: var(--wcb-text-base);
	line-height: 1.5;
	margin: 0 0 var( --wcb-space-md, 16px ) 0;
}

.wcb-privacy-note {
	color: var(--wcb-danger-fg, #991b1b);
	font-size: var(--wcb-text-sm);
	margin: var( --wcb-space-sm, 8px ) 0 0 0;
	display: none;
}

.wcb-privacy-note.wcb-shown { display: block; }