/* BrenWP Cache Admin UI - strictly scoped */
.brenwp-ui.brenwpcache-wrap {
	/* Plugin-prefixed variables */
	/* Light-blue premium palette (scoped to plugin UI) */
	--brenwpcache-color-primary: #0284c7;
	--brenwpcache-color-primary-2: #0ea5e9;
	--brenwpcache-color-surface: #ffffff;
	--brenwpcache-color-surface-2: #f6f7f7;
	--brenwpcache-color-border: #dcdcde;
	--brenwpcache-color-text: #1d2327;
	--brenwpcache-color-muted: #646970;
	--brenwpcache-color-good: #00a32a;
	--brenwpcache-color-warn: #d63638;

	--brenwpcache-color-violet: #6d28d9;
	--brenwpcache-color-cyan: #0891b2;
	--brenwpcache-color-amber: #b45309;

	--brenwpcache-radius: 12px;
	--brenwpcache-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);

	--brenwpcache-space-1: 6px;
	--brenwpcache-space-2: 10px;
	--brenwpcache-space-3: 14px;
	--brenwpcache-space-4: 18px;
	--brenwpcache-space-5: 24px;

	/* BrenWP reusable tokens mapped */
	--brenwp-color-primary: var(--brenwpcache-color-primary);
	--brenwp-color-surface: var(--brenwpcache-color-surface);
	--brenwp-color-surface-2: var(--brenwpcache-color-surface-2);
	--brenwp-color-border: var(--brenwpcache-color-border);
	--brenwp-color-text: var(--brenwpcache-color-text);
	--brenwp-color-muted: var(--brenwpcache-color-muted);
	--brenwp-color-good: var(--brenwpcache-color-good);
	--brenwp-color-warn: var(--brenwpcache-color-warn);

	--brenwp-radius: var(--brenwpcache-radius);
	--brenwp-shadow: var(--brenwpcache-shadow);

	--brenwp-space-1: var(--brenwpcache-space-1);
	--brenwp-space-2: var(--brenwpcache-space-2);
	--brenwp-space-3: var(--brenwpcache-space-3);
	--brenwp-space-4: var(--brenwpcache-space-4);
	--brenwp-space-5: var(--brenwpcache-space-5);
}

