/* ==========================================================================
   Carrera Warranty — admin UI
   Carrera Shield brand system: brand black #121212, brand gray #58585c,
   white as the primary accent. Monochrome accent + functional status colors
   (green/amber/blue; red reserved for errors & destructive actions only).
   Scoped under the plugin wrappers so nothing leaks into wp-admin or the
   theme. RTL-safe: logical properties only.
   ========================================================================== */

.cw-wrap,
.cw-panel,
.cw-panel-login,
.cw-toast-stack {
	/* --- Brand palette --------------------------------------------------- */
	--cw-black: #121212; /* Carrera brand black */
	--cw-gray:  #58585c; /* Carrera brand gray  */
	--cw-white: #ffffff;

	--cw-canvas:        #121212;
	--cw-surface:       #1a1a1d;
	--cw-surface-2:     #222226;
	--cw-surface-3:     #2b2b30;
	--cw-border:        #333339;
	--cw-border-strong: #46464d;

	--cw-text:    #ffffff;
	--cw-text-2:  #b9b9c0;
	--cw-muted:   #97979e;

	/* White is the primary accent; ink is the text color used on it. */
	--cw-accent:       #ffffff;
	--cw-accent-hover: #e4e4e8;
	--cw-accent-ink:   #121212;
	--cw-accent-text:  #ffffff;

	/* Functional status colors (never decorative). */
	--cw-green:  #4ade9c;
	--cw-amber:  #ffc24d;
	--cw-danger: #ff7a70; /* errors & destructive actions only */
	--cw-blue:   #8ab4ff;
	--cw-purple: #b3befa;

	/* --- Scales ----------------------------------------------------------- */
	--cw-radius-s: 8px;
	--cw-radius:   12px;
	--cw-radius-l: 16px;

	--cw-sp-1: 4px;
	--cw-sp-2: 8px;
	--cw-sp-3: 12px;
	--cw-sp-4: 16px;
	--cw-sp-5: 20px;
	--cw-sp-6: 24px;
	--cw-sp-7: 32px;

	--cw-shadow:   0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.25);
	--cw-shadow-s: 0 1px 2px rgba(0, 0, 0, 0.3);
	--cw-ring:     0 0 0 3px rgba(255, 255, 255, 0.28);

	--cw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, "Noto Sans", "Noto Kufi Arabic", sans-serif;

	/* Brand houndstooth texture (white baked at ~5% alpha in the tile).
	   Tune the whole treatment from these four variables:
	   - opacity multiplies the tile's baked alpha (0.5 → ~2.7% effective),
	     which also makes the white checks read as a slightly lighter shade
	     of the surface rather than white;
	   - the fades control where the texture is allowed to show;
	   - the shade is a dark overlay for surfaces that can't use a pseudo. */
	--cw-pattern: url("../img/pattern-tile.png");
	--cw-pattern-size: 40px 80px;
	--cw-pattern-opacity: 0.5;
	/* strongest in the far corner, gone where content sits */
	--cw-pattern-fade-corner: radial-gradient(130% 130% at 85% 0%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 80%);
	/* visible at the edges, fades out behind centered content */
	--cw-pattern-fade-edges: radial-gradient(120% 120% at 50% 42%, transparent 45%, rgba(0, 0, 0, 0.5) 70%, #000 95%);
	/* dark diagonal overlay (deepest where content sits) */
	--cw-pattern-shade: linear-gradient(160deg, rgba(18, 18, 18, 0.85) 0%, rgba(18, 18, 18, 0.45) 55%, rgba(18, 18, 18, 0.12) 100%);

	font-family: var(--cw-font);
	color-scheme: dark;
}

/* ==========================================================================
   Canvas
   ========================================================================== */

