/**
 * Promoted Charity Jobs Core — candidate and employer dashboard design.
 *
 * Self-contained: defines its own copy of the shared design tokens
 * (:root custom properties), identical to listings.css's and
 * registration.css's own, kept in sync deliberately so the whole site
 * reads as one product regardless of which page someone lands on first.
 */

:root {
	--pcj-ink: #1c2b28;
	--pcj-ink-soft: #4b5d59;
	--pcj-paper: #faf8f4;
	--pcj-surface: #ffffff;
	--pcj-teal: #0e5c52;
	--pcj-teal-deep: #093f38;
	--pcj-teal-mist: #e3efec;
	--pcj-gold: #b8842e;
	--pcj-gold-deep: #8f6620;
	--pcj-gold-mist: #f5ecd9;
	--pcj-line: #e3ddd0;
	--pcj-line-soft: #eee9de;

	--pcj-font-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--pcj-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--pcj-radius: 10px;
	--pcj-radius-sm: 6px;
}

.pcj-dashboard-wrap {
	font-family: var(--pcj-font-sans);
	color: var(--pcj-ink);
}

.pcj-dashboard-header {
	margin-bottom: 28px;
}

.pcj-dashboard-title {
	font-family: var(--pcj-font-serif);
	font-size: 1.875rem;
	font-weight: 600;
	color: var(--pcj-ink);
	margin: 0 0 4px;
}

.pcj-dashboard-subtitle {
	font-size: 0.9375rem;
	color: var(--pcj-ink-soft);
	margin: 0;
}

.pcj-dashboard {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.pcj-dashboard-nav {
	min-width: 220px;
}

.pcj-dashboard-nav ul {
	list-style: none;
	margin: 0;
	padding: 6px;
	display: flex;
	flex-direction: column;
	background: var(--pcj-surface);
	border: 1px solid var(--pcj-line);
	border-radius: var(--pcj-radius);
}

.pcj-dashboard-nav li {
	margin: 0;
}

.pcj-dashboard-nav a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--pcj-radius-sm);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--pcj-ink-soft);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pcj-dashboard-nav a:hover {
	background: var(--pcj-teal-mist);
	color: var(--pcj-teal-deep);
}

.pcj-dashboard-nav-current a,
.pcj-dashboard-nav-current a:hover {
	background: var(--pcj-teal);
	color: #fff;
	font-weight: 600;
}

.pcj-dashboard-content {
	flex: 1;
	min-width: 280px;
	background: var(--pcj-surface);
	border: 1px solid var(--pcj-line);
	border-radius: var(--pcj-radius);
	padding: 28px 32px;
	box-sizing: border-box;
}

.pcj-dashboard-content h2 {
	font-family: var(--pcj-font-serif);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--pcj-ink);
	margin: 0 0 20px;
}

.pcj-dashboard-content h3 {
	font-family: var(--pcj-font-sans);
	font-size: 1rem;
	font-weight: 700;
	color: var(--pcj-ink);
	margin: 28px 0 12px;
}

.pcj-dashboard-content p {
	line-height: 1.6;
	color: var(--pcj-ink-soft);
}

.pcj-dashboard-content a {
	color: var(--pcj-teal-deep);
}

/* ---------------------------------------------------------------------
 * Stat cards (Overview tabs)
 * ------------------------------------------------------------------- */

.pcj-dashboard-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 4px 0 24px;
}

.pcj-dashboard-stat {
	border: 1px solid var(--pcj-line);
	border-radius: var(--pcj-radius);
	padding: 16px 20px;
	min-width: 140px;
	background: var(--pcj-paper);
}

.pcj-dashboard-stat-number {
	display: block;
	font-family: var(--pcj-font-serif);
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--pcj-teal-deep);
	line-height: 1.2;
}

.pcj-dashboard-stat-label {
	display: block;
	font-size: 0.8125rem;
	color: var(--pcj-ink-soft);
	margin-top: 2px;
}

/* ---------------------------------------------------------------------
 * Tables
 * ------------------------------------------------------------------- */

.pcj-dashboard-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.pcj-dashboard-table th,
.pcj-dashboard-table td {
	text-align: left;
	padding: 12px 10px;
	border-bottom: 1px solid var(--pcj-line-soft);
}

.pcj-dashboard-table th {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--pcj-ink-soft);
	text-transform: none;
	border-bottom: 1px solid var(--pcj-line);
}

.pcj-dashboard-table tr:last-child td {
	border-bottom: none;
}

.pcj-thread-unread td {
	font-weight: 600;
}

.pcj-unread-badge {
	color: var(--pcj-teal-deep);
}

