/* ==========================================================================
   WP Koumbit Accessibility — Audit Tab Styles
   Scoped to #wka-panel, .wka-audit-*, #wka-audit-ring, #wka-audit-copy-btn.
   Uses CSS vars from wka-toolbar.css.
   ========================================================================== */

/* ---- Tab bar ---- */
#wka-tab-bar {
	display: flex;
	border-bottom: 1px solid var(--wka-border);
	background: var(--wka-bg-secondary);
	flex-shrink: 0;
}

.wka-tab-btn {
	flex: 1;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--wka-text-muted);
	font-size: 0.85em;
	padding: 10px 8px;
	cursor: pointer;
	transition: color var(--wka-anim), border-bottom-color var(--wka-anim), background var(--wka-anim);
	font-weight: 500;
}

.wka-tab-btn:hover {
	background: rgba(255, 255, 255, 0.04);
	color: var(--wka-text);
}

.wka-tab-btn--active {
	color: var(--wka-text);
	border-bottom-color: var(--wka-primary);
	background: var(--wka-bg);
}

.wka-tab-btn:focus-visible {
	outline: none;
	box-shadow: var(--wka-focus-ring);
}

/* ---- Audit idle state ---- */
.wka-audit-idle {
	padding: 22px;
	text-align: center;
}

.wka-audit-intro {
	color: var(--wka-text-muted);
	font-size: 0.85em;
	margin-bottom: 16px;
	line-height: 1.5;
}

.wka-audit-run-btn {
	display: block;
	width: 100%;
	padding: 10px;
	background: var(--wka-primary);
	color: #fff;
	border: none;
	border-radius: var(--wka-radius);
	cursor: pointer;
	font-size: 0.875em;
	font-weight: 600;
	transition: background var(--wka-anim);
}

.wka-audit-run-btn:hover {
	background: var(--wka-primary-dark);
}

.wka-audit-run-btn:focus-visible {
	outline: none;
	box-shadow: var(--wka-focus-ring);
}

.wka-audit-run-btn:disabled {
	opacity: 0.65;
	cursor: default;
}

/* ---- Summary bar ---- */
.wka-audit-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-bottom: 1px solid var(--wka-border);
	flex-shrink: 0;
}

.wka-audit-count {
	font-size: 0.75em;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 12px;
	white-space: nowrap;
}

.wka-audit-count--error {
	background: rgba(229, 62, 62, 0.2);
	color: #fc8181;
}

.wka-audit-count--warning {
	background: rgba(251, 191, 36, 0.2);
	color: #fbbf24;
}

.wka-audit-count--notice {
	background: rgba(96, 165, 250, 0.2);
	color: var(--wka-accent);
}

.wka-audit-rescan-btn {
	width: auto;
	padding: 4px 12px;
	background: transparent;
	border: 1px solid var(--wka-border);
	border-radius: var(--wka-radius);
	color: var(--wka-text-muted);
	margin-left: auto;
	font-size: 0.8em;
	cursor: pointer;
	transition: border-color var(--wka-anim), color var(--wka-anim);
	font-weight: 500;
}

.wka-audit-rescan-btn:hover {
	border-color: var(--wka-accent);
	color: var(--wka-text);
}

.wka-audit-rescan-btn:focus-visible {
	outline: none;
	box-shadow: var(--wka-focus-ring);
}

/* ---- Results area ---- */
.wka-audit-results {
	overflow-y: auto;
	flex: 1;
	scrollbar-width: thin;
	scrollbar-color: var(--wka-border) transparent;
}

/* ---- Issue groups ---- */
.wka-audit-group {
	border-bottom: 1px solid var(--wka-border);
}

.wka-audit-group:last-child {
	border-bottom: none;
}

.wka-audit-group-summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	cursor: pointer;
	list-style: none;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--wka-text);
	user-select: none;
}

.wka-audit-group-summary::-webkit-details-marker {
	display: none;
}

.wka-audit-group-summary:hover {
	background: var(--wka-bg-secondary);
}

.wka-audit-group summary::before {
	content: '▶';
	margin-right: 6px;
	font-size: 0.7em;
	transition: transform 0.2s;
	display: inline-block;
	flex-shrink: 0;
}

.wka-audit-group[open] summary::before {
	transform: rotate(90deg);
}

/* ---- Severity dot ---- */
.wka-audit-severity-dot {
	width: 8px;
	height: 8px;
	display: inline-block;
	border-radius: 50%;
	flex-shrink: 0;
}

