/**
 * Candidate Dashboard — Per-view styles.
 *
 * Per-view rules: application rows, status badges, bookmark rows,
 * resume cards, overview app/saved-job rows, job alerts, profile form,
 * withdraw button, settings rows, and all @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
 */

/* ── Application rows ─────────────────────────────────────────────────────── */
.wcb-cd-app-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcb-space-md);
	padding: var(--wcb-space-md) var(--wcb-space-xl);
	border-bottom: 1px solid var(--wcb-surface, #f1f5f9);
	transition: background var(--wcb-transition-fast);
}

.wcb-cd-app-row:last-child {
	border-bottom: none;
}

.wcb-cd-app-row:hover {
	background: var( --wcb-bg-subtle );
}

.wcb-cd-app-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xs);
}

.wcb-cd-app-title {
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-text-primary);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wcb-cd-app-title a {
	color: inherit;
	text-decoration: none;
}

.wcb-cd-app-title a:hover {
	color: var( --wcb-blue );
	text-decoration: underline;
}

.wcb-cd-app-company {
	font-size: var(--wcb-text-xs);
	color: var(--wcb-text-secondary);
	font-weight: var(--wcb-font-medium);
}

.wcb-cd-app-date {
	font-size: var(--wcb-text-xs);
	color: var(--wcb-text-muted);
}

/* ── Status badge ─────────────────────────────────────────────────────────── */
.wcb-cd-status-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: var(--wcb-space-xs) var(--wcb-space-lg);
	border-radius: var(--wcb-radius-full);
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-semibold);
	text-transform: capitalize;
	background: var(--wcb-bg-hover);
	color: var(--wcb-text-secondary);
}

.wcb-cd-status-badge[data-status="submitted"] {
	background: var(--wcb-info-bg);
	color: var(--wcb-info);
}

.wcb-cd-status-badge[data-status="shortlisted"] {
	background: var(--wcb-success-bg);
	color: var(--wcb-success);
}

.wcb-cd-status-badge[data-status="hired"] {
	background: var(--wcb-success-bg, #d1fae5);
	color: var(--wcb-success-fg, #065f46);
}

.wcb-cd-status-badge[data-status="rejected"] {
	background: var(--wcb-danger-bg);
	color: var(--wcb-danger-fg);
}

.wcb-cd-status-badge[data-status="job_removed"],
.wcb-cd-status-badge[data-status="withdrawn"] {
	background: var(--wcb-muted-bg, #f1f5f9);
	color: var(--wcb-muted, #64748b);
}

/* ── Bookmark rows ────────────────────────────────────────────────────────── */
.wcb-cd-bookmark-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcb-space-md);
	padding: var(--wcb-space-md) var(--wcb-space-xl);
	border-bottom: 1px solid var(--wcb-surface, #f1f5f9);
	transition: background var(--wcb-transition-fast);
}

.wcb-cd-bookmark-row:last-child {
	border-bottom: none;
}

.wcb-cd-bookmark-row:hover {
	background: var( --wcb-bg-subtle );
}

.wcb-cd-bookmark-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xs);
}

.wcb-cd-bookmark-title {
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-text-primary);
	margin: 0;
}

.wcb-cd-bookmark-title a {
	color: inherit;
	text-decoration: none;
}

.wcb-cd-bookmark-title a:hover {
	color: var( --wcb-blue );
	text-decoration: underline;
}

.wcb-cd-bookmark-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wcb-space-xs);
	font-size: var(--wcb-text-sm);
	color: var(--wcb-text-secondary);
}

.wcb-cd-bookmark-meta-sep {
	color: var( --wcb-text-muted );
}

.wcb-cd-bookmark-actions {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	flex-shrink: 0;
}

/* ── Resume cards (kept from original) ───────────────────────────────────── */
.wcb-resumes-header {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-md);
	flex-wrap: wrap;
}

/* Inner wrapper around the "+ New Resume" + "Upload CV" buttons and the
 * "N/M resumes" cap label. Without an explicit class the parent was a bare
 * <div> with `display: block` - the buttons + count then wrapped on inline
 * width with the count colliding next to the Upload CV pill at 390px. */
.wcb-resumes-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wcb-space-sm);
}

.wcb-new-resume-form {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
}

.wcb-new-resume-form .wcb-field {
	width: 220px;
}

.wcb-upload-label {
	cursor: pointer;
}

.wcb-resume-cap-info {
	font-size: var(--wcb-text-sm);
	color: var( --wcb-text-muted );
}

