/**
 * R2 Site Feedback — Component primitives (v2.0.0)
 *
 * Single source of truth for buttons / inputs / chips / cards / skeleton /
 * tabs / modal / toast / empty-state / avatar.
 *
 * All scoped to .r2fb-v2.
 */

/* ========================================================================
 * Buttons
 * ====================================================================== */
.r2fb-v2 .r2fb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--r2fb-s-2);
	padding: 0 var(--r2fb-s-4);
	height: 36px;
	min-width: 36px;
	font-family: inherit;
	font-size: var(--r2fb-fs-md);
	font-weight: var(--r2fb-fw-medium);
	line-height: 1;
	color: var(--r2fb-text);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--r2fb-r-md);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	transition: background-color var(--r2fb-dur) var(--r2fb-ease),
	            border-color var(--r2fb-dur) var(--r2fb-ease),
	            color var(--r2fb-dur) var(--r2fb-ease),
	            box-shadow var(--r2fb-dur) var(--r2fb-ease),
	            transform var(--r2fb-dur-fast) var(--r2fb-ease);
}

.r2fb-v2 .r2fb-btn:active  { transform: translateY(1px); }
.r2fb-v2 .r2fb-btn[disabled],
.r2fb-v2 .r2fb-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.r2fb-v2 .r2fb-btn svg { flex: 0 0 auto; width: 16px; height: 16px; }

/* variants */
.r2fb-v2 .r2fb-btn--primary {
	background: var(--r2fb-accent);
	color: var(--r2fb-text-inverse);
}
.r2fb-v2 .r2fb-btn--primary:hover:not(:disabled) {
	background: var(--r2fb-accent-hover);
}

.r2fb-v2 .r2fb-btn--subtle {
	background: var(--r2fb-bg-muted);
	color: var(--r2fb-text);
}
.r2fb-v2 .r2fb-btn--subtle:hover:not(:disabled) {
	background: var(--r2fb-bg-subtle);
}

.r2fb-v2 .r2fb-btn--ghost {
	background: transparent;
	color: var(--r2fb-text);
}
.r2fb-v2 .r2fb-btn--ghost:hover:not(:disabled) {
	background: var(--r2fb-bg-muted);
}

.r2fb-v2 .r2fb-btn--outline {
	border-color: var(--r2fb-border);
	color: var(--r2fb-text);
	background: var(--r2fb-bg-card);
}
.r2fb-v2 .r2fb-btn--outline:hover:not(:disabled) {
	border-color: var(--r2fb-border-strong);
	background: var(--r2fb-bg-muted);
}

.r2fb-v2 .r2fb-btn--danger {
	background: var(--r2fb-danger);
	color: var(--r2fb-text-inverse);
}
.r2fb-v2 .r2fb-btn--danger:hover:not(:disabled) {
	background: #A93D33;
}

.r2fb-v2 .r2fb-btn--icon {
	padding: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--r2fb-r-md);
	background: transparent;
	color: var(--r2fb-text-muted);
}
.r2fb-v2 .r2fb-btn--icon:hover:not(:disabled) {
	background: var(--r2fb-bg-muted);
	color: var(--r2fb-text);
}

/* sizes */
.r2fb-v2 .r2fb-btn--sm { height: 28px; padding: 0 var(--r2fb-s-3); font-size: var(--r2fb-fs-sm); }
.r2fb-v2 .r2fb-btn--sm.r2fb-btn--icon { width: 28px; padding: 0; }
.r2fb-v2 .r2fb-btn--lg { height: 44px; padding: 0 var(--r2fb-s-5); font-size: var(--r2fb-fs-base); }
.r2fb-v2 .r2fb-btn--block { width: 100%; }

/* loading */
.r2fb-v2 .r2fb-btn.is-loading {
	pointer-events: none;
	position: relative;
	color: transparent !important;
}
.r2fb-v2 .r2fb-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 14px; height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--r2fb-text-inverse);
	animation: r2fb-spin .8s linear infinite;
}
.r2fb-v2 .r2fb-btn--subtle.is-loading::after,
.r2fb-v2 .r2fb-btn--ghost.is-loading::after,
.r2fb-v2 .r2fb-btn--outline.is-loading::after,
.r2fb-v2 .r2fb-btn--icon.is-loading::after { color: var(--r2fb-text); }

/* ========================================================================
 * Inputs
 * ====================================================================== */