.cw-wrap {
	background: var(--cw-canvas);
	border: 1px solid var(--cw-border);
	border-radius: var(--cw-radius-l);
	padding: var(--cw-sp-6) var(--cw-sp-6) var(--cw-sp-7);
	margin-block: var(--cw-sp-5) 40px;
	margin-inline: 0 var(--cw-sp-5);
	color: var(--cw-text);
	font-size: 14px;
	line-height: 1.55;
}

@media (max-width: 782px) {
	.cw-wrap {
		padding: var(--cw-sp-4);
		margin-inline: 0 10px;
	}
}

.cw-wrap h1,
.cw-wrap h2,
.cw-wrap h3,
.cw-panel-login h2 {
	color: var(--cw-text);
	margin: 0;
}

/* Bold, condensed-feel automotive headings */
.cw-wrap h1 {
	font-size: 21px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-stretch: condensed;
	padding-inline-start: 14px;
	position: relative;
}
.cw-wrap h1::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 3px;
	width: 4px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--cw-white) 0%, var(--cw-gray) 100%);
}
.cw-wrap h3 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.cw-muted { color: var(--cw-muted); }
.cw-strong { font-weight: 600; color: var(--cw-text); }

.cw-link {
	color: var(--cw-text);
	text-decoration: underline;
	text-decoration-color: var(--cw-gray);
	text-underline-offset: 3px;
	font-weight: 600;
}
.cw-link:hover,
.cw-link:focus { color: var(--cw-text); text-decoration-color: var(--cw-white); }

.cw-wrap :focus-visible,
.cw-panel :focus-visible,
.cw-panel-login :focus-visible {
	outline: 2px solid var(--cw-white);
	outline-offset: 2px;
}

/* Brand logo in page headers */
.cw-brand-logo {
	height: 46px;
	width: auto;
	flex: 0 0 auto;
	align-self: center;
	opacity: 0.95;
	margin-inline-start: auto;
}
@media (max-width: 782px) {
	.cw-brand-logo { height: 36px; }
}

/* ==========================================================================
   Page head
   ========================================================================== */

.cw-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--cw-sp-4);
	flex-wrap: wrap;
	margin-block-end: var(--cw-sp-5);
}
.cw-page-head p { margin: 6px 0 0; }

/* ==========================================================================
   Notices → toasts
   ========================================================================== */

.cw-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: var(--cw-radius);
	margin-block-end: var(--cw-sp-4);
	font-weight: 500;
	border: 1px solid transparent;
	background: var(--cw-surface-2);
}
.cw-notice::before {
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}
.cw-notice--success {
	background: rgba(74, 222, 156, 0.08);
	border-color: rgba(74, 222, 156, 0.28);
	color: var(--cw-green);
}
.cw-notice--error {
	background: rgba(255, 122, 112, 0.08);
	border-color: rgba(255, 122, 112, 0.3);
	color: var(--cw-danger);
}