.brenwp-ui.brenwpcache-wrap * {
	box-sizing: border-box;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-hero {
	background: linear-gradient(135deg, rgba(34, 113, 177, 0.12), rgba(8, 145, 178, 0.10), rgba(109, 40, 217, 0.08));
	border: 1px solid var(--brenwp-color-border);
	border-radius: var(--brenwp-radius);
	box-shadow: var(--brenwp-shadow);
	padding: var(--brenwp-space-5);
	margin: 0 0 var(--brenwp-space-4) 0;
	display: flex;
	justify-content: space-between;
	gap: var(--brenwp-space-4);
	align-items: flex-start;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-hero__h1 {
	margin: 0 0 var(--brenwp-space-2) 0;
	font-size: 22px;
	line-height: 1.2;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-hero__sub {
	margin: 0;
	color: var(--brenwp-color-muted);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--brenwp-space-2);
	align-items: center;
	justify-content: flex-end;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-hero__brand {
	display: flex;
	align-items: center;
	gap: var(--brenwp-space-3);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-hero__logo {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--brenwp-color-primary);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-hero__logo .brenwpcache-icon {
	width: 36px;
	height: 36px;
	display: block;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-hero--about .brenwpcache-hero__logo {
	color: var(--brenwpcache-color-violet);
}
.brenwp-ui.brenwpcache-wrap .brenwpcache-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 600;
	border: 1px solid var(--brenwp-color-border);
	background: var(--brenwp-color-surface-2);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-badge.is-good {
	border-color: rgba(0, 163, 42, 0.25);
	background: rgba(0, 163, 42, 0.08);
	color: var(--brenwp-color-good);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-badge.is-warn {
	border-color: rgba(214, 54, 56, 0.25);
	background: rgba(214, 54, 56, 0.08);
	color: var(--brenwp-color-warn);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--brenwp-color-border);
	background: var(--brenwp-color-surface-2);
	color: var(--brenwp-color-text);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr) 320px;
	gap: var(--brenwp-space-4);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-nav {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	text-decoration: none;
	border: 1px solid transparent;
	color: var(--brenwp-color-text);
	background: transparent;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__icon {
	width: 20px;
	height: 20px;
	color: var(--brenwp-color-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__icon .brenwpcache-icon {
	width: 18px;
	height: 18px;
	display: block;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-icon {
	display: block;
	width: 20px;
	height: 20px;
	fill: currentColor;
	color: currentColor;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__item:hover {
	background: var(--brenwp-color-surface-2);
	border-color: var(--brenwp-color-border);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__item.is-active {
	background: linear-gradient(180deg, rgba(34, 113, 177, 0.10), rgba(34, 113, 177, 0.00));
	border-color: var(--brenwp-color-border);
	box-shadow: var(--brenwp-shadow);
	font-weight: 600;
	position: relative;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__item.is-active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 4px;
	border-radius: 99px;
	background: var(--brenwp-color-primary);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__item.is-active .brenwpcache-nav__icon {
	color: var(--brenwp-color-primary);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-main {
	min-width: 0;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-side {
	display: flex;
	flex-direction: column;
	gap: var(--brenwp-space-4);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-section__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--brenwp-space-3);
	margin: 0 0 var(--brenwp-space-3) 0;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-section__title {
	margin: 0;
	font-size: 18px;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-commandbar {
	display: flex;
	align-items: center;
	gap: 10px;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-commandbar__search {
	min-width: 280px;
	max-width: 420px;
	width: 100%;
	border-radius: calc(var(--brenwp-radius) + 4px);
	padding-left: 12px;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-commandbar__hint {
	color: var(--brenwp-color-muted);
	font-size: 12px;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-card {
	background: var(--brenwp-color-surface);
	border: 1px solid var(--brenwp-color-border);
	border-radius: var(--brenwp-radius);
	box-shadow: var(--brenwp-shadow);
	padding: var(--brenwp-space-4);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-card--accent-primary {
	border-top: 4px solid var(--brenwpcache-color-primary);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-card--accent-cyan {
	border-top: 4px solid var(--brenwpcache-color-cyan);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-card--accent-green {
	border-top: 4px solid var(--brenwpcache-color-good);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-card--accent-amber {
	border-top: 4px solid var(--brenwpcache-color-amber);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-card--accent-violet {
	border-top: 4px solid var(--brenwpcache-color-violet);
}
.brenwp-ui.brenwpcache-wrap .brenwpcache-card--wide {
	margin-top: var(--brenwp-space-4);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-card--settings {
	margin-bottom: var(--brenwp-space-4);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-card__title {
	margin: 0 0 var(--brenwp-space-2) 0;
	font-size: 14px;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-card__title--with-icon {
	display: flex;
	align-items: center;
	gap: 8px;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-title-icon {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(34, 113, 177, 0.10);
	color: var(--brenwp-color-primary);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-title-icon .brenwpcache-icon {
	width: 16px;
	height: 16px;
	display: block;
}

/* Buttons - strictly scoped to plugin pages */
.brenwp-ui.brenwpcache-wrap .brenwpcache-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 12px;
	padding: 7px 12px;
	line-height: 1.2;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.08);
	transition: transform 90ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-btn:active {
	transform: translateY(0);
	filter: brightness(0.98);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-btn__icon {
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-btn__icon .brenwpcache-icon {
	width: 16px;
	height: 16px;
	display: block;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-btn--primary.button-primary {
	background: linear-gradient(180deg, var(--brenwpcache-color-primary-2), var(--brenwpcache-color-primary));
	border-color: var(--brenwpcache-color-primary);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-btn--secondary.button-secondary {
	background: linear-gradient(180deg, #ffffff, #f6f7f7);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-btn--link.button-link {
	box-shadow: none;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-form-actions {
	margin-top: var(--brenwp-space-3);
	display: flex;
	justify-content: flex-end;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-card__content p {
	margin-top: 0;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-muted {
	color: var(--brenwp-color-muted);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-list {
	margin: 0;
	padding-left: 18px;
	color: var(--brenwp-color-text);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--brenwp-space-3);
	padding: 12px 0;
	border-top: 1px solid var(--brenwp-color-border);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-row:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-row__label label {
	font-weight: 600;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-no-results {
	margin: var(--brenwp-space-2) 0 0 0;
	color: var(--brenwp-color-muted);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-searchable-row.is-hidden {
	display: none;
}

/* Toggle switch */
.brenwp-ui.brenwpcache-wrap .brenwpcache-toggle__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-toggle__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-toggle__track {
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: linear-gradient(180deg, #e6e7e9, #dcdcde);
	position: relative;
	border: 1px solid var(--brenwp-color-border);
	transition: background 140ms ease, box-shadow 140ms ease;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-toggle__track::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	transform: translateY(-50%);
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	transition: left 140ms ease, transform 140ms ease;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-toggle__label:hover .brenwpcache-toggle__track {
	filter: brightness(1.02);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-toggle__input:focus + .brenwpcache-toggle__label .brenwpcache-toggle__track {
	outline: 2px solid rgba(34, 113, 177, 0.35);
	outline-offset: 2px;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-toggle__input:checked + .brenwpcache-toggle__label .brenwpcache-toggle__track {
	background: linear-gradient(90deg, rgba(34, 113, 177, 1), rgba(8, 145, 178, 0.95));
	box-shadow: 0 0 0 4px rgba(34, 113, 177, 0.10);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-toggle__input:checked + .brenwpcache-toggle__label .brenwpcache-toggle__track::after {
	left: 22px;
	transform: translateY(-50%) scale(1.02);
}

/* KPI cards */
.brenwp-ui.brenwpcache-wrap .brenwpcache-kpis {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--brenwp-space-4);
	margin-bottom: var(--brenwp-space-4);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-kpi {
	background: var(--brenwp-color-surface);
	border: 1px solid var(--brenwp-color-border);
	border-radius: var(--brenwp-radius);
	box-shadow: var(--brenwp-shadow);
	padding: var(--brenwp-space-4);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-kpi--accent-primary {
	border-top: 4px solid var(--brenwpcache-color-primary);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-kpi--accent-green {
	border-top: 4px solid var(--brenwpcache-color-good);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-kpi--accent-violet {
	border-top: 4px solid var(--brenwpcache-color-violet);
}
.brenwp-ui.brenwpcache-wrap .brenwpcache-kpi__label {
	color: var(--brenwp-color-muted);
	font-size: 12px;
	margin-bottom: 6px;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-kpi__value {
	font-size: 22px;
	font-weight: 700;
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-kpi__meta {
	color: var(--brenwp-color-muted);
	font-size: 12px;
	margin-top: 6px;
}

/* About page grid */
.brenwp-ui.brenwpcache-wrap .brenwpcache-about-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--brenwp-space-4);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-about-grid .brenwpcache-list {
	padding-left: 22px;
}
@media (max-width: 1100px) {
	.brenwp-ui.brenwpcache-wrap .brenwpcache-about-grid {
		grid-template-columns: 1fr;
	}

	.brenwp-ui.brenwpcache-wrap .brenwpcache-layout {
		grid-template-columns: 1fr;
	}

	.brenwp-ui.brenwpcache-wrap .brenwpcache-nav {
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		padding-bottom: 6px;
	}

	.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__item {
		flex: 0 0 auto;
	}

	.brenwp-ui.brenwpcache-wrap .brenwpcache-kpis {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 782px) {
	.brenwp-ui.brenwpcache-wrap .brenwpcache-hero {
		flex-direction: column;
	}

	.brenwp-ui.brenwpcache-wrap .brenwpcache-row {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * UX improvements (buttons + menu) - strictly scoped to BrenWP Cache pages
 * ------------------------------------------------------------------------- */
.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__item:hover .brenwpcache-nav__icon,
.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__item.is-active .brenwpcache-nav__icon {
	color: var(--brenwp-color-primary);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-btn:focus-visible,
.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__item:focus-visible,
.brenwp-ui.brenwpcache-wrap .brenwpcache-commandbar__search:focus-visible {
	outline: none;
	border-color: rgba(34, 113, 177, 0.65);
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(34, 113, 177, 0.35);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__item:focus-visible {
	background: var(--brenwp-color-surface-2);
}

.brenwp-ui.brenwpcache-wrap .brenwpcache-btn--link.button-link:hover,
.brenwp-ui.brenwpcache-wrap .brenwpcache-btn--link.button-link:focus-visible {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.brenwp-ui.brenwpcache-wrap .brenwpcache-btn,
	.brenwp-ui.brenwpcache-wrap .brenwpcache-nav__item,
	.brenwp-ui.brenwpcache-wrap .brenwpcache-toggle__track,
	.brenwp-ui.brenwpcache-wrap .brenwpcache-toggle__track::after {
		transition: none;
	}
	.brenwp-ui.brenwpcache-wrap .brenwpcache-btn:hover {
		transform: none;
	}
}