.r2fb-v2 .r2fb-input,
.r2fb-v2 .r2fb-textarea,
.r2fb-v2 .r2fb-select {
	display: block;
	width: 100%;
	font-family: inherit;
	font-size: var(--r2fb-fs-md);
	line-height: var(--r2fb-lh-body);
	color: var(--r2fb-text);
	background: var(--r2fb-bg-card);
	border: 1px solid var(--r2fb-border);
	border-radius: var(--r2fb-r-md);
	padding: var(--r2fb-s-2) var(--r2fb-s-3);
	min-height: 36px;
	transition: border-color var(--r2fb-dur) var(--r2fb-ease),
	            box-shadow var(--r2fb-dur) var(--r2fb-ease),
	            background-color var(--r2fb-dur) var(--r2fb-ease);
}

.r2fb-v2 .r2fb-input::placeholder,
.r2fb-v2 .r2fb-textarea::placeholder {
	color: var(--r2fb-text-soft);
}

.r2fb-v2 .r2fb-input:hover,
.r2fb-v2 .r2fb-textarea:hover,
.r2fb-v2 .r2fb-select:hover { border-color: var(--r2fb-border-strong); }

.r2fb-v2 .r2fb-input:focus,
.r2fb-v2 .r2fb-textarea:focus,
.r2fb-v2 .r2fb-select:focus {
	outline: none;
	border-color: var(--r2fb-accent);
	box-shadow: 0 0 0 3px var(--r2fb-accent-soft);
}

.r2fb-v2 .r2fb-textarea {
	min-height: 92px;
	resize: vertical;
	padding: var(--r2fb-s-3);
}

.r2fb-v2 .r2fb-label {
	display: block;
	font-size: var(--r2fb-fs-sm);
	font-weight: var(--r2fb-fw-medium);
	color: var(--r2fb-text);
	margin-bottom: var(--r2fb-s-2);
}

.r2fb-v2 .r2fb-help {
	font-size: var(--r2fb-fs-sm);
	color: var(--r2fb-text-muted);
	margin-top: var(--r2fb-s-2);
	line-height: var(--r2fb-lh-dense);
}

.r2fb-v2 .r2fb-field { margin-bottom: var(--r2fb-s-4); }

/* ========================================================================
 * Chips / status pills
 * ====================================================================== */
.r2fb-v2 .r2fb-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--r2fb-s-1);
	padding: 2px var(--r2fb-s-2);
	font-size: var(--r2fb-fs-xs);
	font-weight: var(--r2fb-fw-medium);
	line-height: 1.4;
	color: var(--r2fb-text);
	background: var(--r2fb-bg-muted);
	border-radius: var(--r2fb-r-pill);
	border: 1px solid transparent;
	white-space: nowrap;
}