.cw-toast-stack {
	position: fixed;
	inset-block-start: 46px;
	inset-inline-end: 20px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(420px, calc(100vw - 40px));
}
.cw-toast-stack .cw-notice {
	margin: 0;
	box-shadow: var(--cw-shadow);
	background-color: var(--cw-surface-3);
	animation: cw-toast-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.cw-toast-stack .cw-notice--success { background: #16241e; }
.cw-toast-stack .cw-notice--error   { background: #2a1a19; }
.cw-toast-stack .cw-notice.is-leaving {
	animation: cw-toast-out 0.22s ease-in both;
}
.cw-notice__close {
	margin-inline-start: auto;
	background: none;
	border: 0;
	color: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
	opacity: 0.7;
}
.cw-notice__close:hover { opacity: 1; }

@keyframes cw-toast-in {
	from { opacity: 0; transform: translateY(-8px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}
@keyframes cw-toast-out {
	to { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

/* ==========================================================================
   Hero (dashboard) — brand houndstooth texture, kept away from the text
   ========================================================================== */

.cw-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cw-sp-6);
	flex-wrap: wrap;
	background: linear-gradient(135deg, var(--cw-surface-2) 0%, var(--cw-surface) 100%);
	border: 1px solid var(--cw-border);
	border-radius: var(--cw-radius-l);
	padding: 26px 30px;
	margin-block-end: var(--cw-sp-6);
	position: relative;
	overflow: hidden;
}
.cw-hero::before {
	/* houndstooth field on the action side only, never under the copy;
	   dimmed and faded so it reads as carbon-fiber texture, not print */
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 42%;
	background-image: var(--cw-pattern);
	background-size: var(--cw-pattern-size);
	opacity: var(--cw-pattern-opacity);
	-webkit-mask-image: var(--cw-pattern-fade-corner);
	mask-image: var(--cw-pattern-fade-corner);
	pointer-events: none;
}
.cw-hero::after {
	/* racing stripe */
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 84px;
	width: 5px;
	background: var(--cw-white);
	opacity: 0.55;
	transform: skewX(-18deg);
	pointer-events: none;
}
.cw-hero__kicker {
	display: block;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cw-muted);
	font-weight: 700;
	margin-block-end: 8px;
}
.cw-hero__text { position: relative; z-index: 1; }
.cw-hero__text h2 {
	color: var(--cw-text);
	font-size: 22px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-stretch: condensed;
	margin: 0 0 8px;
}
.cw-hero__text p { margin: 0; color: var(--cw-text-2); }
.cw-hero__text strong { color: var(--cw-text); font-weight: 700; }

.cw-hero__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.cw-hero__btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 96px;
	padding: 14px 16px;
	border-radius: var(--cw-radius);
	background: rgba(18, 18, 18, 0.55);
	border: 1px solid var(--cw-border-strong);
	color: var(--cw-text-2);
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.cw-hero__btn:hover,
.cw-hero__btn:focus {
	background: rgba(18, 18, 18, 0.8);
	border-color: var(--cw-white);
	color: var(--cw-text);
	transform: translateY(-1px);
}
.cw-hero__btn .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
	color: var(--cw-white);
}

/* ==========================================================================
   Cards & grids
   ========================================================================== */

.cw-card {
	background: var(--cw-surface);
	border: 1px solid var(--cw-border);
	border-radius: var(--cw-radius-l);
	box-shadow: var(--cw-shadow-s);
	padding: var(--cw-sp-5) 22px;
	margin-block-end: var(--cw-sp-6);
}

.cw-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cw-sp-3);
	margin-block-end: var(--cw-sp-4);
}

.cw-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cw-sp-4);
	margin-block-end: var(--cw-sp-6);
}
@media (max-width: 1280px) { .cw-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cw-stat-grid { grid-template-columns: 1fr; } }

.cw-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cw-sp-6);
}
.cw-grid-2 .cw-card { margin-block-end: var(--cw-sp-6); }
@media (max-width: 1100px) { .cw-grid-2 { grid-template-columns: 1fr; } }
.cw-grid-2--top { align-items: start; }

.cw-grid-side {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: var(--cw-sp-6);
	align-items: start;
}
@media (max-width: 1100px) { .cw-grid-side { grid-template-columns: 1fr; } }

/* ==========================================================================
   Stat tiles
   ========================================================================== */

.cw-stat {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-block-end: 0;
	padding: 18px 20px;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.cw-stat:hover {
	border-color: var(--cw-border-strong);
	transform: translateY(-1px);
}
.cw-stat__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: var(--cw-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--cw-border);
}
.cw-stat__icon .dashicons {
	font-size: 21px;
	width: 21px;
	height: 21px;
}
.cw-stat__icon--blue   { background: rgba(138, 180, 255, 0.08); }
.cw-stat__icon--blue .dashicons   { color: var(--cw-blue); }
.cw-stat__icon--green  { background: rgba(74, 222, 156, 0.08); }
.cw-stat__icon--green .dashicons  { color: var(--cw-green); }
.cw-stat__icon--amber  { background: rgba(255, 194, 77, 0.08); }
.cw-stat__icon--amber .dashicons  { color: var(--cw-amber); }
.cw-stat__icon--red    { background: rgba(255, 122, 112, 0.08); }
.cw-stat__icon--red .dashicons    { color: var(--cw-danger); }
.cw-stat__icon--purple { background: rgba(179, 190, 250, 0.08); }
.cw-stat__icon--purple .dashicons { color: var(--cw-purple); }
.cw-stat__icon--navy   { background: rgba(255, 255, 255, 0.07); }
.cw-stat__icon--navy .dashicons   { color: var(--cw-white); }