@media (max-width: 640px) {
	/* On mobile split the two action buttons 50/50 across the row and
	 * drop the cap label onto its own row underneath. Reads as one tidy
	 * pair of equal-weight CTAs instead of staggered inline-flow chaos. */
	.wcb-resumes-actions .wcb-cbtn,
	.wcb-resumes-actions .wcb-upload-label {
		flex: 1 1 calc(50% - var(--wcb-space-sm));
		justify-content: center;
		min-width: 0;
	}

	.wcb-resumes-actions .wcb-resume-cap-info {
		flex: 1 1 100%;
	}
}

/* Resume row inside the `.wcb-panel` outer card. Drop the per-row background
 * + bottom border so we don't render a card inside a card (the visible
 * "double border" the audit flagged). Hairline divider between rows lives
 * on the row itself; the panel supplies the outer container chrome. */
.wcb-resume-card {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-md);
	padding: var(--wcb-space-md) var(--wcb-space-xl);
	background: transparent;
	border-bottom: 1px solid var(--wcb-border, #e2e8f0);
	transition: background var(--wcb-transition-fast);
}

.wcb-resume-card:last-child {
	border-bottom: none;
}

.wcb-resume-card:hover {
	background: var( --wcb-bg-subtle );
}

.wcb-resume-card-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xs);
}

.wcb-resume-card-title {
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wcb-resume-card-date {
	font-size: var(--wcb-text-xs);
	color: var( --wcb-text-muted );
}

.wcb-resume-card-actions {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	flex-shrink: 0;
	flex-wrap: wrap;
}

.wcb-resume-reupload {
	position: relative;
	cursor: pointer;
}

.wcb-resume-reupload-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.wcb-resume-card-confirm {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	flex-shrink: 0;
}

.wcb-resume-confirm-msg {
	font-size: var(--wcb-text-sm);
	color: var( --wcb-text-secondary );
	white-space: nowrap;
}

/* ── Overview: Application / saved-job rows ──────────────────────────────── */
.wcb-overview-app-row {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-lg);
	padding: var(--wcb-space-md) var(--wcb-space-xl);
	border-bottom: 1px solid var(--wcb-surface, #f1f5f9);
}

.wcb-overview-app-row:last-child {
	border-bottom: none;
}

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

.wcb-app-name {
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
}

.wcb-app-name:hover {
	text-decoration: underline;
}

.wcb-app-job {
	font-size: var(--wcb-text-xs);
	color: var( --wcb-text-muted );
}

/* ── Status badge (overview panels) ─────────────────────────────────────── */
.wcb-status-badge {
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-semibold);
	padding: 2px var(--wcb-space-sm);
	border-radius: var(--wcb-radius-full);
	background: var(--wcb-bg-hover);
	color: var(--wcb-text-secondary);
	text-transform: capitalize;
	white-space: nowrap;
	flex-shrink: 0;
}

.wcb-status-badge[data-status="submitted"]   { background: var(--wcb-info-bg); color: var(--wcb-info); }
.wcb-status-badge[data-status="reviewing"]   { background: var(--wcb-warning-bg, #fef9c3); color: var(--wcb-warning-fg, #854d0e); }
.wcb-status-badge[data-status="shortlisted"] { background: #ede9fe; color: #5b21b6; }
.wcb-status-badge[data-status="hired"],
.wcb-status-badge[data-status="accepted"]    { background: var(--wcb-success-bg); color: var(--wcb-success); }
.wcb-status-badge[data-status="rejected"]    { background: var(--wcb-danger-bg); color: var(--wcb-danger-fg); }

/* ── Job Alerts tab ────────────────────────────────────────────────────── */
.wcb-alert-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcb-space-lg);
	padding: var(--wcb-space-lg) var(--wcb-space-xl);
	border-bottom: 1px solid var(--wp--preset--color--wcb-surface);
}

.wcb-alert-row:last-child {
	border-bottom: none;
}

.wcb-alert-main {
	flex: 1;
	min-width: 0;
}

.wcb-alert-title {
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-semibold);
	color: var(--wcb-contrast, #111827);
	margin: 0 0 var(--wcb-space-xs);
}

.wcb-alert-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wcb-space-xs);
}