.r2fb-v2 .r2fb-chip--open       { background: var(--r2fb-warning-soft); color: #8A6314; }
.r2fb-v2 .r2fb-chip--in-progress,
.r2fb-v2 .r2fb-chip--in_progress { background: var(--r2fb-info-soft);    color: #2E506D; }
.r2fb-v2 .r2fb-chip--resolved   { background: var(--r2fb-success-soft); color: #2E6A47; }
.r2fb-v2 .r2fb-chip--danger     { background: var(--r2fb-danger-soft);  color: #8B2C24; }

.r2fb-v2 .r2fb-chip--priority-high   { background: var(--r2fb-danger-soft);  color: #8B2C24; }
.r2fb-v2 .r2fb-chip--priority-normal { background: var(--r2fb-bg-muted);     color: var(--r2fb-text-muted); }
.r2fb-v2 .r2fb-chip--priority-low    { background: var(--r2fb-info-soft);    color: #2E506D; }

/* 2.2.0 — Source chip: marks feedback submitted from inside wp-admin.
   Uses a WP-admin-blue tint so it reads as "this is about the CMS itself"
   and visually separates from status/priority chips which use warm tokens. */
.r2fb-v2 .r2fb-chip--cms {
	background: rgba(34, 113, 177, 0.12);
	color: #0A4B78;
	border-color: rgba(34, 113, 177, 0.25);
}

.r2fb-v2 .r2fb-chip__dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	display: inline-block;
}

/* ========================================================================
 * Cards
 * ====================================================================== */
.r2fb-v2 .r2fb-card {
	background: var(--r2fb-bg-card);
	border: 1px solid var(--r2fb-border);
	border-radius: var(--r2fb-r-lg);
	padding: var(--r2fb-s-4);
	box-shadow: var(--r2fb-shadow-1);
	transition: transform var(--r2fb-dur) var(--r2fb-ease),
	            box-shadow var(--r2fb-dur) var(--r2fb-ease),
	            border-color var(--r2fb-dur) var(--r2fb-ease);
}

.r2fb-v2 .r2fb-card--hover:hover {
	transform: translateY(-1px);
	box-shadow: var(--r2fb-shadow-3);
	border-color: var(--r2fb-border-strong);
}

.r2fb-v2 .r2fb-card--active {
	border-color: var(--r2fb-accent);
	box-shadow: 0 0 0 3px var(--r2fb-accent-soft);
}

/* ========================================================================
 * Skeleton loaders
 * ====================================================================== */
.r2fb-v2 .r2fb-skeleton {
	display: block;
	background: linear-gradient(
		90deg,
		var(--r2fb-bg-muted) 0%,
		var(--r2fb-bg-subtle) 50%,
		var(--r2fb-bg-muted) 100%
	);
	background-size: 200% 100%;
	animation: r2fb-shimmer 1.4s linear infinite;
	border-radius: var(--r2fb-r-sm);
	height: 12px;
}

.r2fb-v2 .r2fb-skeleton--text { height: 14px; width: 80%; margin-bottom: var(--r2fb-s-2); }
.r2fb-v2 .r2fb-skeleton--title { height: 20px; width: 60%; margin-bottom: var(--r2fb-s-3); }
.r2fb-v2 .r2fb-skeleton--block { height: 80px; width: 100%; border-radius: var(--r2fb-r-md); }

/* ========================================================================
 * Avatar
 * ====================================================================== */
.r2fb-v2 .r2fb-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	color: #FFF;
	font-size: var(--r2fb-fs-xs);
	font-weight: var(--r2fb-fw-semi);
	letter-spacing: .02em;
	text-transform: uppercase;
	flex: 0 0 auto;
	background: linear-gradient(135deg, #E8624A, #D2523C);
	user-select: none;
}
.r2fb-v2 .r2fb-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.r2fb-v2 .r2fb-avatar--lg { width: 40px; height: 40px; font-size: var(--r2fb-fs-sm); }
.r2fb-v2 .r2fb-avatar--admin {
	background: linear-gradient(135deg, #527E9B, #385E7B);
}

/* ========================================================================
 * Tabs (underline style)
 * ====================================================================== */
.r2fb-v2 .r2fb-tabs {
	display: flex;
	gap: var(--r2fb-s-1);
	border-bottom: 1px solid var(--r2fb-border-soft);
}

.r2fb-v2 .r2fb-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--r2fb-s-2);
	padding: var(--r2fb-s-2) var(--r2fb-s-3);
	font-size: var(--r2fb-fs-sm);
	font-weight: var(--r2fb-fw-medium);
	color: var(--r2fb-text-muted);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-family: inherit;
	transition: color var(--r2fb-dur) var(--r2fb-ease),
	            border-color var(--r2fb-dur) var(--r2fb-ease);
	margin-bottom: -1px;
}

.r2fb-v2 .r2fb-tab:hover { color: var(--r2fb-text); }

.r2fb-v2 .r2fb-tab.is-active {
	color: var(--r2fb-text);
	border-bottom-color: var(--r2fb-accent);
}

.r2fb-v2 .r2fb-tab__count {
	font-size: var(--r2fb-fs-xs);
	padding: 1px 6px;
	background: var(--r2fb-bg-muted);
	color: var(--r2fb-text-muted);
	border-radius: var(--r2fb-r-pill);
}

.r2fb-v2 .r2fb-tab.is-active .r2fb-tab__count {
	background: var(--r2fb-accent-soft);
	color: var(--r2fb-accent-strong);
}

/* ========================================================================
 * Modal (used by R2FB_UI.modal)
 * ====================================================================== */
.r2fb-modal-layer { /* ambient, no layout */ }

.r2fb-v2.r2fb-modal-layer,
.r2fb-modal-layer.r2fb-v2 {
	position: fixed; inset: 0;
	pointer-events: none;
	z-index: var(--r2fb-z-modal, 2147483700);
}

.r2fb-v2 .r2fb-modal__backdrop {
	position: fixed; inset: 0;
	background: var(--r2fb-bg-overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--r2fb-s-4);
	pointer-events: auto;
	animation: r2fb-fade-in .18s var(--r2fb-ease);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.r2fb-v2 .r2fb-modal__backdrop.is-closing {
	animation: r2fb-fade-out .16s var(--r2fb-ease) forwards;
}

.r2fb-v2 .r2fb-modal {
	background: var(--r2fb-bg-card);
	border-radius: var(--r2fb-r-lg);
	box-shadow: var(--r2fb-shadow-4);
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - var(--r2fb-s-8));
	display: flex;
	flex-direction: column;
	animation: r2fb-pop-in .2s var(--r2fb-ease);
}

.r2fb-v2 .r2fb-modal--sm { max-width: 420px; }
.r2fb-v2 .r2fb-modal--lg { max-width: 720px; }
.r2fb-v2 .r2fb-modal--xl { max-width: 1080px; }
.r2fb-v2 .r2fb-modal--full {
	max-width: none; max-height: none;
	width: calc(100vw - var(--r2fb-s-8));
	height: calc(100vh - var(--r2fb-s-8));
}

.r2fb-v2 .r2fb-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r2fb-s-3);
	padding: var(--r2fb-s-4) var(--r2fb-s-5);
	border-bottom: 1px solid var(--r2fb-border-soft);
}

.r2fb-v2 .r2fb-modal__title {
	font-size: var(--r2fb-fs-lg);
	font-weight: var(--r2fb-fw-semi);
	margin: 0;
}

.r2fb-v2 .r2fb-modal__close {
	width: 32px; height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: var(--r2fb-r-md);
	color: var(--r2fb-text-muted);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	flex: 0 0 auto;
}

.r2fb-v2 .r2fb-modal__close:hover {
	background: var(--r2fb-bg-muted);
	color: var(--r2fb-text);
}

.r2fb-v2 .r2fb-modal__body {
	padding: var(--r2fb-s-5);
	overflow-y: auto;
	flex: 1 1 auto;
	line-height: var(--r2fb-lh-body);
}

.r2fb-v2 .r2fb-modal__message { margin: 0; color: var(--r2fb-text); }

.r2fb-v2 .r2fb-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--r2fb-s-2);
	padding: var(--r2fb-s-4) var(--r2fb-s-5);
	border-top: 1px solid var(--r2fb-border-soft);
	background: var(--r2fb-bg-page);
	border-radius: 0 0 var(--r2fb-r-lg) var(--r2fb-r-lg);
}