.cw-stat__label {
	display: block;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	color: var(--cw-muted);
	margin-block-end: 2px;
}
.cw-stat__value {
	display: block;
	font-size: 26px;
	font-weight: 800;
	color: var(--cw-text);
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}
.cw-stat__sub {
	display: block;
	font-size: 11.5px;
	color: var(--cw-muted);
}

/* Trend indicator (dashboard "this month" card) */
.cw-trend {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 1px 8px;
	margin-inline-start: 6px;
	vertical-align: 3px;
}
.cw-trend--up   { color: var(--cw-green);  background: rgba(74, 222, 156, 0.1); }
.cw-trend--down { color: var(--cw-danger); background: rgba(255, 122, 112, 0.1); }
.cw-trend--flat { color: var(--cw-muted);  background: rgba(151, 151, 158, 0.12); }

/* ==========================================================================
   Charts (restyles the inline SVG presentation attributes)
   ========================================================================== */

.cw-chart { width: 100%; height: auto; display: block; }
.cw-chart line { stroke: var(--cw-border); }
.cw-chart polyline { stroke: var(--cw-white); }
.cw-chart circle { fill: var(--cw-canvas); stroke: var(--cw-white); }
.cw-chart stop:first-child { stop-color: var(--cw-white); stop-opacity: 0.16; }
.cw-chart stop:last-child  { stop-color: var(--cw-white); stop-opacity: 0; }
.cw-chart__label { font-size: 11px; fill: var(--cw-muted); }
.cw-chart__value { font-size: 11px; font-weight: 700; fill: var(--cw-text); }

.cw-donut-row {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
.cw-donut { width: 180px; height: 180px; flex: 0 0 auto; }
.cw-donut__num { font-size: 20px; font-weight: 800; fill: var(--cw-text); }
.cw-donut__cap { font-size: 10px; fill: var(--cw-muted); letter-spacing: 0.1em; text-transform: uppercase; }

.cw-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	min-width: 180px;
}
.cw-legend li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-block-end: 1px solid var(--cw-border);
	color: var(--cw-text-2);
}
.cw-legend li:last-child { border-block-end: 0; }
.cw-legend li strong {
	margin-inline-start: auto;
	color: var(--cw-text);
	font-variant-numeric: tabular-nums;
}
.cw-legend__dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex: 0 0 auto;
}

/* ==========================================================================
   Feed lists (dashboard)
   ========================================================================== */

.cw-feed {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cw-feed li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cw-sp-4);
	padding: 12px 10px;
	margin-inline: -10px;
	border-radius: var(--cw-radius-s);
	border-block-end: 1px solid var(--cw-border);
	transition: background 0.12s ease;
}
.cw-feed li:hover { background: var(--cw-surface-2); }
.cw-feed li:last-child { border-block-end: 0; }
.cw-feed__title {
	display: block;
	font-weight: 700;
	color: var(--cw-text);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}
.cw-feed__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.cw-feed__meta {
	display: block;
	font-size: 12.5px;
	color: var(--cw-text-2);
	margin-block-start: 2px;
}