.wcb-alert-pill {
	display: inline-block;
	padding: 2px var(--wcb-space-sm);
	font-size: var(--wcb-text-xs);
	background: var(--wcb-surface, #f1f5f9);
	color: var(--wcb-contrast, #374151);
	border-radius: var(--wcb-radius-full);
}

.wcb-alert-actions {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	flex-shrink: 0;
}

.wcb-alert-freq {
	padding: var(--wcb-space-xs) var(--wcb-space-sm);
	border: 1px solid var(--wcb-border, #e2e8f0);
	border-radius: var(--wcb-radius-sm);
	font-size: var(--wcb-text-sm);
	font-family: inherit;
	background: var(--wcb-base, #fff);
	cursor: pointer;
}

.wcb-alert-freq:focus {
	outline: 2px solid var(--wcb-primary, var(--wp--preset--color--wcb-primary));
	outline-offset: 2px;
}

/* ── Profile form ────────────────────────────────────────────────────────── */
.wcb-form-field {
	margin-bottom: var(--wcb-space-lg);
}

.wcb-form-label {
	display: block;
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-medium);
	color: var(--wcb-text-primary);
	margin-bottom: var(--wcb-space-xs);
}

/* Form-input baseline. Used by the Profile and Settings panel inputs that
 * predate the shared `.wcb-field-input` primitive in
 * `assets/css/frontend-components.css`. Keeping the rules local to the
 * candidate-dashboard scope (vs renaming every markup site) avoids
 * touching seven other call-sites and Pro's mirroring shortcode renderers
 * during a UX polish pass. Match `.wcb-field-input` exactly so a future
 * consolidation can fold the two classes together without visual drift. */
.wcb-input {
	width: 100%;
	min-height: 44px;
	padding: 0.625rem 0.875rem;
	border: 1.5px solid var(--wcb-border, #cbd5e1);
	border-radius: var(--wcb-radius-md, 0.5rem);
	font-size: var(--wcb-text-md);
	font-family: inherit;
	color: var(--wcb-contrast, #0f172a);
	background: var(--wcb-base, #ffffff);
	transition: border-color var(--wcb-transition-fast, 150ms ease), box-shadow var(--wcb-transition-fast, 150ms ease);
	box-sizing: border-box;
}

.wcb-input:focus {
	outline: 2px solid transparent;
	border-color: var(--wcb-primary, #2563eb);
	box-shadow: var(--wcb-shadow-focus, 0 0 0 3px rgba(37, 99, 235, 0.15));
}

.wcb-input[readonly] {
	background: var(--wcb-surface, #f8fafc);
	color: var(--wcb-text-secondary, #475569);
	cursor: default;
}

.wcb-form-actions {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-md);
	margin-top: var(--wcb-space-lg);
}

.wcb-save-confirm {
	display: none;
	font-size: var(--wcb-text-sm);
	font-weight: var(--wcb-font-medium);
	color: var(--wcb-success);
}

.wcb-save-confirm.wcb-shown {
	display: inline;
}

/* ── Withdraw button ─────────────────────────────────────────────────────── */
/* Hidden until the candidate has wcb_withdraw_application; the wcb-shown
   class is toggled by data-wp-class--wcb-shown="state.allowWithdraw" in
   render.php. */
.wcb-cd-withdraw-btn {
	display: none;
	background: transparent;
	color: var(--wcb-danger);
	border: 1px solid var(--wcb-danger-border, #fca5a5);
	border-radius: var(--wcb-radius);
	padding: var(--wcb-space-xs) var(--wcb-space-md);
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-medium);
	cursor: pointer;
	transition: all var(--wcb-transition-fast);
}

.wcb-cd-withdraw-btn.wcb-shown {
	display: inline-flex;
	align-items: center;
}

.wcb-cd-withdraw-btn:hover,
.wcb-cd-withdraw-btn:focus-visible {
	background: var(--wcb-danger-bg-soft);
	color: var(--wcb-danger-fg, #b91c1c);
	border-color: var(--wcb-danger);
}

/* `.wcb-settings-row*` rules live globally in
 * `assets/css/frontend-components.css` (shared with employer-dashboard).
 * The narrow-screen stack-on-small override below is the only candidate-
 * dashboard-specific tweak — but since the global file also ships the
 * same @media block, this stays as a documented no-op for now and can
 * be removed in a future cleanup pass. */

/* ── Responsive: stack rows and actions on narrow screens ────────────────── */
@media (max-width: 640px) {
	/* My Applications — stack info above status badge */
	.wcb-cd-app-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wcb-space-sm);
	}

	.wcb-cd-status-badge {
		align-self: flex-start;
	}

	/* Saved Jobs — stack info above actions */
	.wcb-cd-bookmark-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wcb-space-sm);
	}

	.wcb-cd-bookmark-actions {
		width: 100%;
	}

	/* My Resumes — stack info above action buttons */
	.wcb-resume-card {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wcb-space-sm);
	}

	.wcb-resume-card-actions,
	.wcb-resume-card-confirm {
		flex-shrink: 1;
	}

	/* Job Alerts — stack title/meta above frequency + delete actions */
	.wcb-alert-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.wcb-alert-actions {
		width: 100%;
		justify-content: flex-end;
	}
}

@media (max-width: 480px) {
	.wcb-new-resume-form {
		flex-wrap: wrap;
	}

	.wcb-new-resume-form .wcb-field {
		width: 100%;
	}

	/* `.wcb-settings-row` 1-column stack handled globally in
	 * `assets/css/frontend-components.css` at the 640px breakpoint. */
}