/* No max-width on the wrap itself — the nav tabs must be free to use the
   full viewport width before wrapping to a second line. The comfortable
   reading width (960px) is applied to the content sections below instead. */
.acez-seo-wrap {
	--acez-border: #dcdcde;
	--acez-muted: #646970;
	--acez-accent: #2271b1;
	--acez-content-width: 960px;
}

/* Module color identity: each product area gets a distinct accent so users
   orient at a glance. Overrides --acez-accent locally on the page's wrap —
   every element already built on that variable (buttons, focus rings, the
   new card left-stripe below) retints automatically, no per-component work.
   Palette validated with the dataviz skill (CVD-safe). */
.acez-seo-wrap--mod-ai {
	--acez-accent: #8250df;
}

.acez-seo-wrap--mod-redirects {
	--acez-accent: #c9690a;
}

.acez-seo-wrap--mod-analytics {
	--acez-accent: #0e8f82;
}

.acez-seo-wrap--mod-license {
	--acez-accent: #a6790a;
}

.acez-seo-card,
.acez-seo-welcome,
.acez-seo-stats-grid,
.acez-seo-content-layout {
	max-width: var(--acez-content-width);
}

.acez-seo-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.acez-seo-header__icon {
	display: inline-flex;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.acez-seo-header__icon svg {
	width: 100%;
	height: 100%;
}

.acez-seo-nav-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 20px;
}

.acez-seo-nav-tabs .nav-tab {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.acez-seo-nav-tabs .nav-tab svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: 0.7;
}

.acez-seo-nav-tabs .nav-tab-active svg {
	opacity: 1;
}

.acez-seo-tab-description {
	color: var(--acez-muted);
	max-width: 720px;
	margin-bottom: 20px;
}

.acez-seo-card {
	background: #fff;
	border: 1px solid var(--acez-border);
	border-left: 3px solid var(--acez-accent);
	border-radius: 4px;
	margin-bottom: 20px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* M55 — a very light lift under the cursor, purely a depth/polish cue (not
   a clickability signal — most cards here are settings forms, not links). */
@media (prefers-reduced-motion: no-preference) {
	.acez-seo-card:hover {
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
		transform: translateY(-1px);
	}
}

.acez-seo-card__header {
	padding: 12px 16px;
	border-bottom: 1px solid var(--acez-border);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.acez-seo-card__header svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	opacity: 0.7;
}

.acez-seo-card__body {
	padding: 4px 16px 16px;
}

.acez-seo-card .form-table {
	margin-top: 0;
}

.acez-seo-empty-state {
	padding: 24px 16px;
	text-align: center;
	color: var(--acez-muted);
}

/* LocalBusiness scope: pages multi-select (third scope option) */
.acez-seo-lb-pages {
	margin-top: 8px;
	min-width: 260px;
}

/* Read-only preview of a physical robots.txt file */
.acez-seo-robots-preview {
	margin: 0 0 12px;
	padding: 12px;
	background: #f6f7f7;
	border: 1px solid var(--acez-border);
	border-radius: 4px;
	max-height: 320px;
	overflow: auto;
	font-family: Consolas, Monaco, monospace;
	font-size: 12px;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Danger card: settings that can deindex the whole site */
.acez-seo-card--danger {
	border-color: #d63638;
	box-shadow: 0 1px 1px rgba(214, 54, 56, 0.15);
}

.acez-seo-card--danger .acez-seo-card__header {
	border-bottom-color: #d63638;
	border-left: 4px solid #d63638;
	color: #d63638;
	background: rgba(214, 54, 56, 0.06);
}

.acez-seo-danger-note {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-left: 4px solid #d63638;
	background: rgba(214, 54, 56, 0.06);
	font-weight: 600;
}

/* Shared "nothing to show yet" block (M55) — replaces a bare
   <p class="description">; used by Pro's Redirects/GSC quick-wins/orphans
   lists (AcezSeoPro\Admin\EmptyState), loaded here so it works everywhere
   admin-settings.css is already enqueued, no extra stylesheet needed. */
.acez-seo-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 28px 16px;
	gap: 10px;
}

.acez-seo-empty-state__illustration {
	display: inline-flex;
	width: 56px;
	height: 56px;
}

.acez-seo-empty-state__illustration svg {
	width: 100%;
	height: 100%;
}

.acez-seo-empty-state--neutral .acez-seo-empty-state__illustration {
	color: var(--acez-muted);
	opacity: 0.6;
}

.acez-seo-empty-state--success .acez-seo-empty-state__illustration {
	color: #00a32a;
}

.acez-seo-empty-state__text {
	margin: 0;
	max-width: 380px;
	color: var(--acez-muted);
}

/* Tools: dry-run detail list (posts/terms the import would fill) */
.acez-seo-import-items {
	margin: 8px 0 16px;
	max-height: 420px;
	overflow-y: auto;
	padding-left: 4px;
	list-style: none;
}

.acez-seo-import-items li {
	padding: 6px 8px;
	margin: 0;
	border-bottom: 1px solid var(--acez-border);
}

.acez-seo-import-items li:last-child {
	border-bottom: none;
}

.acez-seo-import-items__heading {
	margin: 16px 0 4px;
}

.acez-seo-import-items__type,
.acez-seo-import-items__fields {
	color: var(--acez-muted);
}

/* Dashboard welcome panel */
.acez-seo-welcome {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: linear-gradient(135deg, #f0f6fc 0%, #ffffff 100%);
	border: 1px solid var(--acez-border);
	border-left: 4px solid var(--acez-accent);
	border-radius: 4px;
	padding: 24px;
	margin-bottom: 24px;
}

.acez-seo-welcome__icon {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
}

.acez-seo-welcome__icon svg {
	width: 100%;
	height: 100%;
}

.acez-seo-welcome__body h2 {
	margin: 0 0 8px;
	font-size: 20px;
}

.acez-seo-welcome__body p {
	max-width: 640px;
	color: var(--acez-muted);
	margin: 0 0 14px;
}

.acez-seo-welcome__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 6px 20px;
	max-width: 800px;
}

.acez-seo-welcome__features li {
	position: relative;
	padding-left: 18px;
	font-size: 13px;
	color: #1d2327;
}

.acez-seo-welcome__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--acez-accent);
}