/* Empty states — faint brand pattern at the edges, clear behind the text */
.cw-empty {
	color: var(--cw-muted);
	text-align: center;
	padding: 36px 16px;
	margin: 0;
	border: 1px dashed var(--cw-border-strong);
	border-radius: var(--cw-radius);
	background-color: rgba(255, 255, 255, 0.012);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.cw-empty::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--cw-pattern);
	background-size: var(--cw-pattern-size);
	opacity: var(--cw-pattern-opacity);
	-webkit-mask-image: var(--cw-pattern-fade-edges);
	mask-image: var(--cw-pattern-fade-edges);
	pointer-events: none;
}
.cw-empty a { color: var(--cw-text); font-weight: 600; }

/* ==========================================================================
   Status pills (functional colors)
   ========================================================================== */

.cw-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	border: 1px solid;
}
.cw-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}
.cw-pill--active   { color: var(--cw-green);  background: rgba(74, 222, 156, 0.07);  border-color: rgba(74, 222, 156, 0.3); }
.cw-pill--lifetime { color: var(--cw-blue);   background: rgba(138, 180, 255, 0.07); border-color: rgba(138, 180, 255, 0.3); }
.cw-pill--expiring { color: var(--cw-amber);  background: rgba(255, 194, 77, 0.07);  border-color: rgba(255, 194, 77, 0.3); }
.cw-pill--expired  { color: var(--cw-danger); background: rgba(255, 122, 112, 0.07); border-color: rgba(255, 122, 112, 0.3); }

/* ==========================================================================
   Buttons — white primary action
   ========================================================================== */

.cw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 20px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
		box-shadow 0.15s ease, transform 0.15s ease;
	position: relative;
}
.cw-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }

.cw-btn--primary {
	background: var(--cw-white);
	color: var(--cw-accent-ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.cw-btn--primary:hover,
.cw-btn--primary:focus {
	background: var(--cw-accent-hover);
	color: var(--cw-accent-ink);
	transform: translateY(-1px);
}
.cw-btn--primary:active { transform: none; }

.cw-btn--ghost {
	background: transparent;
	border-color: var(--cw-border-strong);
	color: var(--cw-text-2);
}
.cw-btn--ghost:hover,
.cw-btn--ghost:focus {
	border-color: var(--cw-white);
	color: var(--cw-text);
	background: rgba(255, 255, 255, 0.03);
}

/* Loading state (set by JS on submit) — dark spinner on the white button */
.cw-btn.is-loading { color: transparent !important; pointer-events: none; }
.cw-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(18, 18, 18, 0.3);
	border-block-start-color: var(--cw-black);
	animation: cw-spin 0.7s linear infinite;
}
.cw-btn--ghost.is-loading::after {
	border-color: rgba(255, 255, 255, 0.3);
	border-block-start-color: var(--cw-white);
}
@keyframes cw-spin { to { transform: rotate(360deg); } }

.cw-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--cw-radius-s);
	color: var(--cw-text-2);
	border: 1px solid transparent;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cw-icon-btn:hover {
	background: var(--cw-surface-3);
	border-color: var(--cw-border-strong);
	color: var(--cw-text);
}
.cw-icon-btn--danger { color: var(--cw-danger); }
.cw-icon-btn--danger:hover {
	background: rgba(255, 122, 112, 0.1);
	border-color: rgba(255, 122, 112, 0.35);
	color: var(--cw-danger);
}
.cw-icon-btn .dashicons { font-size: 17px; width: 17px; height: 17px; }

/* ==========================================================================
   Tables — sticky headers, hover states
   ========================================================================== */

.cw-table-scroll {
	overflow: auto;
	max-height: min(72vh, 680px);
	border: 1px solid var(--cw-border);
	border-radius: var(--cw-radius);
	background: var(--cw-surface);
}