.pcj-rejection-reason {
	color: #a13a2e;
	font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------
 * Applications tab: status filter, cover note, inline status form
 * ------------------------------------------------------------------- */

.pcj-status-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.pcj-status-filter li a {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--pcj-line);
	background: var(--pcj-paper);
	color: var(--pcj-ink-soft);
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pcj-status-filter li a:hover {
	background: var(--pcj-teal-mist);
	color: var(--pcj-teal-deep);
}

.pcj-status-filter-current a,
.pcj-status-filter-current a:hover {
	background: var(--pcj-teal);
	border-color: var(--pcj-teal);
	color: #fff;
}

.pcj-application-note {
	margin-top: 6px;
}

.pcj-application-note summary {
	cursor: pointer;
	font-size: 0.8125rem;
	color: var(--pcj-teal-deep);
	font-weight: 600;
}

.pcj-application-note p {
	margin: 6px 0 0;
	font-size: 0.875rem;
	color: var(--pcj-ink);
	white-space: pre-wrap;
}

.pcj-status-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.pcj-status-form select {
	padding: 6px 8px;
	border: 1px solid var(--pcj-line);
	border-radius: var(--pcj-radius-sm);
	font-family: var(--pcj-font-sans);
	font-size: 0.8125rem;
	color: var(--pcj-ink);
}

/* ---------------------------------------------------------------------
 * Buttons and messages
 * ------------------------------------------------------------------- */

.pcj-button {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: var(--pcj-radius-sm);
	border: 1.5px solid var(--pcj-teal);
	background: var(--pcj-teal);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pcj-button:hover {
	background: var(--pcj-teal-deep);
	border-color: var(--pcj-teal-deep);
	color: #fff;
}

.pcj-button-small {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--pcj-radius-sm);
	border: 1.5px solid var(--pcj-teal);
	background: var(--pcj-teal);
	color: #fff;
	font-family: var(--pcj-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pcj-button-small:hover {
	background: var(--pcj-teal-deep);
	border-color: var(--pcj-teal-deep);
}

.pcj-form-success {
	padding: 12px 16px;
	border-radius: var(--pcj-radius-sm);
	background: var(--pcj-teal-mist);
	color: var(--pcj-teal-deep);
	font-weight: 600;
	font-size: 0.9rem;
	margin: 0 0 20px;
}

.pcj-form-error {
	padding: 12px 16px;
	border-radius: var(--pcj-radius-sm);
	background: #fbe9e7;
	color: #a13a2e;
	font-weight: 600;
	font-size: 0.9rem;
	margin: 0 0 20px;
}

.pcj-notice {
	font-family: var(--pcj-font-sans);
	color: var(--pcj-ink-soft);
	font-size: 0.9375rem;
}

/* ---------------------------------------------------------------------
 * Forms inside dashboard tabs (account settings, messaging reply, etc.)
 * ------------------------------------------------------------------- */

.pcj-form .pcj-field {
	margin-bottom: 16px;
}

.pcj-form .pcj-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pcj-ink);
}

.pcj-form .pcj-field input,
.pcj-form .pcj-field textarea,
.pcj-form .pcj-field select {
	width: 100%;
	max-width: 480px;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--pcj-line);
	border-radius: var(--pcj-radius-sm);
	font-family: var(--pcj-font-sans);
	font-size: 0.9375rem;
	color: var(--pcj-ink);
}

.pcj-form .pcj-field input:focus,
.pcj-form .pcj-field textarea:focus,
.pcj-form .pcj-field select:focus {
	outline: none;
	border-color: var(--pcj-teal);
	box-shadow: 0 0 0 3px var(--pcj-teal-mist);
}

.pcj-field-submit button,
.pcj-form button[type="submit"] {
	padding: 11px 22px;
	border-radius: var(--pcj-radius-sm);
	border: 1.5px solid var(--pcj-teal);
	background: var(--pcj-teal);
	color: #fff;
	font-family: var(--pcj-font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pcj-field-submit button:hover,
.pcj-form button[type="submit"]:hover {
	background: var(--pcj-teal-deep);
	border-color: var(--pcj-teal-deep);
}

/* ---------------------------------------------------------------------
 * Message thread view (candidate/employer Messages tab)
 * ------------------------------------------------------------------- */

.pcj-message-thread {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 20px 0;
}

.pcj-message {
	max-width: 70%;
	padding: 10px 14px;
	border-radius: var(--pcj-radius);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.pcj-message-own {
	align-self: flex-end;
	background: var(--pcj-teal);
	color: #fff;
}

.pcj-message-other {
	align-self: flex-start;
	background: var(--pcj-paper);
	border: 1px solid var(--pcj-line);
	color: var(--pcj-ink);
}

.pcj-message-meta {
	font-size: 0.75rem;
	opacity: 0.75;
	margin-top: 4px;
}

.pcj-message-body {
	line-height: 1.5;
	word-wrap: break-word;
}

.pcj-message-reply-form {
	margin-top: 20px;
}

/* ---------------------------------------------------------------------
 * Notifications tab
 * ------------------------------------------------------------------- */

.pcj-notifications-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pcj-notifications-list li {
	padding: 14px 4px;
	border-bottom: 1px solid var(--pcj-line-soft);
	font-size: 0.9375rem;
}

.pcj-notifications-list li:last-child {
	border-bottom: none;
}

.pcj-notification-unread {
	font-weight: 600;
	color: var(--pcj-ink);
}

.pcj-notification-read {
	color: var(--pcj-ink-soft);
	font-weight: 400;
}

.pcj-notification-date {
	color: var(--pcj-ink-soft);
	font-weight: 400;
	font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------- */

@media (max-width: 782px) {
	.pcj-dashboard {
		flex-direction: column;
	}

	.pcj-dashboard-nav {
		width: 100%;
	}

	.pcj-dashboard-nav ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.pcj-dashboard-content {
		padding: 20px;
	}
}