/* Hexloom PHP Version Scan: admin screen. Uses the wp-admin palette and Dashicons only. */

.hxpc {
	--hxpc-accent: var(--wp-admin-theme-color, #2271b1);
	--hxpc-border: #c3c4c7;
	--hxpc-soft: #dcdcde;
	--hxpc-text: #1d2327;
	--hxpc-muted: #50575e;
	--hxpc-subtle: #f6f7f7;
	--hxpc-red-bg: #fcf0f1;
	--hxpc-red-fg: #8a2424;
	--hxpc-red-line: #d63638;
	--hxpc-amber-bg: #fcf9e8;
	--hxpc-amber-fg: #5c3d00;
	--hxpc-amber-line: #dba617;
	--hxpc-green-bg: #edfaef;
	--hxpc-green-fg: #0a4b1e;
	--hxpc-green-line: #00a32a;
	--hxpc-gray-bg: #f0f0f1;
	--hxpc-gray-fg: #3c434a;
	--hxpc-cols: minmax(0, 2.6fr) 84px 84px minmax(0, 2.2fr) 120px;
	--hxpc-act: 96px;
	max-width: 1100px;
	color: var(--hxpc-text);
}

.hxpc *,
.hxpc *::before,
.hxpc *::after {
	box-sizing: border-box;
}

/* Cards */
.hxpc-card {
	background: #fff;
	border: 1px solid var(--hxpc-border);
	border-radius: 4px;
	padding: 16px 24px 20px;
	margin: 16px 0;
}

.hxpc-card h2 {
	margin: 0 0 8px;
	padding: 0;
	font-size: 16px;
	line-height: 1.4;
}

.hxpc-card p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
}

.hxpc-card h2:focus-visible {
	outline: 2px solid var(--hxpc-accent);
	outline-offset: 2px;
}

.hxpc-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 32px;
	margin: 16px 0;
}

.hxpc-upto {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.hxpc-upto legend {
	float: left;
	padding: 0;
	margin: 0 8px 0 0;
	font-size: 14px;
}

.hxpc-seg {
	position: relative;
	display: inline-flex;
}

.hxpc-seg input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.hxpc-seg label {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: 32px;
	padding: 0 14px;
	margin-left: -1px;
	border: 1px solid var(--hxpc-accent);
	background: #fff;
	color: var(--hxpc-accent);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.hxpc-seg label:first-of-type {
	margin-left: 0;
	border-radius: 3px 0 0 3px;
}

.hxpc-seg label:last-of-type {
	border-radius: 0 3px 3px 0;
}

.hxpc-seg input:checked + label {
	background: var(--hxpc-accent);
	color: #fff;
}

.hxpc-seg input:checked + label::before {
	content: "\f147";
	font: 16px/1 dashicons;
	margin-left: -4px;
}

.hxpc-seg input:focus-visible + label {
	position: relative;
	z-index: 1;
	outline: 2px solid var(--hxpc-text);
	outline-offset: 2px;
}

.hxpc-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
}

.hxpc-check input {
	margin: 0;
}

.hxpc-actions {
	margin: 0 0 12px;
}

.hxpc-card .hxpc-limits {
	max-width: 72ch;
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--hxpc-muted);
}

/* Messages */
.hxpc-messages .notice {
	margin: 16px 0;
}

.hxpc-notice-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Progress */
.hxpc-bar {
	height: 12px;
	margin: 12px 0;
	border: 1px solid var(--hxpc-soft);
	border-radius: 6px;
	background: var(--hxpc-gray-bg);
	overflow: hidden;
}

.hxpc-bar-fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--hxpc-accent);
	transition: width 0.3s ease;
}

.hxpc-card .hxpc-progress-text {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.hxpc-card .hxpc-progress-note {
	min-height: 1.5em;
	color: var(--hxpc-red-fg);
}

/* Results */
.hxpc-card .hxpc-summary {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
}

.hxpc-card .hxpc-when {
	margin: 0 0 12px;
	font-size: 12px;
	color: var(--hxpc-muted);
}

.hxpc-review {
	margin: 12px 0 !important;
}

.hxpc-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 12px 0;
}

.hxpc-reset {
	color: var(--hxpc-red-fg);
}