.cw-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}
.cw-table th {
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
	text-align: start;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cw-muted);
	padding: 11px 14px;
	background: var(--cw-surface-2);
	border-block-end: 1px solid var(--cw-border-strong);
	white-space: nowrap;
}
.cw-table td {
	padding: 13px 14px;
	border-block-end: 1px solid var(--cw-border);
	vertical-align: middle;
	color: var(--cw-text-2);
}
.cw-table tbody tr { transition: background 0.12s ease; }
.cw-table tbody tr:hover { background: var(--cw-surface-2); }
.cw-table tbody tr:last-child td { border-block-end: 0; }
.cw-table__sub {
	display: block;
	font-size: 12px;
	color: var(--cw-muted);
	margin-block-start: 1px;
}
.cw-table__actions { text-align: end; white-space: nowrap; }

/* ==========================================================================
   Filters & pagination
   ========================================================================== */

.cw-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-block-end: var(--cw-sp-4);
}
.cw-filters input[type="search"] {
	flex: 1;
	min-width: 220px;
}

.cw-pagination {
	margin-block-start: var(--cw-sp-4);
	text-align: center;
}
.cw-pagination .page-numbers {
	display: inline-block;
	min-width: 34px;
	padding: 7px 10px;
	margin-inline: 2px;
	border-radius: var(--cw-radius-s);
	border: 1px solid var(--cw-border);
	background: var(--cw-surface-2);
	color: var(--cw-text-2);
	text-decoration: none;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.cw-pagination .page-numbers:hover {
	border-color: var(--cw-border-strong);
	color: var(--cw-text);
}
.cw-pagination .page-numbers.current {
	background: var(--cw-white);
	border-color: var(--cw-white);
	color: var(--cw-accent-ink);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.cw-form-card { max-width: 900px; }

.cw-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-block-end: 18px;
}
.cw-form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 782px) {
	.cw-form__row,
	.cw-form__row--3 { grid-template-columns: 1fr; }
}

.cw-field label {
	display: block;
	font-weight: 600;
	color: var(--cw-text-2);
	margin-block-end: 6px;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.cw-field--full { grid-column: 1 / -1; }
.cw-req { color: var(--cw-white); }

.cw-wrap input[type="text"],
.cw-wrap input[type="search"],
.cw-wrap input[type="email"],
.cw-wrap input[type="number"],
.cw-wrap input[type="password"],
.cw-wrap input[type="date"],
.cw-wrap select,
.cw-wrap textarea {
	width: 100%;
	max-width: none;
	padding: 9px 12px;
	border: 1px solid var(--cw-border-strong);
	border-radius: 10px;
	background: var(--cw-surface-2);
	color: var(--cw-text);
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
	box-shadow: none;
	min-height: 40px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cw-wrap ::placeholder { color: var(--cw-muted); opacity: 1; }
.cw-wrap select { padding-inline-end: 30px; }
.cw-wrap input:focus,
.cw-wrap select:focus,
.cw-wrap textarea:focus {
	border-color: var(--cw-white);
	box-shadow: var(--cw-ring);
	outline: none;
	background: var(--cw-surface-2);
	color: var(--cw-text);
}

/* Toggle switches — restyles plain checkboxes, no markup change */
.cw-wrap input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 40px;
	height: 22px;
	min-height: 22px;
	border-radius: 999px;
	background: var(--cw-surface-3);
	border: 1px solid var(--cw-border-strong);
	position: relative;
	cursor: pointer;
	vertical-align: -6px;
	margin: 0;
	margin-inline-end: 8px;
	transition: background 0.18s ease, border-color 0.18s ease;
	box-shadow: none;
	flex: 0 0 auto;
}
.cw-wrap input[type="checkbox"]::before { content: none; }
.cw-wrap input[type="checkbox"]::after {
	content: "";
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--cw-text-2);
	transition: inset-inline-start 0.18s ease, background 0.18s ease;
}
.cw-wrap input[type="checkbox"]:checked {
	background: var(--cw-white);
	border-color: var(--cw-white);
}
.cw-wrap input[type="checkbox"]:checked::after {
	inset-inline-start: 20px;
	background: var(--cw-black);
}
.cw-wrap input[type="checkbox"]:focus-visible {
	box-shadow: var(--cw-ring);
	outline: none;
}
.cw-field label:has(input[type="checkbox"]) {
	text-transform: none;
	letter-spacing: normal;
	font-size: 13.5px;
	color: var(--cw-text);
	display: flex;
	align-items: center;
	margin-block-end: 12px;
}