/* ========================================================================
 * Toast
 * ====================================================================== */
.r2fb-v2.r2fb-toast-layer,
.r2fb-toast-layer.r2fb-v2 {
	position: fixed;
	bottom: var(--r2fb-s-5);
	right: var(--r2fb-s-5);
	display: flex;
	flex-direction: column;
	gap: var(--r2fb-s-2);
	z-index: var(--r2fb-z-toast, 2147483800);
	pointer-events: none;
	max-width: 360px;
}

.r2fb-v2 .r2fb-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--r2fb-s-3);
	padding: var(--r2fb-s-3) var(--r2fb-s-4);
	background: var(--r2fb-bg-card);
	border: 1px solid var(--r2fb-border-soft);
	border-radius: var(--r2fb-r-md);
	box-shadow: var(--r2fb-shadow-3);
	font-size: var(--r2fb-fs-sm);
	color: var(--r2fb-text);
	pointer-events: auto;
	animation: r2fb-slide-up .22s var(--r2fb-ease);
	line-height: var(--r2fb-lh-dense);
}

.r2fb-v2 .r2fb-toast.is-closing { animation: r2fb-fade-out .2s var(--r2fb-ease) forwards; }

.r2fb-v2 .r2fb-toast__icon { flex: 0 0 auto; color: var(--r2fb-info); }
.r2fb-v2 .r2fb-toast--success .r2fb-toast__icon { color: var(--r2fb-success); }
.r2fb-v2 .r2fb-toast--error   .r2fb-toast__icon { color: var(--r2fb-danger); }
.r2fb-v2 .r2fb-toast--warning .r2fb-toast__icon { color: var(--r2fb-warning); }

.r2fb-v2 .r2fb-toast__body { flex: 1 1 auto; }

.r2fb-v2 .r2fb-toast__close {
	flex: 0 0 auto;
	background: transparent;
	border: none;
	color: var(--r2fb-text-soft);
	font-size: 14px;
	cursor: pointer;
	padding: 0;
	width: 20px; height: 20px;
	line-height: 1;
	border-radius: var(--r2fb-r-xs);
}
.r2fb-v2 .r2fb-toast__close:hover { color: var(--r2fb-text); background: var(--r2fb-bg-muted); }

/* ========================================================================
 * Empty state
 * ====================================================================== */
.r2fb-v2 .r2fb-empty {
	padding: var(--r2fb-s-12) var(--r2fb-s-6);
	text-align: center;
	color: var(--r2fb-text-muted);
}