.wka-dot-error   { background: #fc8181; }
.wka-dot-warning { background: #fbbf24; }
.wka-dot-notice  { background: var(--wka-accent); }

/* ---- Count badge (in group summary) ---- */
.wka-audit-count-badge {
	font-size: 0.7em;
	padding: 1px 6px;
	background: var(--wka-bg-secondary);
	border-radius: 10px;
	color: var(--wka-text-muted);
	margin-left: auto;
	flex-shrink: 0;
}

/* ---- Issue list ---- */
.wka-audit-issue-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.wka-audit-issue {
	padding: 10px 22px 10px 28px;
	border-left: 3px solid transparent;
	transition: border-color 0.2s;
}

.wka-issue-error   { border-left-color: #e53e3e; }
.wka-issue-warning { border-left-color: #d97706; }
.wka-issue-notice  { border-left-color: var(--wka-accent); }

/* ---- Issue header ---- */
.wka-audit-issue-header {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.wka-audit-selector {
	font-family: monospace, monospace;
	font-size: 0.8em;
	color: var(--wka-accent);
	background: var(--wka-bg-secondary);
	padding: 1px 5px;
	border-radius: 3px;
	flex-shrink: 0;
}

.wka-audit-wcag-badge {
	font-size: 0.7em;
	color: var(--wka-text-muted);
	padding: 1px 5px;
	border: 1px solid var(--wka-border);
	border-radius: 10px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ---- Issue action buttons ---- */
.wka-audit-issue-actions {
	display: flex;
	gap: 4px;
	margin-left: auto;
	flex-shrink: 0;
}

.wka-audit-btn {
	background: transparent;
	border: 1px solid var(--wka-border);
	color: var(--wka-text-muted);
	padding: 2px 8px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 0.75em;
	transition: background var(--wka-anim), color var(--wka-anim), border-color var(--wka-anim);
}

.wka-audit-btn:hover {
	background: var(--wka-bg-secondary);
	color: var(--wka-text);
}

.wka-audit-btn:focus-visible {
	outline: none;
	box-shadow: var(--wka-focus-ring);
}

.wka-audit-btn--apply {
	border-color: var(--wka-primary);
	color: var(--wka-primary);
}

.wka-audit-btn--apply:hover {
	background: rgba(26, 86, 219, 0.15);
	color: var(--wka-primary);
}

.wka-audit-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* ---- Issue text ---- */
.wka-audit-desc {
	font-size: 0.82em;
	color: var(--wka-text);
	margin: 0 0 2px;
	line-height: 1.4;
}

.wka-audit-suggestion {
	font-size: 0.78em;
	color: var(--wka-text-muted);
	margin: 0;
	line-height: 1.4;
}

/* ---- Fix panel ---- */
.wka-audit-fix-panel {
	margin: 6px 0 4px;
	padding: 10px 12px;
	background: var(--wka-bg);
	border-left: 3px solid var(--wka-primary);
	border-radius: 0 4px 4px 0;
}

.wka-audit-fix-label {
	display: block;
	font-size: 0.8em;
	color: var(--wka-text-muted);
	margin-bottom: 6px;
}

.wka-audit-fix-input {
	display: block;
	width: 100%;
	background: var(--wka-bg-secondary);
	border: 1px solid var(--wka-border);
	color: var(--wka-text);
	border-radius: 4px;
	padding: 5px 8px;
	font-size: 0.85em;
	margin-top: 4px;
	box-sizing: border-box;
}

.wka-audit-fix-input:focus {
	outline: none;
	border-color: var(--wka-primary);
}

.wka-audit-fix-actions {
	display: flex;
	gap: 6px;
	margin-top: 8px;
}

/* ---- Color fix ---- */
.wka-audit-color-fix {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 0.8em;
	color: var(--wka-text-muted);
	margin-bottom: 4px;
}

.wka-audit-swatch {
	width: 20px;
	height: 20px;
	display: inline-block;
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	flex-shrink: 0;
}

.wka-audit-hex {
	font-family: monospace, monospace;
	font-size: 0.85em;
	color: var(--wka-text);
}

/* ---- Clean state ---- */
.wka-audit-clean {
	text-align: center;
	padding: 32px 22px;
	color: var(--wka-success);
	font-size: 0.9em;
}

/* ---- Action fix description ---- */
.wka-audit-action-desc {
	font-size: 0.8em;
	color: var(--wka-text-muted);
	margin: 0 0 8px;
}

/* ---- Audit copy button (in footer) ---- */
#wka-audit-copy-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 16px;
	background: transparent;
	border: 1px solid var(--wka-border);
	border-radius: var(--wka-radius);
	color: var(--wka-text-muted);
	font-size: 0.875em;
	cursor: pointer;
	justify-content: center;
	transition: border-color var(--wka-anim), color var(--wka-anim);
}

#wka-audit-copy-btn:hover {
	border-color: var(--wka-accent);
	color: var(--wka-text);
}

#wka-audit-copy-btn:focus-visible {
	outline: none;
	box-shadow: var(--wka-focus-ring);
}

/* ---- Highlight ring (appended to body) ---- */
#wka-audit-ring {
	position: absolute;
	z-index: 2147483646;
	pointer-events: none;
	outline: 3px solid #e53e3e;
	outline-offset: 2px;
	border-radius: 3px;
	box-shadow: 0 0 0 6px rgba(229, 62, 62, 0.25);
	transition: none;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.wka-tab-btn,
	.wka-audit-run-btn,
	.wka-audit-rescan-btn,
	.wka-audit-btn,
	.wka-audit-group summary::before {
		transition: none;
	}
}