/* Toggle switches — a plain checkbox styled as a modern slider. Same input,
   same form semantics and accessibility; only the skin changes. Higher
   specificity than wp-admin's own input[type=checkbox] rules on purpose. */
.acez-seo-wrap input.acez-seo-toggle {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 40px;
	height: 22px;
	min-width: 40px;
	margin: 0 8px 0 0;
	padding: 0;
	border: 1px solid #8c8f94;
	border-radius: 11px;
	background: #c3c4c7;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	vertical-align: middle;
	box-shadow: none;
}

.acez-seo-wrap input.acez-seo-toggle::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	margin: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	/* M55 — a slight overshoot reads as more tactile than a linear ease. */
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.acez-seo-wrap input.acez-seo-toggle:checked {
	background: var(--acez-accent);
	border-color: var(--acez-accent);
}

.acez-seo-wrap input.acez-seo-toggle:checked::before {
	transform: translateX(18px);
}

.acez-seo-wrap input.acez-seo-toggle:focus-visible {
	outline: 2px solid var(--acez-accent);
	outline-offset: 2px;
}

.acez-seo-wrap input.acez-seo-toggle:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Media picker (organization logo) */
.acez-seo-media-preview {
	margin-top: 8px;
}

.acez-seo-media-preview img {
	max-width: 80px;
	max-height: 80px;
	border: 1px solid var(--acez-border);
	border-radius: 4px;
	display: block;
}

/* AI Providers tab */
.acez-seo-ai-test-result {
	font-weight: 600;
}

.acez-seo-ai-test-result--success {
	color: #008a20;
}

.acez-seo-ai-test-result--error {
	color: #b32d2e;
}

/* Dashboard row 1: feature toggles left, Free vs Pro teaser right */
.acez-seo-dashboard-columns {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	max-width: var(--acez-content-width);
}

.acez-seo-dashboard-col {
	min-width: 0;
}

/* Features column: the previous 3:2 share widened by exactly 2rem
   (the 20px term subtracts the flex gap before splitting). */
.acez-seo-dashboard-col--features {
	flex: 0 0 calc((100% - 20px) * 0.6 + 2rem);
}

.acez-seo-dashboard-col--overview {
	flex: 1 1 0;
}

