/*
 * Postlinkly link report page styles.
 *
 * Compact, expandable list — one row per post, click a count to see just
 * those links. Loaded only on the Link Report page.
 * Depends on admin-base.css for design tokens.
 *
 * @package Postlinkly
 * @since   1.1.0
 * @since   1.3.0 Tokenized layout on the shared design system.
 * @since   1.4.6 Compact-list layout, replacing the wide data table.
 */

/* ==========================================================================
   DANGER BUTTON VARIANT
   ========================================================================== */

.pl-btn-danger {
	color: var(--pl-red) !important;
	border-color: var(--pl-red-line) !important;
}
.pl-btn-danger:hover {
	background: var(--pl-red-l) !important;
	border-color: var(--pl-red) !important;
}

/* ==========================================================================
   WRAP
   ========================================================================== */

.pl-report-wrap {
	background: var(--pl-surface);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-lg);
	box-shadow: var(--pl-shadow-sm);
	overflow: hidden;
}

/* ==========================================================================
   TOOLBAR — search + segmented filter + a single sort control
   ========================================================================== */

.pl-report-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--pl-surface);
	border-bottom: 1px solid var(--pl-line);
	padding: 12px 16px;
}
.pl-report-toolbar__search {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--pl-muted);
	flex-shrink: 0;
}
.pl-report-search-input {
	padding: 6px 10px;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-sm);
	font-size: 13px;
	font-family: var(--pl-font-sans);
	color: var(--pl-ink);
	background: var(--pl-surface);
	min-width: 220px;
	transition: var(--pl-transition);
	outline: none;
}
.pl-report-search-input:focus {
	border-color: var(--pl-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pl-primary) 12%, transparent);
}
.pl-report-search-input:focus-visible {
	outline: 2px solid var(--pl-primary);
	outline-offset: 2px;
}

/* Segmented filter (All / Broken / Not linked yet) — replaces the old
   filter-chip row. This is the ONLY thing that changes which rows show;
   unlike the previous tab-based filter, it never changes what a row
   looks like or which fields it has. */
.pl-report-segment {
	display: flex;
	border: 1px solid var(--pl-line-2);
	border-radius: 999px;
	overflow: hidden;
}
.pl-report-segment__btn {
	padding: 6px 13px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--pl-ink-2);
	text-decoration: none;
	background: var(--pl-surface);
	white-space: nowrap;
}
.pl-report-segment__btn + .pl-report-segment__btn {
	border-left: 1px solid var(--pl-line-2);
}
.pl-report-segment__btn:hover {
	background: var(--pl-soft);
}
.pl-report-segment__btn:focus-visible {
	outline: 2px solid var(--pl-primary);
	outline-offset: -2px;
}
.pl-report-segment__btn--active {
	background: var(--pl-primary);
	color: #fff;
	font-weight: 600;
}
.pl-report-segment__btn--active:hover {
	background: var(--pl-primary-hover);
}

/* Sort — a single control. The previous page had both this dropdown AND
   sortable column headers doing the same job (and neither was actually
   wired to the query); the compact list has no column headers to click,
   so this is the only sort control, and it's the one that works. */
.pl-report-sort {
	margin-left: auto;
	padding: 6px 10px;
	border: 1px solid var(--pl-line-2);
	border-radius: var(--pl-radius-sm);
	font-size: 12.5px;
	font-family: var(--pl-font-sans);
	color: var(--pl-ink-2);
	background: var(--pl-surface);
	cursor: pointer;
}
.pl-report-sort:focus-visible {
	outline: 2px solid var(--pl-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   LIST
   ========================================================================== */

.pl-report-list {
	display: flex;
	flex-direction: column;
}
.pl-report-empty {
	padding: 32px 20px;
	text-align: center;
	color: var(--pl-muted);
	font-size: 13px;
	margin: 0;
}

.pl-report-item {
	border-bottom: 1px solid var(--pl-line);
	position: relative;
}
.pl-report-item:last-child {
	border-bottom: none;
}
.pl-report-item--orphan {
	box-shadow: inset 4px 0 0 var(--pl-amber);
}
.pl-report-item--broken {
	box-shadow: inset 4px 0 0 var(--pl-red);
}

.pl-report-item-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 20px;
}
.pl-report-item-main {
	flex: 1;
	min-width: 0;
}
.pl-report-item-title {
	font-weight: 600;
	font-size: 13.5px;
	color: var(--pl-ink);
}
.pl-report-flag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 10.5px;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: 999px;
	margin-left: 7px;
	vertical-align: middle;
}
.pl-report-flag--orphan { background: var(--pl-amber-l); color: var(--pl-amber); }
.pl-report-flag--broken { background: var(--pl-red-l); color: var(--pl-red); }
.pl-report-item-meta {
	font-size: 11.5px;
	color: var(--pl-muted);
	margin-top: 2px;
}
.pl-report-item-meta code {
	font-family: ui-monospace, monospace;
	font-size: 11px;
	background: var(--pl-soft);
	padding: 1px 5px;
	border-radius: var(--pl-radius-xs);
	color: var(--pl-muted);
}