.hxpc-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--hxpc-act);
	border: 1px solid var(--hxpc-border);
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
	background: var(--hxpc-gray-bg);
	font-size: 12px;
	font-weight: 600;
	color: var(--hxpc-gray-fg);
}

.hxpc-head .hxpc-cols {
	padding: 8px 12px 8px 12px;
}

.hxpc-cols {
	display: grid;
	grid-template-columns: var(--hxpc-cols);
	gap: 12px;
	align-items: start;
}

.hxpc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--hxpc-border);
	border-radius: 0 0 4px 4px;
}

.hxpc-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--hxpc-act);
	align-items: start;
	margin: 0;
	border-top: 1px solid var(--hxpc-soft);
	background: #fff;
}

.hxpc-row:first-child {
	border-top: 0;
}

.hxpc-row:nth-child(even) {
	background: var(--hxpc-subtle);
}

.hxpc-main {
	min-width: 0;
}

.hxpc-sum {
	padding: 12px;
	font-size: 13px;
	line-height: 1.5;
	list-style: none;
}

summary.hxpc-sum {
	cursor: pointer;
}

summary.hxpc-sum::-webkit-details-marker {
	display: none;
}

summary.hxpc-sum:focus-visible,
.hxpc-sum:focus-visible {
	outline: 2px solid var(--hxpc-accent);
	outline-offset: -2px;
}

summary.hxpc-sum:hover {
	background: rgba(0, 0, 0, 0.025);
}

.hxpc-act {
	padding: 10px 12px 10px 0;
	text-align: right;
}

.hxpc-c {
	min-width: 0;
	overflow-wrap: anywhere;
}

.hxpc-c-name {
	display: flex;
	align-items: flex-start;
	gap: 2px;
}

.hxpc-c-name .dashicons,
.hxpc-spacer {
	flex: none;
	width: 20px;
	height: 20px;
	font-size: 20px;
	color: var(--hxpc-muted);
	transition: transform 0.15s ease;
}

details[open] > summary .dashicons-arrow-right-alt2 {
	transform: rotate(90deg);
}