.cw-hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--cw-muted);
}

.cw-fieldset {
	border: 1px solid var(--cw-border);
	border-radius: var(--cw-radius);
	padding: var(--cw-sp-4) 18px var(--cw-sp-1);
	margin: 0 0 18px;
	background: rgba(255, 255, 255, 0.012);
}
.cw-fieldset legend {
	font-weight: 800;
	color: var(--cw-text);
	padding-inline: 8px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.cw-form__actions {
	display: flex;
	gap: 10px;
	justify-content: flex-start;
	border-block-start: 1px solid var(--cw-border);
	margin-block-start: var(--cw-sp-2);
	padding-block-start: var(--cw-sp-4);
}

.cw-inline-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-block-end: 18px;
}
.cw-inline-form input[type="text"],
.cw-inline-form input[type="password"] { flex: 1; min-width: 160px; }
.cw-inline-form input[type="file"] {
	flex: 1;
	min-width: 220px;
	padding: 7px 10px;
	border: 1px dashed var(--cw-border-strong);
	border-radius: 10px;
	background: var(--cw-surface-2);
	color: var(--cw-text-2);
	font-size: 13px;
}
.cw-inline-form input[type="file"]::file-selector-button {
	background: var(--cw-surface-3);
	color: var(--cw-text-2);
	border: 1px solid var(--cw-border-strong);
	border-radius: 8px;
	padding: 4px 12px;
	margin-inline-end: 10px;
	cursor: pointer;
	font-family: inherit;
}
.cw-inline-form select { flex: 0 0 auto; width: auto; min-width: 150px; }

/* Skeleton shimmer (available for async placeholders) */
.cw-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--cw-surface-2);
	border-radius: var(--cw-radius-s);
	min-height: 14px;
}
.cw-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
	animation: cw-shimmer 1.4s infinite;
}
@keyframes cw-shimmer {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}

/* ==========================================================================
   External panel (front-end shortcode)
   ========================================================================== */

.cw-panel {
	background: var(--cw-canvas);
	border-radius: var(--cw-radius-l);
	overflow: hidden;
	border: 1px solid var(--cw-border);
	margin: 0 auto;
	color: var(--cw-text);
	font-family: var(--cw-font);
}
.cw-panel .cw-wrap {
	margin: var(--cw-sp-6);
	border: 0;
	padding: 0;
	background: none;
	border-radius: 0;
}
@media (max-width: 782px) {
	.cw-panel .cw-wrap { margin: var(--cw-sp-4); }
}

.cw-panel__topbar {
	display: flex;
	align-items: center;
	gap: var(--cw-sp-5);
	flex-wrap: wrap;
	background: linear-gradient(180deg, var(--cw-surface-2) 0%, var(--cw-surface) 100%);
	border-block-end: 1px solid var(--cw-border);
	padding: 14px 24px;
}
.cw-panel__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--cw-text);
}
.cw-panel__brand-img {
	height: 40px;
	width: auto;
	display: block;
}
.cw-panel__brand strong {
	display: block;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 800;
}
.cw-panel__brand span:not(.dashicons) {
	display: block;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cw-muted);
}