.r2fb-v2 .r2fb-empty__icon {
	width: 72px; height: 72px;
	margin: 0 auto var(--r2fb-s-4);
	color: var(--r2fb-text-soft);
	opacity: .8;
}

.r2fb-v2 .r2fb-empty__title {
	font-family: var(--r2fb-font-serif);
	font-size: var(--r2fb-fs-2xl);
	font-weight: var(--r2fb-fw-medium);
	color: var(--r2fb-text);
	margin-bottom: var(--r2fb-s-2);
	letter-spacing: -.01em;
}

.r2fb-v2 .r2fb-empty__body { font-size: var(--r2fb-fs-md); max-width: 380px; margin: 0 auto; }

/* ========================================================================
 * Switch
 *
 * Markup contract:
 *   <label class="r2fb-switch">
 *     <input type="checkbox" …>
 *     <span class="r2fb-switch__track" aria-hidden="true">
 *       <span class="r2fb-switch__thumb"></span>
 *     </span>
 *     <span class="r2fb-switch__label">…</span>
 *   </label>
 *
 * We target the raw <input type="checkbox"> directly (no class required on
 * the input), and drive the real .r2fb-switch__thumb span — never a ::before
 * pseudo. This keeps the two in sync with the PHP templates.
 * ====================================================================== */
.r2fb-v2 .r2fb-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--r2fb-s-3);
	cursor: pointer;
	user-select: none;
}

.r2fb-v2 .r2fb-switch input[type="checkbox"],
.r2fb-v2 .r2fb-switch__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
}

.r2fb-v2 .r2fb-switch__track {
	width: 40px;
	height: 24px;
	background: var(--r2fb-bg-subtle);
	border: 1px solid var(--r2fb-border);
	border-radius: var(--r2fb-r-pill);
	position: relative;
	transition: background-color var(--r2fb-dur) var(--r2fb-ease), border-color var(--r2fb-dur) var(--r2fb-ease);
	flex: 0 0 auto;
}

.r2fb-v2 .r2fb-switch__thumb {
	position: absolute;
	top: 1px;
	left: 1px;
	width: 20px;
	height: 20px;
	background: var(--r2fb-bg-card);
	border-radius: 50%;
	box-shadow: var(--r2fb-shadow-1);
	transition: transform var(--r2fb-dur) var(--r2fb-ease);
}

.r2fb-v2 .r2fb-switch input[type="checkbox"]:checked + .r2fb-switch__track,
.r2fb-v2 .r2fb-switch__input:checked + .r2fb-switch__track {
	background: var(--r2fb-accent);
	border-color: var(--r2fb-accent);
}

.r2fb-v2 .r2fb-switch input[type="checkbox"]:checked + .r2fb-switch__track .r2fb-switch__thumb,
.r2fb-v2 .r2fb-switch__input:checked + .r2fb-switch__track .r2fb-switch__thumb {
	transform: translateX(16px);
}

.r2fb-v2 .r2fb-switch input[type="checkbox"]:focus-visible + .r2fb-switch__track,
.r2fb-v2 .r2fb-switch__input:focus-visible + .r2fb-switch__track {
	box-shadow: var(--r2fb-shadow-focus);
}

.r2fb-v2 .r2fb-switch input[type="checkbox"]:disabled + .r2fb-switch__track,
.r2fb-v2 .r2fb-switch__input:disabled + .r2fb-switch__track {
	opacity: .5;
	cursor: not-allowed;
}

.r2fb-v2 .r2fb-switch__label {
	font-size: var(--r2fb-fs-sm);
	color: var(--r2fb-text);
	line-height: 1.4;
}

/* ========================================================================
 * Priority dot
 * ====================================================================== */
.r2fb-v2 .r2fb-priority-dot {
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
	vertical-align: middle;
}
.r2fb-v2 .r2fb-priority-dot--high   { background: var(--r2fb-danger); }
.r2fb-v2 .r2fb-priority-dot--normal { background: var(--r2fb-text-soft); }
.r2fb-v2 .r2fb-priority-dot--low    { background: var(--r2fb-info); }

/* ========================================================================
 * Badge (count)
 * ====================================================================== */
.r2fb-v2 .r2fb-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: var(--r2fb-fs-xs);
	font-weight: var(--r2fb-fw-semi);
	color: var(--r2fb-text-inverse);
	background: var(--r2fb-accent);
	border-radius: var(--r2fb-r-pill);
	line-height: 1;
}
.r2fb-v2 .r2fb-badge--neutral { background: var(--r2fb-text-muted); }
.r2fb-v2 .r2fb-badge--success { background: var(--r2fb-success); }