/* ── Metric pills (In / Out / Ext) ── */
.pl-report-metrics {
	display: flex;
	gap: 6px;
	flex: none;
}
.pl-report-metric {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 5px 12px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
	min-width: 56px;
}
.pl-report-metric:hover {
	background: var(--pl-soft);
}
.pl-report-metric--open {
	background: var(--pl-primary-tint);
	border-color: var(--pl-primary-line);
}
.pl-report-metric-value {
	font-size: 15px;
	font-weight: 700;
	color: var(--pl-ink);
	font-variant-numeric: tabular-nums;
}
.pl-report-metric-value--zero {
	color: var(--pl-amber);
}
.pl-report-metric--has-broken .pl-report-metric-value {
	color: var(--pl-red);
}
.pl-report-metric-label {
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--pl-faint);
}

.pl-report-item-actions {
	font-size: 12px;
	color: var(--pl-primary);
	flex: none;
	display: flex;
	gap: 10px;
	white-space: nowrap;
}
.pl-report-item-actions a {
	color: inherit;
	text-decoration: none;
}
.pl-report-item-actions a:hover {
	text-decoration: underline;
}
.pl-report-item-actions a:focus-visible {
	outline: 2px solid var(--pl-primary);
	outline-offset: 2px;
	border-radius: var(--pl-radius-xs);
}
.pl-report-fix-link {
	color: var(--pl-red) !important;
	font-weight: 600;
}

/* ==========================================================================
   PER-METRIC DISCLOSURE
   ========================================================================== */

.pl-report-disclosure {
	padding: 2px 20px 16px 20px;
	border-top: 1px dashed var(--pl-line);
	background: var(--pl-soft-2, var(--pl-soft));
}
.pl-report-disclosure-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--pl-muted);
	padding-top: 12px;
}
.pl-report-disclosure-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pl-faint);
	margin: 12px 0 8px;
}
.pl-report-disclosure-empty {
	color: var(--pl-muted);
	font-size: 12.5px;
	font-style: italic;
	padding: 10px 2px 2px;
	margin: 0;
}
.pl-report-disclosure-empty--error {
	color: var(--pl-red);
	font-style: normal;
}

.pl-report-link-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--pl-surface);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-md);
	padding: 8px 12px;
	margin-bottom: 6px;
	font-size: 12.5px;
}
.pl-report-link-row--broken {
	border-color: var(--pl-red-line);
	background: var(--pl-red-l);
}
.pl-report-link-anchor {
	font-weight: 600;
	color: var(--pl-ink);
}
.pl-report-link-target {
	color: var(--pl-muted);
	margin-left: 8px;
}
.pl-report-link-target code {
	font-family: ui-monospace, monospace;
	font-size: 11px;
	background: var(--pl-soft);
	padding: 1px 5px;
	border-radius: var(--pl-radius-xs);
}
.pl-report-broken-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--pl-red);
	background: var(--pl-red-l);
	padding: 1px 6px;
	border-radius: var(--pl-radius-xs);
	margin-left: 8px;
}

@keyframes pl-spin {
	to { transform: rotate(360deg); }
}
.pl-spin {
	animation: pl-spin .7s linear infinite;
}

/* ==========================================================================
   PAGINATION (WP tablenav chrome, reused for its built-in styling)
   ========================================================================== */

.pl-report-pagination.tablenav {
	padding: 10px 16px;
	background: var(--pl-soft);
	border-top: 1px solid var(--pl-line);
	margin: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
	.pl-report-toolbar__search {
		flex: 1 1 100%;
	}
	.pl-report-search-input {
		flex: 1;
		min-width: 0;
		width: 100%;
	}
	.pl-report-sort {
		margin-left: 0;
	}
}

@media (max-width: 782px) {
	.pl-report-item-row {
		flex-wrap: wrap;
	}
	.pl-report-item-actions {
		flex-basis: 100%;
		justify-content: flex-end;
	}
	.pl-report-link-row {
		flex-direction: column;
		align-items: flex-start;
	}
}