.cw-panel__nav {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-inline-start: auto;
}
.cw-panel__nav a {
	color: var(--cw-text-2);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: var(--cw-radius-s);
	border: 1px solid transparent;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cw-panel__nav a:hover {
	color: var(--cw-text);
	background: var(--cw-surface-3);
}
.cw-panel__nav a.is-active {
	color: var(--cw-accent-ink);
	background: var(--cw-white);
	border-color: var(--cw-white);
}

.cw-panel__logout {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cw-text-2);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: var(--cw-radius-s);
	border: 1px solid var(--cw-border-strong);
	transition: border-color 0.15s ease, color 0.15s ease;
}
.cw-panel__logout:hover {
	color: var(--cw-text);
	border-color: var(--cw-white);
}
.cw-panel__logout .dashicons { font-size: 15px; width: 15px; height: 15px; }

/* --- Panel login — houndstooth backdrop, lockup on the card ------------- */

.cw-panel-login {
	display: flex;
	justify-content: center;
	padding: 60px 16px;
	background-color: var(--cw-canvas);
	border-radius: var(--cw-radius-l);
	border: 1px solid var(--cw-border);
	font-family: var(--cw-font);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.cw-panel-login::before {
	/* faint houndstooth at the edges; darkest behind the login card */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--cw-pattern);
	background-size: var(--cw-pattern-size);
	opacity: var(--cw-pattern-opacity);
	-webkit-mask-image: var(--cw-pattern-fade-edges);
	mask-image: var(--cw-pattern-fade-edges);
	pointer-events: none;
}
.cw-panel-login__card {
	background: var(--cw-surface);
	border: 1px solid var(--cw-border);
	border-radius: var(--cw-radius-l);
	padding: 34px 36px;
	width: 100%;
	max-width: 400px;
	text-align: center;
	box-shadow: var(--cw-shadow);
	color: var(--cw-text);
}
.cw-panel-login__logo {
	width: min(230px, 80%);
	height: auto;
	margin: 4px auto 18px;
	display: block;
}
.cw-panel-login__card h2 {
	margin: 0 0 4px;
	color: var(--cw-text);
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.cw-panel-login__card p { margin: 0 0 20px; color: var(--cw-muted); }
.cw-panel-login__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 14px;
	background: linear-gradient(160deg, var(--cw-surface-3) 0%, var(--cw-surface-2) 100%);
	border: 1px solid var(--cw-border-strong);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cw-panel-login__icon .dashicons {
	color: var(--cw-white);
	font-size: 28px;
	width: 28px;
	height: 28px;
}
.cw-panel-login__card form { text-align: start; }
.cw-panel-login__card label {
	display: block;
	font-weight: 600;
	color: var(--cw-text-2);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-block-end: 14px;
}
.cw-panel-login__card input {
	display: block;
	width: 100%;
	margin-block-start: 6px;
	padding: 10px 12px;
	border: 1px solid var(--cw-border-strong);
	border-radius: 10px;
	background: var(--cw-surface-2);
	color: var(--cw-text);
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cw-panel-login__card input:focus {
	border-color: var(--cw-white);
	box-shadow: var(--cw-ring);
	outline: none;
}
.cw-panel-login__card .cw-btn {
	width: 100%;
	justify-content: center;
	margin-block-start: 4px;
}
.cw-panel-login__card .cw-notice { text-align: start; }

/* ==========================================================================
   Settings page
   ========================================================================== */

.cw-settings-heading {
	margin: 26px 0 4px !important;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--cw-border);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px !important;
	color: var(--cw-white) !important;
}
.cw-form-card > .cw-settings-heading:first-of-type {
	margin-block-start: 0 !important;
	border-block-start: 0;
	padding-block-start: 0;
}
.cw-shortcode-list {
	margin: 0;
	padding-inline-start: 18px;
	color: var(--cw-text-2);
}
.cw-shortcode-list li { margin-block-end: 8px; }
.cw-shortcode-list code {
	background: var(--cw-surface-2);
	border: 1px solid var(--cw-border);
	color: var(--cw-text);
	padding: 2px 8px;
	border-radius: 6px;
	font-size: 12.5px;
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.cw-wrap *,
	.cw-panel *,
	.cw-panel-login * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}