.hxpc-name {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hxpc-name-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.hxpc-name strong {
	font-size: 14px;
}

.hxpc-tag {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 0 6px;
	border: 1px solid var(--hxpc-border);
	border-radius: 3px;
	background: #fff;
	color: var(--hxpc-muted);
	font-size: 12px;
	line-height: 20px;
}

.hxpc-tag .dashicons {
	width: 14px;
	height: 14px;
	font-size: 14px;
}

.hxpc-tag-update {
	border-color: #72aee6;
	background: #f0f6fc;
	color: #0a4b78;
}

.hxpc-update-note,
.hxpc-skip-note {
	font-size: 12px;
	color: var(--hxpc-muted);
}

.hxpc-chip {
	display: inline-flex;
	align-items: flex-start;
	gap: 4px;
	padding: 3px 8px 3px 6px;
	border: 1px solid;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.hxpc-chip .dashicons {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	font-size: 16px;
}

.hxpc-chip-breaks {
	background: var(--hxpc-red-bg);
	border-color: #f0b8b9;
	color: var(--hxpc-red-fg);
}

.hxpc-chip-deprecated {
	background: var(--hxpc-amber-bg);
	border-color: #ecd68c;
	color: var(--hxpc-amber-fg);
}

.hxpc-chip-clean {
	background: var(--hxpc-green-bg);
	border-color: #a7dcb4;
	color: var(--hxpc-green-fg);
}

.hxpc-chip-unscanned,
.hxpc-chip-partial,
.hxpc-chip-empty {
	background: var(--hxpc-gray-bg);
	border-color: var(--hxpc-border);
	color: var(--hxpc-gray-fg);
}

.hxpc-counts {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hxpc-n-removed {
	font-weight: 600;
	color: var(--hxpc-red-fg);
}

.hxpc-n-deprecated {
	color: var(--hxpc-amber-fg);
}

.hxpc-muted {
	color: var(--hxpc-muted);
}

/* Expanded row */
.hxpc-detail {
	padding: 4px 12px 16px 34px;
	border-top: 1px dashed var(--hxpc-soft);
	font-size: 13px;
	line-height: 1.5;
}

.hxpc-detail p {
	margin: 8px 0 0;
}

.hxpc-file h4,
.hxpc-skipped h4 {
	margin: 16px 0 4px;
	font-size: 13px;
}

.hxpc-file h4 code {
	display: inline-block;
	max-width: 100%;
	padding: 2px 6px;
	background: var(--hxpc-gray-bg);
	font-size: 12px;
	overflow-wrap: anywhere;
}

.hxpc-detail .hxpc-file-note {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--hxpc-muted);
}

.hxpc-findings {
	display: grid;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.hxpc-finding {
	margin: 0;
	padding: 8px 12px 10px;
	border: 1px solid var(--hxpc-soft);
	border-left: 3px solid var(--hxpc-amber-line);
	border-radius: 3px;
	background: #fff;
}

.hxpc-finding-removed {
	border-left-color: var(--hxpc-red-line);
}

.hxpc-finding-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.hxpc-line {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.hxpc-badge {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 0 6px;
	border: 1px solid var(--hxpc-soft);
	border-radius: 3px;
	background: var(--hxpc-gray-bg);
	color: var(--hxpc-gray-fg);
	font-size: 12px;
	line-height: 20px;
}

.hxpc-badge .dashicons {
	width: 14px;
	height: 14px;
	font-size: 14px;
}

.hxpc-badge-removed {
	background: var(--hxpc-red-bg);
	border-color: #f0b8b9;
	color: var(--hxpc-red-fg);
}

.hxpc-badge-deprecated {
	background: var(--hxpc-amber-bg);
	border-color: #ecd68c;
	color: var(--hxpc-amber-fg);
}

.hxpc-code {
	margin: 8px 0 0;
	padding: 6px 10px;
	border-radius: 3px;
	background: #1d2327;
	color: #f0f0f1;
	font-size: 12px;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.hxpc-code code {
	background: transparent;
	color: inherit;
	padding: 0;
	margin: 0;
}

.hxpc-label {
	font-weight: 600;
}

.hxpc-skipped ul {
	margin: 4px 0 0 18px;
	list-style: disc;
}

.hxpc-skipped li {
	margin: 0 0 4px;
	overflow-wrap: anywhere;
}

.hxpc-detail .hxpc-note {
	color: var(--hxpc-muted);
}

/* Empty and error states */
.hxpc-empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--hxpc-muted);
}

.hxpc-empty .dashicons {
	width: 36px;
	height: 36px;
	font-size: 36px;
	color: #787c82;
}

.hxpc-empty-error .dashicons {
	color: var(--hxpc-red-line);
}

.hxpc-card .hxpc-empty-title {
	margin: 8px 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--hxpc-text);
}

.hxpc-loading {
	color: var(--hxpc-muted);
}

.hxpc-pro {
	margin: 16px 0;
	font-size: 13px;
	color: var(--hxpc-muted);
}

/* Phone and small tablet: the table becomes stacked cards */
@media (max-width: 782px) {
	.hxpc-card {
		padding: 16px;
	}

	.hxpc-options {
		flex-direction: column;
		align-items: flex-start;
	}

	.hxpc-seg label {
		min-height: 40px;
	}

	.hxpc-head {
		display: none;
	}

	.hxpc-list {
		display: grid;
		gap: 12px;
		border: 0;
	}

	.hxpc-row {
		grid-template-columns: minmax(0, 1fr);
		border: 1px solid var(--hxpc-border);
		border-radius: 4px;
		background: #fff;
	}

	.hxpc-row:nth-child(even) {
		background: #fff;
	}

	.hxpc-cols {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 16px;
	}

	.hxpc-c-name,
	.hxpc-c-status {
		flex: 1 1 100%;
	}

	.hxpc-c-type::after {
		content: "";
	}

	.hxpc-act {
		padding: 0 12px 12px 34px;
		text-align: left;
	}

	.hxpc-act .button {
		min-height: 36px;
	}

	.hxpc-detail {
		padding: 4px 12px 12px;
	}

	.hxpc-toolbar .button {
		min-height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hxpc-bar-fill,
	.hxpc-c-name .dashicons {
		transition: none;
	}
}