/* Inside a column the inner width caps are handled by the column itself. */
.acez-seo-dashboard-col .acez-seo-card,
.acez-seo-dashboard-col .acez-seo-stats-grid {
	max-width: none;
}

/* Dashboard overview grid */
.acez-seo-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.acez-seo-stat-card {
	background: #fff;
	border: 1px solid var(--acez-border);
	border-radius: 4px;
	padding: 16px;
}

.acez-seo-stat-card__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	margin-bottom: 10px;
}

.acez-seo-stat-card__title svg {
	width: 16px;
	height: 16px;
	opacity: 0.7;
}

.acez-seo-stat-row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	font-size: 13px;
	color: var(--acez-muted);
}

.acez-seo-stat-row strong {
	color: #1d2327;
}

.acez-seo-stat-card__footer {
	margin-top: 12px;
}

.acez-seo-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
}

.acez-seo-badge--on {
	background: #edfaef;
	color: #008a20;
}

.acez-seo-badge--off {
	background: #f6f7f7;
	color: var(--acez-muted);
}

/* Dashboard: "Kondycja konfiguracji" health card (M41) */
.acez-seo-setup-health {
	margin-bottom: 20px;
}

.acez-seo-setup-health__bar {
	height: 8px;
	border-radius: 4px;
	background: var(--acez-border);
	overflow: hidden;
}

.acez-seo-setup-health__bar-fill {
	height: 100%;
	background: var(--acez-accent);
	border-radius: 4px;
	transition: width 0.3s ease;
}

.acez-seo-setup-health__percent {
	margin: 8px 0 12px;
	font-size: 20px;
	font-weight: 600;
}

.acez-seo-setup-health__percent .description {
	font-size: 13px;
	font-weight: 400;
	color: var(--acez-muted);
	margin-left: 4px;
}

.acez-seo-setup-health__steps {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
}

.acez-seo-setup-health__step {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

.acez-seo-setup-health__step--pending {
	color: var(--acez-muted);
}

.acez-seo-setup-health__icon {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}

.acez-seo-setup-health__icon--pending {
	color: var(--acez-muted);
}

/* Dashboard: "Free vs Pro" teaser card (right of the feature toggles) */
.acez-seo-free-pro__label {
	margin: 16px 0 6px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--acez-muted);
}

.acez-seo-free-pro__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.acez-seo-free-pro__list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
}

.acez-seo-free-pro__icon {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 1px;
}

.acez-seo-free-pro__icon--check {
	color: #008a20;
}

.acez-seo-free-pro__icon--lock {
	color: var(--acez-accent);
}

/* Reusable "NOWOŚĆ" chip — Dashboard Free vs Pro list items, admin menu
   labels (WP core's own update-count bubbles use the same unescaped-title
   pattern for menu labels, so a badge span there is safe/established).
   NOTE: this used to redeclare `.acez-seo-badge` itself (a second, later
   rule silently overriding the M23 on/off status pill's padding/font-size
   and adding uppercase/letter-spacing to it too) — the pill-shape-specific
   properties now live on `--new` only, so the shared base class above
   (display/padding/border-radius/font) stays the single source of truth. */
.acez-seo-badge--new {
	display: inline-flex;
	align-items: center;
	background: #c2185b;
	color: #fff;
	border-radius: 9999px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.6;
	white-space: nowrap;
}

.acez-seo-badge--menu {
	margin-left: 6px;
	font-size: 9px;
	padding: 0 6px;
	vertical-align: 2px;
}

/* One-shot pulse on load (M55) — draws the eye ONCE, never loops (a
   looping badge would be a nagging distraction, not a polish touch). */
@media (prefers-reduced-motion: no-preference) {
	.acez-seo-badge--new {
		animation: acez-seo-badge-pulse 0.6s ease-in-out 1;
	}
}

@keyframes acez-seo-badge-pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.15);
	}

	100% {
		transform: scale(1);
	}
}

/* "Treści" tab: post-type sidebar + content body */
.acez-seo-content-layout {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.acez-seo-content-sidebar {
	flex: 0 0 200px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #fff;
	border: 1px solid var(--acez-border);
	border-radius: 4px;
	padding: 8px;
}

/* Group labels inside the sidebar (content types / taxonomy archives) */
.acez-seo-content-sidebar__group {
	padding: 8px 10px 2px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--acez-muted);
}

