.wcb-my-applications {
	container-type: inline-size;
	font-family: inherit;
}

.wcb-app-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-sm, 6px );
	overflow: hidden;
	background: var( --wcb-on-primary, #ffffff );
	font-size: var( --wcb-text-sm, 0.8125rem );
}

.wcb-app-table thead th {
	/* Logical, not physical: block stylesheets registered through block.json have
	 * no rtlcss-generated `style-rtl.css` sibling, so a physical `left` here would
	 * leave every column header flush-left under ar/he/fa. `start` follows the
	 * inline direction the same way `margin-inline-end` does below. */
	text-align: start;
	font-size: var( --wcb-text-xs, 0.75rem );
	font-weight: var( --wcb-font-semibold, 600 );
	letter-spacing: 0.02em;
	/* No `text-transform: uppercase` here: these headers are gettext-translated
	 * column names, and CSS uppercasing is locale-blind. Turkish/Azeri lowercase
	 * "i" must map to dotted "İ" (not "I"), German "ß" expands to "SS" (changing
	 * length), and Greek loses its tonos. Casing is baked into the translation
	 * instead, so each locale controls its own header capitalisation. */
	color: var( --wcb-text-secondary, #6b7280 );
	background: var( --wcb-bg-hover, #f8fafc );
	padding: var( --wcb-space-sm, 8px ) var( --wcb-space-lg, 16px );
	border-bottom: 1px solid var( --wcb-border, #e2e8f0 );
	white-space: nowrap;
}

.wcb-app-table tbody td {
	padding: var( --wcb-space-md, 12px ) var( --wcb-space-lg, 16px );
	vertical-align: middle;
}

.wcb-app-table tbody tr + tr td {
	border-top: 1px solid var( --wcb-border, #e2e8f0 );
}

.wcb-app-cell--job {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wcb-app-cell--date {
	white-space: nowrap;
	color: var( --wcb-text-secondary, #6b7280 );
}

.wcb-app-list-title {
	min-width: 0;
	font-weight: var( --wcb-font-semibold, 600 );
	font-size: var( --wcb-text-md, 0.9375rem );
	font-family: inherit;
	color: inherit;
	text-decoration: none;
}

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

.wcb-app-list-company {
	font-size: var( --wcb-text-sm, 0.8125rem );
	color: var( --wcb-text-secondary, #6b7280 );
}

/* Self-contained status badge - mirrors the canonical `.wcb-status-badge`
 * in candidate-dashboard so this block renders the same pill when loaded
 * on its own (per-block style loading means that stylesheet is absent). */
.wcb-status-badge {
	font-size: var( --wcb-text-xs, 0.75rem );
	font-weight: var( --wcb-font-semibold, 600 );
	padding: 2px var( --wcb-space-sm, 8px );
	border-radius: var( --wcb-radius-full, 999px );
	background: var( --wcb-bg-hover, #f1f5f9 );
	color: var( --wcb-text-secondary, #6b7280 );
	white-space: nowrap;
	flex-shrink: 0;
}

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

.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, #dcfce7 );
	color: var( --wcb-success, #166534 );
}

.wcb-status-badge[data-status="rejected"] {
	background: var( --wcb-danger-bg, #fee2e2 );
	color: var( --wcb-danger-fg, #991b1b );
}

.wcb-status-badge[data-status="closed"],
.wcb-status-badge[data-status="withdrawn"],
.wcb-status-badge[data-status="job_removed"] {
	background: var( --wcb-bg-hover, #f1f5f9 );
	color: var( --wcb-text-secondary, #6b7280 );
}

.wcb-app-list-date {
	font-size: var( --wcb-text-sm, 0.8125rem );
	color: var( --wcb-text-secondary, #6b7280 );
	white-space: nowrap;
}

.wcb-bp-empty {
	font-size: var( --wcb-text-base, 0.875rem );
	color: var( --wcb-text-secondary, #6b7280 );
	text-align: center;
	padding: var( --wcb-space-3xl, 32px ) 0;
}

/* On narrow containers, collapse the table into a card list using
 * the data-label attribute as an inline label. */
@container (max-width: 480px) {
	.wcb-app-table thead {
		display: none;
	}

	.wcb-app-table,
	.wcb-app-table tbody,
	.wcb-app-table tr,
	.wcb-app-cell {
		display: block;
		width: 100%;
	}

	.wcb-app-table tbody tr {
		padding: var( --wcb-space-md, 12px ) var( --wcb-space-lg, 16px );
	}

	.wcb-app-table tbody tr + tr {
		border-top: 1px solid var( --wcb-border, #e2e8f0 );
	}

	.wcb-app-table tbody td,
	.wcb-app-table tbody tr + tr td {
		padding: 4px 0;
		border-top: none;
	}

	/* The label separator (":") is baked into `data-label` by render.php so it
	 * passes through gettext - CSS is never scanned by make-pot, so a literal
	 * ": " here could never be localized (French needs a narrow no-break space
	 * before the colon, CJK needs the fullwidth colon). Do not reintroduce it.
	 * The gap after the label is drawn here instead of as a trailing space in
	 * the string, so it stays correct under RTL. */
	.wcb-app-cell::before {
		content: attr( data-label );
		font-weight: var( --wcb-font-semibold, 600 );
		color: var( --wcb-text-secondary, #6b7280 );
		margin-inline-end: 6px;
		font-size: var( --wcb-text-xs, 0.75rem );
		/* data-label is the gettext-translated, sprintf'd column label and is the
		 * only column identifier shown in the collapsed card layout. No
		 * `text-transform: uppercase`: locale-blind casing would corrupt it the
		 * same way it would the thead th above (Turkish dotted-I, German ß -> SS,
		 * Greek tonos). The translation supplies its own casing. */
	}

	.wcb-app-cell--job::before {
		display: none;
	}
}