/*
 * White-label theming tokens. Every module's dashboard panel loads this
 * stylesheet as a dependency (it's the one shared file every one of the 7
 * modules' own CSS already sits alongside), so these custom properties —
 * defined once, here — cascade down into every module's rendered markup
 * too, not just Core's own panels. An operator rebranding the platform
 * only ever needs to override these on :root (e.g. via a small
 * child-theme stylesheet or wp_add_inline_style()), not hunt down and
 * edit hex codes across 7 separate module stylesheets.
 *
 * Deliberately done now, while there are 7 module stylesheets to retrofit
 * to these tokens rather than a future 15 — see check_class_references.py's
 * sibling static checks for the same "fix the convention while the
 * surface area is still small" reasoning applied to code instead of CSS.
 *
 * Semantic color tokens (danger/warning/info/success) intentionally are
 * NOT meant to be rebranded away from red/amber/blue/green — those carry
 * meaning (error, caution, informational, success) independent of brand,
 * the same reasoning behind the WCAG-verified admin status pills. Only
 * --careernexus-primary* is really a "brand color" in the white-label
 * sense; the rest are exposed as tokens mainly for internal consistency,
 * not because operators are expected to reskin them.
 */
:root {
	--careernexus-primary: #2271b1;
	--careernexus-primary-text: #fff;
	--careernexus-radius: 6px;
	--careernexus-radius-lg: 8px;

	--careernexus-border: #e2e2e2;
	--careernexus-border-subtle: #eee;
	--careernexus-text-muted: #555;

	--careernexus-danger: #a02020;
	--careernexus-danger-bg: #fbeaea;
	--careernexus-warning: #6b5300;
	--careernexus-warning-bg: #fff5e0;
	--careernexus-info: #0a3a5c;
	--careernexus-info-bg: #eef3fb;
	--careernexus-success: #2a7a2a;
	--careernexus-success-bg: #eaf5ea;
}

.careernexus-dashboard {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
	max-width: 1100px;
	margin: 0 auto;
	/*
	 * Many themes give their content area zero side padding on narrow
	 * viewports (full-bleed on mobile is a common theme default) — without
	 * this, panels would butt straight up against the screen edge on a
	 * phone. minmax(280px, 1fr) above already collapses to one column
	 * before this padding would ever compete with it for space.
	 */
	padding: 0 1rem;
	box-sizing: border-box;
}

.careernexus-panel {
	border: 1px solid var(--careernexus-border);
	border-radius: var(--careernexus-radius-lg);
	padding: 1.25rem;
	background: #fff;
	/*
	 * Grid items default to min-width:auto, which lets a panel's own
	 * intrinsic content width (a long unbroken string — a URL, a filename)
	 * force it wider than its grid track instead of wrapping, blowing out
	 * the single-column mobile layout horizontally. min-width:0 lets the
	 * panel actually shrink to the track's width as intended;
	 * overflow-wrap catches the long-string case that would otherwise
	 * still overflow once it can no longer expand the column to fit.
	 */
	min-width: 0;
	overflow-wrap: break-word;
}

.careernexus-panel-title {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 600;
}

.careernexus-login-required,
.careernexus-no-access {
	text-align: center;
	padding: 2rem;
}

.careernexus-button {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border-radius: var(--careernexus-radius);
	background: var(--careernexus-primary);
	color: var(--careernexus-primary-text);
	text-decoration: none;
	border: none;
	cursor: pointer;
	font: inherit;
}

.careernexus-danger-button {
	background: var(--careernexus-danger);
}

.careernexus-danger-zone {
	margin-top: 1rem;
}

.careernexus-danger-zone summary {
	cursor: pointer;
	color: var(--careernexus-danger);
}

.careernexus-danger-zone form {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 320px;
}

.careernexus-file-list {
	margin: 0;
	padding-left: 1.1rem;
}

/*
 * Marks a form field as failing client-side validation (e.g. a job
 * description that's too short to be real) — checked before the request
 * ever fires, not just relying on the server's rejection after a round
 * trip. Paired with aria-invalid="true" on the field itself so assistive
 * tech announces the invalid state, not just the color.
 */
.careernexus-field-invalid {
	outline: 2px solid #d63638;
	outline-offset: 1px;
}

.careernexus-field-error {
	color: #d63638;
	font-size: 0.85em;
	margin: 0.25rem 0 0.75rem;
}

/*
 * Distinct "served from cache" disclosure — previously folded into the
 * generic warnings list as plain text, indistinguishable from a real
 * shape-validation warning. Shared across every module that opts into
 * identity-flavored AI response caching (cache_scope=>'user'), so a user
 * always sees it in the same visual language.
 */
.careernexus-cache-badge {
	background: var(--careernexus-info-bg);
	color: var(--careernexus-info);
	border-radius: var(--careernexus-radius);
	padding: 8px 12px;
	font-size: 0.9em;
	margin-bottom: 12px;
}

/* Search/date-range filter bar above every module's history list. */
.careernexus-history-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-size: 0.85em;
}

.careernexus-history-filters input[type="search"] {
	flex: 1 1 160px;
}

/*
 * Every module's dashboard panel loads this stylesheet as a dependency,
 * so a single visible focus-visible treatment here covers every module's
 * buttons/inputs/selects/links/textareas at once — previously there was
 * no :focus rule anywhere in the plugin's CSS, so keyboard-only users
 * navigating the front-end dashboard got whatever (if anything) the host
 * theme happened to supply.
 */
.careernexus-dashboard button:focus-visible,
.careernexus-dashboard a:focus-visible,
.careernexus-dashboard input:focus-visible,
.careernexus-dashboard select:focus-visible,
.careernexus-dashboard textarea:focus-visible,
.careernexus-panel button:focus-visible,
.careernexus-panel a:focus-visible,
.careernexus-panel input:focus-visible,
.careernexus-panel select:focus-visible,
.careernexus-panel textarea:focus-visible {
	outline: 2px solid var(--careernexus-primary);
	outline-offset: 2px;
}