.acez-seo-content-sidebar__group + .acez-seo-content-sidebar__group,
.acez-seo-content-sidebar a + .acez-seo-content-sidebar__group {
	margin-top: 10px;
	border-top: 1px solid var(--acez-border);
	padding-top: 10px;
}

.acez-seo-content-sidebar a {
	padding: 8px 10px;
	border-radius: 3px;
	text-decoration: none;
	color: #1d2327;
}

.acez-seo-content-sidebar a:hover {
	background: #f0f0f1;
}

.acez-seo-content-sidebar a.is-active {
	background: var(--acez-accent);
	color: #fff;
}

.acez-seo-content-body {
	flex: 1;
	min-width: 0;
}

/* Responsive: stack below WP's own admin breakpoint */
@media (max-width: 782px) {
	.acez-seo-nav-tabs {
		flex-direction: column;
	}

	.acez-seo-stats-grid {
		grid-template-columns: 1fr;
	}

	.acez-seo-dashboard-columns {
		flex-direction: column;
	}

	.acez-seo-dashboard-col {
		width: 100%;
		/* In the stacked (column) direction flex-basis would control HEIGHT
		   — reset it so both sections size to their content. */
		flex: 0 0 auto;
	}

	.acez-seo-content-layout {
		flex-direction: column;
	}

	.acez-seo-content-sidebar {
		flex-direction: row;
		flex-wrap: wrap;
		flex: 1 1 auto;
		width: 100%;
	}

	.acez-seo-content-sidebar__group {
		flex: 1 1 100%;
	}

	.acez-seo-welcome {
		flex-direction: column;
	}

	.acez-seo-welcome__features {
		grid-template-columns: 1fr;
	}
}

/* --- Zwijane karty (M44) ------------------------------------------------ */

.acez-seo-card--collapsible .acez-seo-card__header {
	cursor: pointer;
	user-select: none;
}

.acez-seo-card__toggle {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	flex-shrink: 0;
}

.acez-seo-card__toggle:hover {
	background: rgba(0, 0, 0, 0.06);
}

.acez-seo-card__toggle:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

.acez-seo-card__toggle svg {
	width: 16px;
	height: 16px;
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}

.acez-seo-card.is-collapsed .acez-seo-card__toggle svg {
	transform: rotate(0deg);
}

.acez-seo-card.is-collapsed .acez-seo-card__body {
	display: none;
}

.acez-seo-card.is-collapsed .acez-seo-card__header {
	border-bottom: none;
}

.acez-seo-collapse-all {
	display: flex;
	justify-content: flex-start;
	margin: 0 0 10px;
}

.acez-seo-collapse-all__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px 5px 10px;
	border: 1px solid var(--acez-border, #dcdcde);
	border-radius: 9999px;
	background: #fff;
	color: #2271b1;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.acez-seo-collapse-all__btn:hover {
	background: #f0f6fc;
	border-color: #2271b1;
}

.acez-seo-collapse-all__btn:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

.acez-seo-collapse-all__btn svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.acez-seo-collapse-all__btn--expand svg {
	transform: rotate(180deg);
}

/* M41 — Kreator progress bar (steps 2-5 shown as "coming soon" preview). */
.acez-seo-onboarding-progress {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.acez-seo-onboarding-progress__step {
	padding: 6px 12px;
	border-radius: 9999px;
	border: 1px solid var(--acez-border);
	color: var(--acez-muted);
	font-size: 13px;
}

.acez-seo-onboarding-progress__step--current {
	border-color: var(--acez-accent);
	color: var(--acez-accent);
	font-weight: 600;
}

.acez-seo-onboarding-progress__step--done {
	border-color: var(--acez-accent);
	color: var(--acez-accent);
}

.acez-seo-onboarding-progress__step--upcoming em {
	font-style: normal;
	opacity: 0.7;
}

.acez-seo-onboarding-next-steps {
	list-style: disc;
	padding-left: 20px;
}

/* "Generate with AI" trigger rendered under a settings field (llms.txt tab).
   Kept here rather than inline so the markup helper in FormControls stays
   style-free, like every other control on these screens. */
.acez-seo-ai-field-action
{
	margin: 8px 0 0;
}

.acez-seo-ai-field-action .acez-seo-ai-generate
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 9999px;
}