/**
 * CJ's Brew & BBQ - Recipe Profile Styles
 * UPDATED: Jan 18, 2026 - v3.1.0 Design System Token Consolidation
 * Implements: Card Grid, Recipe Card (Standard), Recipe Badge, Variation Indicator, Empty State, Filter Bar
 * Reference: docs/design-system.md (CANON)
 */

/* Import design system tokens from brand-colors.css */
@import url('brand-colors.css');

/* =======================================
   MY RECIPES CONTAINER
   ======================================= */

.cjbb-my-recipes-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-6);
	font-family: var(--font-body);
}

/* =======================================
   FILTER BAR (design-system.md:395-419)
   ======================================= */

.cjbb-recipes-filters {
	background: var(--bg-secondary);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-8);
}

.cjbb-filter-form {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	align-items: center;
}

.cjbb-filter-form .filter-group {
	flex: 1;
	min-width: 140px;
}

.cjbb-filter-form input,
.cjbb-filter-form select {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	font-family: var(--font-body);
	background: var(--bg-primary);
	color: var(--text-primary);
	min-height: 44px;
	line-height: var(--leading-normal);
	transition: border-color 200ms, box-shadow 200ms;
}

.cjbb-filter-form input:focus,
.cjbb-filter-form select:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
	border-color: var(--brand-primary);
}

.cjbb-filter-btn {
	background: var(--brand-primary);
	color: var(--neutral-000);
	border: none;
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-weight: var(--font-medium);
	font-size: var(--text-base);
	cursor: pointer;
	min-height: 44px;
	transition: background 200ms;
}

.cjbb-filter-btn:hover {
	background: var(--brand-primary-dark);
}

.cjbb-filter-btn:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

/* Favourites Filter Button (Filter Bar component - design-system.md:949-975) */
.cjbb-favourites-filter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	background: transparent;
	border: 2px solid var(--border-strong);
	color: var(--text-primary);
	cursor: pointer;
	transition: all 200ms;
	white-space: nowrap;
}

.cjbb-favourites-filter-btn .filter-icon {
	font-size: 1.25rem;
	line-height: 1;
}

.cjbb-favourites-filter-btn:hover {
	background: var(--bg-secondary);
	border-color: var(--brand-primary);
}

.cjbb-favourites-filter-btn:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

.cjbb-favourites-filter-btn.active {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
	color: var(--neutral-000);
}

/* =======================================
   VIEW CONTROLS ROW
   Container between Filter Bar and Recipe Grid
   ======================================= */

.cjbb-view-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	padding: 0 var(--space-1);
}

/* =======================================
   VIEW TOGGLE (design-system.md:977-1055)
   ======================================= */

.cjbb-view-toggle {
	display: inline-flex;
	gap: 0;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-left: auto;
	flex-shrink: 0;
}

.cjbb-view-toggle-btn {
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-right: 1px solid var(--border-default);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-tertiary);
	transition: background 200ms, color 200ms;
}

.cjbb-view-toggle-btn:last-child {
	border-right: none;
}

.cjbb-view-toggle-btn:hover {
	background: var(--bg-tertiary);
}

.cjbb-view-toggle-btn.active {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

.cjbb-view-toggle-btn:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: -2px;
}

.cjbb-view-toggle-btn svg {
	width: 20px;
	height: 20px;
}

/* Hide toggle on mobile - list view is automatic */
@media (max-width: 767px) {
	.cjbb-view-toggle {
		display: none;
	}
}

/* =======================================
   CARD GRID (design-system.md:718-723)
   ======================================= */

.cjbb-recipes-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	margin-bottom: var(--space-8);
}

/* Grid view: Show cards, hide list items */
.cjbb-recipes-grid .cjbb-recipe-list-item {
	display: none;
}

/* List view: Hide cards, show list items */
.cjbb-recipes-grid.view-list {
	grid-template-columns: 1fr;
	gap: 0;
}

.cjbb-recipes-grid.view-list .cjbb-recipe-card-standard {
	display: none;
}

.cjbb-recipes-grid.view-list .cjbb-recipe-list-item {
	display: flex;
}

/* Mobile: Force list view */
@media (max-width: 767px) {
	.cjbb-recipes-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.cjbb-recipes-grid .cjbb-recipe-card-standard {
		display: none;
	}

	.cjbb-recipes-grid .cjbb-recipe-list-item {
		display: flex;
	}
}

/* =======================================
   RECIPE LIST ITEM (design-system.md:290-404)
   ======================================= */

.cjbb-recipe-list-item {
	display: flex;
	align-items: center;
	height: 88px;
	padding: var(--space-3);
	gap: var(--space-3);
	background: var(--bg-primary);
	border-bottom: 1px solid var(--border-subtle);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: background 200ms;
}

.cjbb-recipe-list-item:hover {
	background: var(--bg-secondary);
}

.cjbb-recipe-list-item:active {
	background: var(--bg-tertiary);
}

.cjbb-recipe-list-item:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: -2px;
}

/* Thumbnail */
.list-item-thumbnail {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--bg-secondary);
	flex-shrink: 0;
}

.list-item-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.list-item-thumbnail-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	opacity: 0.5;
}

/* Content Block */
.list-item-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-1);
	flex: 1;
	min-width: 0;
}

/* Row 1: Title */
.list-item-title {
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	font-family: var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: var(--leading-tight);
}

/* Row 2: Badges */
.list-item-badges {
	display: flex;
	gap: var(--space-2);
	align-items: center;
}

/* Row 3: Original Author */
.list-item-author {
	display: flex;
	gap: var(--space-1);
	align-items: center;
	font-size: var(--text-xs);
	color: var(--text-secondary);
}

.list-item-author .author-star {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}

.list-item-author .author-star svg {
	width: 100%;
	height: 100%;
}

/* Overflow Menu */
.list-item-overflow {
	flex-shrink: 0;
	position: relative;
}

.list-item-overflow-btn {
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-tertiary);
	transition: background 200ms;
}

.list-item-overflow-btn:hover {
	background: var(--bg-secondary);
}

.list-item-overflow-btn:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

.list-item-overflow-btn svg {
	width: 20px;
	height: 20px;
}

/* Overflow Dropdown Menu */
.list-item-overflow-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background: var(--bg-primary);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	min-width: 160px;
	z-index: 100;
	overflow: hidden;
}

.list-item-overflow-menu.show {
	display: block;
}

.overflow-menu-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-3) var(--space-4);
	background: transparent;
	border: none;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-primary);
	cursor: pointer;
	text-decoration: none;
	transition: background 200ms;
}

.overflow-menu-item:hover {
	background: var(--bg-secondary);
}

.overflow-menu-item .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* =======================================
   RECIPE CARD (STANDARD) (design-system.md:253-271)
   ======================================= */

.cjbb-recipe-card-standard {
	background: var(--bg-primary);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	min-width: 280px;
	max-width: 400px;
	min-height: 320px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: box-shadow 200ms, transform 200ms;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}

.cjbb-recipe-card-standard:hover {
	outline: 2px solid var(--brand-primary);
	outline-offset: 0px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Zoom only the image on hover, not the whole card */
.cjbb-recipe-card-standard:hover .recipe-card-image img {
	transform: scale(1.05);
}

.cjbb-recipe-card-standard:focus-within {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

/* Card Image (16:9 aspect ratio) */
.recipe-card-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bg-secondary);
}

.recipe-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

.recipe-card-image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--text-tertiary);
	font-size: var(--text-sm);
	gap: var(--space-2);
}

.recipe-card-image-placeholder-icon {
	font-size: 48px;
	opacity: 0.5;
}

/* Card Content */
.recipe-card-content {
	background: #F3F4F6;
	padding: var(--space-3);
	padding-bottom: 75px;
	display: flex;
	flex-direction: column;
	flex: 1;
	position: relative;
}

html.theme-dark .recipe-card-content {
	background: #1A1A1A;
}

/* Card Title */
h3.recipe-card-title {
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	font-family: var(--font-body);
	color: var(--text-primary);
	margin-top: 10.616px !important;
	margin-bottom: 31.848px !important;
	line-height: var(--leading-tight);
}

/* Grid mode only - increase title margins by 20% */
.cjbb-recipes-grid:not(.view-list) h3.recipe-card-title {
	margin-top: 12.7392px !important;
	margin-bottom: 38.2176px !important;
}

/* Card Meta Row - positioned 2px above actions, anchored to bottom */
.recipe-card-meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	position: absolute;
	bottom: 58.5px;
	left: var(--space-3);
	right: var(--space-3);
}

/* Card Meta Item - inline text for ABV/IBU etc. */
.recipe-card-meta-item {
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	color: var(--text-secondary);
	white-space: nowrap;
}

html.theme-dark .recipe-card-meta-item {
	color: var(--dark-text-secondary);
}

/* Card Info Row - rating + time */
.recipe-card-info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-2);
	padding: 0 var(--space-3);
	margin-bottom: var(--space-2);
}

.recipe-card-rating {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	font-size: 13px;
}

.recipe-card-rating .star {
	color: #ddd;
}

.recipe-card-rating .star.filled {
	color: #f59e0b;
}

.recipe-card-rating .rating-count {
	font-size: 11px;
	color: var(--text-tertiary);
	margin-left: 3px;
}

.recipe-card-time {
	font-size: 11px;
	color: var(--text-tertiary);
	white-space: nowrap;
}

html.theme-dark .recipe-card-rating .star {
	color: #444;
}

html.theme-dark .recipe-card-rating .star.filled {
	color: #f59e0b;
}

html.theme-dark .recipe-card-rating .rating-count,
html.theme-dark .recipe-card-time {
	color: var(--dark-text-tertiary);
}

/* Card Actions - anchored 4px from bottom */
.recipe-card-actions {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	position: absolute;
	bottom: 10px;
	left: var(--space-3);
	right: var(--space-3);
}

/* All card action buttons - consistent 40.5px height */
.recipe-card-actions .cjbb-btn {
	height: 40.5px;
	min-height: 40.5px;
}

/* Primary action button - rounded, takes most width */
.recipe-card-actions .cjbb-btn-primary {
	flex: 1;
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	transition: all 0.3s ease;
}

.recipe-card-actions .cjbb-btn-primary:hover {
	transform: scale(1.05);
}

/* Secondary button (Edit) */
.recipe-card-actions .cjbb-btn-secondary {
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	transition: all 0.3s ease;
}

.recipe-card-actions .cjbb-btn-secondary:hover {
	transform: scale(1.05);
}

/* Icon button style for secondary actions (delete, etc.) - matches cjbb-btn-secondary exactly */
.recipe-card-actions .cjbb-btn.cjbb-btn-icon {
	width: 40.5px;
	padding: 0 !important;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: transparent !important;
	border: 2px solid var(--border-strong) !important;
	color: var(--text-primary) !important;
	cursor: pointer;
	transition: all 0.3s ease;
}

.recipe-card-actions .cjbb-btn.cjbb-btn-icon:hover {
	background: var(--bg-secondary) !important;
	color: var(--text-primary) !important;
	transform: scale(1.05);
}

/* Ensure crisp icon rendering */
.recipe-card-actions .cjbb-btn.cjbb-btn-icon .dashicons,
.recipe-card-actions .cjbb-btn.cjbb-btn-icon i,
.recipe-card-actions .cjbb-btn.cjbb-btn-icon svg {
	font-size: 20px;
	width: 20px;
	height: 20px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* =======================================
   RECIPE BADGE (design-system.md:423-503)
   ======================================= */

.recipe-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	min-height: 24px;
	max-width: fit-content;
	line-height: var(--leading-tight);
}

/* Base Badge - Container - positioned in card top-left corner */
.recipe-badge-base {
	background: transparent;
	border: none;
	color: var(--text-primary);
	/* Position in top-left of CARD (now a direct child of the card) */
	position: absolute;
	top: 2px;
	left: 2px;
	z-index: 10;
	/* Layout with flex */
	display: flex;
	align-items: center;
	gap: 0;
	width: 28px;
	min-width: 28px;
	border-radius: var(--radius-sm) 0 var(--radius-sm) 0;
	padding: var(--space-2) !important;
	transition: all 300ms ease;
	box-shadow: none;
}

/* Star icon - always visible, sized */
.recipe-badge-base .badge-star {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
}

.recipe-badge-base .badge-star svg {
	width: 100%;
	height: 100%;
}

/* Info text - hidden by default */
.recipe-badge-base .badge-info {
	display: none;
	white-space: nowrap;
	font-size: inherit;
	padding-left: var(--space-2);
}

/* Show both star and info on hover - separate display */
.recipe-badge-base:hover,
.recipe-badge-base.active {
	width: fit-content;
	min-width: 28px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-default);
	padding: var(--space-1) var(--space-3) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	gap: var(--space-1);
}

.recipe-badge-base:hover .badge-info,
.recipe-badge-base.active .badge-info {
	display: inline-block;
}

/* Category Badge (Primary) - no background, text only */
.recipe-badge-primary {
	background: transparent !important;
	border: none !important;
	color: var(--text-primary) !important;
	font-weight: var(--font-medium);
	font-size: 0.9375rem !important; /* 25% larger than 0.75rem (text-xs) */
}

/* Dark mode - orange text */
html.theme-dark .recipe-badge-primary {
	background: transparent !important;
	border: none !important;
	color: var(--brand-primary) !important;
	font-size: 0.9375rem !important; /* 25% larger than 0.75rem (text-xs) */
}

/* Subcategory Badge (Neutral) */
.recipe-badge-neutral {
	background: var(--bg-tertiary);
	border: 1px solid var(--border-default);
	color: var(--text-primary);
	font-weight: var(--font-normal);
}

/* Difficulty Badges (Semantic) */
.recipe-badge-difficulty {
	font-weight: var(--font-medium);
	font-size: var(--text-xs);
	padding: var(--space-1) var(--space-2);
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	border-radius: var(--radius-sm);
}

.recipe-badge-difficulty-beginner {
	background: var(--success);
	color: var(--neutral-000);
	border: 1px solid var(--success);
}

.recipe-badge-difficulty-intermediate {
	background: var(--warning);
	color: var(--neutral-900);
	border: 1px solid var(--warning);
}

.recipe-badge-difficulty-advanced {
	background: var(--error);
	color: var(--neutral-000);
	border: 1px solid var(--error);
}

/* Badge Layout */
.recipe-badges {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	align-items: center;
}

/* =======================================
   VARIATION INDICATOR (design-system.md:507-597)
   ======================================= */

/* Override global Kadence/BuddyPress button styles - must use !important */
.variation-indicator {
	background: var(--bg-secondary) !important;
	border: 1px solid var(--border-default) !important;
	padding: var(--space-1) var(--space-2) !important;
	border-radius: var(--radius-sm) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: var(--font-medium) !important;
	color: var(--text-primary) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--space-1) !important;
	min-height: 24px !important;
	cursor: pointer !important;
	transition: background 200ms, border-color 200ms !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: var(--leading-tight) !important;
	box-shadow: none !important;
}

html:not(.theme-dark) .variation-indicator:hover {
	background: var(--bg-tertiary) !important;
	border-color: var(--border-strong) !important;
}

html:not(.theme-dark) .variation-indicator[aria-expanded="true"] {
	background: var(--bg-tertiary) !important;
	border-color: var(--border-strong) !important;
}

.variation-indicator:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.variation-indicator-icon {
	width: 12px !important;
	height: 12px !important;
	font-size: 12px !important;
	color: var(--text-secondary) !important;
}

.variation-indicator-chevron {
	width: 10px !important;
	height: 10px !important;
	font-size: 10px !important;
	color: var(--text-secondary) !important;
	transition: transform 200ms !important;
}

.variation-indicator[aria-expanded="true"] .variation-indicator-chevron {
	transform: rotate(180deg);
}

/* Mobile - keep same compact size */
@media (max-width: 768px) {
	.variation-indicator {
		min-height: 24px !important;
		padding: var(--space-1) var(--space-2) !important;
	}
}

/* =======================================
   BUTTONS (design-system.md:190-235)
   ======================================= */

.cjbb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 15px 25px;
	border-radius: 0;
	font-family: var(--font-button);
	font-size: var(--text-lg);
	font-weight: var(--font-medium);
	text-transform: capitalize;
	letter-spacing: -0.5px;
	text-decoration: none;
	cursor: pointer;
	transition: all 200ms;
	border: none;
	min-height: 44px;
	line-height: 1.2;
}

/* Primary Button */
.cjbb-btn-primary {
	background: var(--brand-primary);
	color: var(--neutral-000);
}

.cjbb-btn-primary:hover {
	background: var(--brand-primary-dark);
	color: var(--neutral-000);
}

.cjbb-btn-primary:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

/* Secondary Button */
.cjbb-btn-secondary {
	background: transparent;
	border: 2px solid var(--border-strong);
	color: var(--text-primary);
}

.cjbb-btn-secondary:hover {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

.cjbb-btn-secondary:focus {
	outline: 2px solid var(--border-strong);
	outline-offset: 2px;
}

/* Ghost Button */
.cjbb-btn-ghost {
	background: transparent;
	border: none;
	color: var(--brand-primary-dark);
	padding: var(--space-2) var(--space-4);
}

.cjbb-btn-ghost:hover {
	background: var(--bg-secondary);
	color: var(--brand-primary-dark);
}

.cjbb-btn-ghost:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

/* =======================================
   EMPTY STATE (design-system.md:635-645)
   ======================================= */

.cjbb-empty-state {
	padding: var(--space-12) var(--space-6);
	text-align: center;
}

.empty-state-icon {
	width: 64px;
	height: 64px;
	color: var(--text-tertiary);
	font-size: 64px;
	margin: 0 auto var(--space-4);
	display: block;
}

.empty-state-heading {
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	font-family: var(--font-body);
	color: var(--text-primary);
	margin: 0 0 var(--space-2) 0;
}

.empty-state-description {
	font-size: var(--text-base);
	font-family: var(--font-body);
	color: var(--text-secondary);
	max-width: 400px;
	margin: 0 auto var(--space-6) auto;
	line-height: var(--leading-normal);
}

/* =======================================
   PAGINATION
   ======================================= */

.cjbb-pagination {
	text-align: center;
	margin-top: var(--space-10);
	padding-top: var(--space-8);
	border-top: 1px solid var(--border-subtle);
}

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.pagination a,
.pagination span {
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--text-secondary);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	transition: all 200ms;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
}

.pagination a:hover {
	background: var(--brand-primary);
	color: var(--neutral-000);
	border-color: var(--brand-primary);
}

.pagination a:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

.pagination .current {
	background: var(--brand-primary);
	color: var(--neutral-000);
	border-color: var(--brand-primary);
}

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

@media (max-width: 768px) {
	.cjbb-my-recipes-container {
		padding: var(--space-4);
	}

	.cjbb-recipes-grid {
		grid-template-columns: 1fr;
	}

	.cjbb-filter-form {
		flex-direction: column;
	}

	.cjbb-filter-form .filter-group {
		width: 100%;
		min-width: 100%;
	}

	.recipe-card-image {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 480px) {
	.recipe-card-actions {
		flex-direction: row;
		gap: var(--space-2);
	}

	.recipe-card-actions .cjbb-btn-primary {
		flex: 1;
	}

	.recipe-card-actions .cjbb-btn.cjbb-btn-icon {
		width: 40.5px;
		height: 40.5px;
		flex-shrink: 0;
	}
}

/* =======================================
   DARK MODE ENHANCEMENTS
   Better contrast, elevation, and hierarchy
   ======================================= */

/* View Toggle - Dark Mode */
html.theme-dark .cjbb-view-toggle {
	border-color: var(--dark-border-default);
}

html.theme-dark .cjbb-view-toggle-btn {
	border-color: var(--dark-border-default);
	color: var(--dark-text-tertiary);
}

html.theme-dark .cjbb-view-toggle-btn:hover {
	background: var(--dark-bg-quaternary);
}

html.theme-dark .cjbb-view-toggle-btn.active {
	background: var(--dark-bg-tertiary);
	color: var(--dark-text-primary);
}

/* Recipe List Item - Dark Mode */
html.theme-dark .cjbb-recipe-list-item {
	background: var(--dark-bg-secondary);
	border-color: var(--dark-border-subtle);
}

html.theme-dark .cjbb-recipe-list-item:hover {
	background: var(--dark-bg-tertiary);
}

html.theme-dark .cjbb-recipe-list-item:active {
	background: var(--dark-bg-quaternary);
}

html.theme-dark .list-item-thumbnail {
	background: var(--dark-bg-tertiary);
}

html.theme-dark .list-item-title {
	color: var(--dark-text-primary);
}

html.theme-dark .list-item-author {
	color: var(--dark-text-secondary);
}

html.theme-dark .list-item-overflow-btn {
	color: var(--dark-text-tertiary);
}

html.theme-dark .list-item-overflow-btn:hover {
	background: var(--dark-bg-tertiary);
}

html.theme-dark .list-item-overflow-menu {
	background: var(--dark-bg-secondary);
	border-color: var(--dark-border-default);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -2px rgb(0 0 0 / 0.3);
}

html.theme-dark .overflow-menu-item {
	color: var(--dark-text-primary);
}

html.theme-dark .overflow-menu-item:hover {
	background: var(--dark-bg-tertiary);
}

html.theme-dark .cjbb-recipe-card-standard {
	background: var(--dark-bg-secondary);
	border-color: var(--dark-border-default);
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -1px rgb(0 0 0 / 0.2);
}

html.theme-dark .cjbb-recipe-card-standard:hover {
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -2px rgb(0 0 0 / 0.3);
}

html.theme-dark .cjbb-recipes-filters {
	background: var(--dark-bg-secondary);
	border: 1px solid var(--dark-border-default);
}

html.theme-dark .cjbb-filter-form input,
html.theme-dark .cjbb-filter-form select {
	background: var(--dark-bg-tertiary);
	border-color: var(--dark-border-default);
	color: var(--dark-text-primary);
}

html.theme-dark .cjbb-filter-form input::placeholder,
html.theme-dark .cjbb-filter-form select::placeholder {
	color: var(--dark-text-tertiary);
}

html.theme-dark .cjbb-filter-form input:focus,
html.theme-dark .cjbb-filter-form select:focus {
	background: var(--dark-bg-quaternary);
	border-color: var(--brand-primary);
}

/* Dark mode: Favourites filter button */
html.theme-dark .cjbb-favourites-filter-btn {
	background: var(--dark-bg-tertiary);
	border-color: var(--dark-border-strong);
	color: var(--dark-text-primary);
}

html.theme-dark .cjbb-favourites-filter-btn:hover {
	background: var(--dark-bg-quaternary);
	border-color: var(--brand-primary);
	color: var(--dark-text-primary);
}

html.theme-dark .cjbb-favourites-filter-btn.active {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
	color: var(--neutral-000);
}

/* Enhanced badge hierarchy in dark mode */
html.theme-dark .recipe-badge-neutral {
	background: var(--dark-bg-quaternary);
	border-color: var(--dark-border-strong);
	color: var(--dark-text-secondary);
}

/* Base badge in dark mode */
html.theme-dark .recipe-badge-base {
	background: transparent;
	border-color: transparent;
	color: var(--dark-text-primary);
	box-shadow: none;
}

html.theme-dark .recipe-badge-base:hover,
html.theme-dark .recipe-badge-base.active {
	background: var(--dark-bg-secondary);
	border-color: var(--dark-border-default);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}


/* Better button contrast in dark mode */
html.theme-dark .cjbb-btn-secondary {
	border-color: var(--dark-border-strong);
	color: var(--dark-text-primary);
	background: var(--dark-bg-tertiary);
}

/* Icon button in dark mode - matches cjbb-btn-secondary exactly */
html.theme-dark .recipe-card-actions .cjbb-btn.cjbb-btn-icon {
	background: var(--dark-bg-tertiary) !important;
	border-color: var(--dark-border-strong) !important;
	color: var(--dark-text-primary) !important;
}

html.theme-dark .recipe-card-actions .cjbb-btn.cjbb-btn-icon:hover {
	background: var(--dark-bg-quaternary) !important;
	border-color: var(--brand-primary) !important;
	color: var(--dark-text-primary) !important;
	transform: scale(1.05);
}

/* Ensure the trash icon matches Edit button text color */
html.theme-dark .recipe-card-actions .cjbb-btn.cjbb-btn-icon .dashicons {
	color: var(--dark-text-primary) !important;
}

html.theme-dark .cjbb-btn-secondary:hover {
	background: var(--dark-bg-quaternary) !important;
	border-color: var(--brand-primary) !important;
	color: var(--dark-text-primary) !important;
	transform: scale(1.05);
}

html.theme-dark .cjbb-btn-ghost:hover {
	background: var(--dark-bg-tertiary);
}

/* Pagination in dark mode */
html.theme-dark .pagination a,
html.theme-dark .pagination span {
	background: var(--dark-bg-tertiary);
	border-color: var(--dark-border-default);
	color: var(--dark-text-secondary);
}

html.theme-dark .pagination a:hover {
	background: var(--brand-primary);
	color: var(--neutral-000);
	border-color: var(--brand-primary);
}

html.theme-dark .pagination .current {
	background: var(--brand-primary);
	color: var(--neutral-000);
	border-color: var(--brand-primary);
}

/* =======================================
   NEON BADGE STYLES - DARK MODE
   Glowing difficulty badges and variation indicators
   ======================================= */

/* Neon Cyan - BEGINNER */
html.theme-dark .recipe-badge-difficulty-beginner {
	background: var(--neon-cyan-bg) !important;
	color: var(--neon-cyan) !important;
	border: 2px solid var(--neon-cyan) !important;
	font-weight: var(--font-semibold);
}

/* Neon Gold - INTERMEDIATE */
html.theme-dark .recipe-badge-difficulty-intermediate {
	background: var(--neon-gold-bg) !important;
	color: var(--neon-gold) !important;
	border: 2px solid var(--neon-gold) !important;
	font-weight: var(--font-semibold);
}

/* Neon Coral - ADVANCED */
html.theme-dark .recipe-badge-difficulty-advanced {
	background: var(--neon-coral-bg) !important;
	color: var(--neon-coral) !important;
	border: 2px solid var(--neon-coral) !important;
	font-weight: var(--font-semibold);
}

/* Neon Orange - VARIATION INDICATOR */
html.theme-dark .variation-indicator {
	background: var(--neon-orange-bg) !important;
	border: 2px solid var(--neon-orange) !important;
	color: var(--neon-orange) !important;
	font-weight: var(--font-semibold) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
}

html.theme-dark .variation-indicator:hover,
html.theme-dark .variation-indicator[aria-expanded="true"] {
	background: var(--neon-orange-bg) !important;
	border-color: var(--neon-orange) !important;
	color: var(--neon-orange) !important;
}

html.theme-dark .variation-indicator-icon,
html.theme-dark .variation-indicator-chevron {
	color: var(--neon-orange) !important;
}

/* Ensure button text is visible in dark mode */
html.theme-dark .cjbb-btn-primary,
html.theme-dark .cjbb-btn-primary a,
html.theme-dark .recipe-card-actions .cjbb-btn-primary,
html.theme-dark a.cjbb-btn-primary {
	background: var(--brand-primary) !important;
	color: var(--neutral-000) !important;
}

html.theme-dark .cjbb-btn-primary:hover,
html.theme-dark .cjbb-btn-primary a:hover,
html.theme-dark .recipe-card-actions .cjbb-btn-primary:hover,
html.theme-dark a.cjbb-btn-primary:hover {
	background: var(--brand-primary-dark) !important;
	color: var(--neutral-000) !important;
	transform: scale(1.05);
}

html.theme-dark .recipe-card-title {
	color: var(--dark-text-primary);
}

html.theme-dark .recipe-card-content {
	color: var(--dark-text-primary);
}

/* Fix all button text colors in dark mode */
html.theme-dark .recipe-card-actions a,
html.theme-dark .recipe-card-actions button {
	color: var(--dark-text-primary) !important;
}

html.theme-dark .recipe-card-actions .cjbb-btn-primary,
html.theme-dark .recipe-card-actions .cjbb-btn-primary a {
	color: var(--neutral-000) !important;
}

/* =======================================
   BUDDYPRESS PROFILE TABS
   Clean tab design with orange underline only
   ======================================= */

/* Override BuddyPress core navigation borders */
.buddypress-wrap.bp-dir-hori-nav:not(.bp-vertical-navs) nav:not(.tabbed-links),
.buddypress-wrap nav,
.bp-navs nav,
#buddypress nav,
.bp-nouveau nav,
.bp-nouveau .bp-navs ul,
.bp-nouveau #object-nav ul,
.bp-nouveau #subnav ul,
#buddypress #item-nav,
#buddypress #object-nav,
#buddypress #subnav,
.bp-nouveau .main-navs {
	border-bottom: none !important;
	border-top: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Tab container - Remove white background */
#buddypress div#item-nav,
#buddypress div.item-list-tabs,
.bp-nouveau .bp-navs,
.bp-nouveau #object-nav,
.bp-nouveau #subnav,
#item-nav,
#object-nav,
#subnav {
	background: transparent !important;
	border-bottom: none !important;
	border-top: none !important;
	padding: 0 !important;
	margin-bottom: var(--space-6) !important;
	box-shadow: none !important;
}

/* Individual tab items - Remove background boxes */
#buddypress div#item-nav ul li,
#buddypress div.item-list-tabs ul li,
.bp-nouveau .bp-navs ul li,
.bp-nouveau #object-nav ul li,
.bp-nouveau #subnav ul li,
#item-nav ul li,
#object-nav ul li,
#subnav ul li {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Tab links - Clean design */
#buddypress div#item-nav ul li a,
#buddypress div.item-list-tabs ul li a,
.bp-nouveau .bp-navs ul li a,
.bp-nouveau #object-nav ul li a,
.bp-nouveau #subnav ul li a,
#item-nav ul li a,
#object-nav ul li a,
#subnav ul li a {
	background: transparent !important;
	border: none !important;
	border-bottom: 3px solid transparent !important;
	padding: var(--space-4) var(--space-6) !important;
	color: var(--text-secondary) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	font-weight: var(--font-medium) !important;
	text-decoration: none !important;
	transition: all 200ms ease !important;
	display: inline-block !important;
}

/* Tab hover state */
#buddypress div#item-nav ul li a:hover,
#buddypress div.item-list-tabs ul li a:hover,
.bp-nouveau .bp-navs ul li a:hover,
.bp-nouveau #object-nav ul li a:hover,
.bp-nouveau #subnav ul li a:hover,
#item-nav ul li a:hover,
#object-nav ul li a:hover,
#subnav ul li a:hover {
	background: transparent !important;
	color: var(--text-primary) !important;
	border-bottom: 3px solid var(--border-default) !important;
}

/* Active/Selected tab - Orange underline only */
#buddypress div#item-nav ul li.current a,
#buddypress div#item-nav ul li.selected a,
#buddypress div.item-list-tabs ul li.current a,
#buddypress div.item-list-tabs ul li.selected a,
.bp-nouveau .bp-navs ul li.current a,
.bp-nouveau .bp-navs ul li.selected a,
.bp-nouveau #object-nav ul li.current a,
.bp-nouveau #object-nav ul li.selected a,
.bp-nouveau #subnav ul li.current a,
.bp-nouveau #subnav ul li.selected a,
#item-nav ul li.current a,
#item-nav ul li.selected a,
#object-nav ul li.current a,
#object-nav ul li.selected a,
#subnav ul li.current a,
#subnav ul li.selected a {
	background: transparent !important;
	color: var(--text-primary) !important;
	border-bottom: 3px solid var(--brand-primary) !important;
}

/* Dark mode tab styling */
html.theme-dark #buddypress div#item-nav,
html.theme-dark #buddypress div.item-list-tabs,
html.theme-dark .bp-nouveau .bp-navs,
html.theme-dark .bp-nouveau #object-nav,
html.theme-dark .bp-nouveau #subnav,
html.theme-dark #item-nav,
html.theme-dark #object-nav,
html.theme-dark #subnav {
	border-bottom: none !important;
	border-top: none !important;
	box-shadow: none !important;
}

html.theme-dark #buddypress div#item-nav ul li a,
html.theme-dark #buddypress div.item-list-tabs ul li a,
html.theme-dark .bp-nouveau .bp-navs ul li a,
html.theme-dark .bp-nouveau #object-nav ul li a,
html.theme-dark .bp-nouveau #subnav ul li a,
html.theme-dark #item-nav ul li a,
html.theme-dark #object-nav ul li a,
html.theme-dark #subnav ul li a {
	color: var(--dark-text-secondary) !important;
}

html.theme-dark #buddypress div#item-nav ul li a:hover,
html.theme-dark #buddypress div.item-list-tabs ul li a:hover,
html.theme-dark .bp-nouveau .bp-navs ul li a:hover,
html.theme-dark .bp-nouveau #object-nav ul li a:hover,
html.theme-dark .bp-nouveau #subnav ul li a:hover,
html.theme-dark #item-nav ul li a:hover,
html.theme-dark #object-nav ul li a:hover,
html.theme-dark #subnav ul li a:hover {
	color: var(--dark-text-primary) !important;
	border-bottom: 3px solid var(--dark-border-strong) !important;
}

html.theme-dark #buddypress div#item-nav ul li.current a,
html.theme-dark #buddypress div#item-nav ul li.selected a,
html.theme-dark #buddypress div.item-list-tabs ul li.current a,
html.theme-dark #buddypress div.item-list-tabs ul li.selected a,
html.theme-dark .bp-nouveau .bp-navs ul li.current a,
html.theme-dark .bp-nouveau .bp-navs ul li.selected a,
html.theme-dark .bp-nouveau #object-nav ul li.current a,
html.theme-dark .bp-nouveau #object-nav ul li.selected a,
html.theme-dark .bp-nouveau #subnav ul li.current a,
html.theme-dark .bp-nouveau #subnav ul li.selected a,
html.theme-dark #item-nav ul li.current a,
html.theme-dark #item-nav ul li.selected a,
html.theme-dark #object-nav ul li.current a,
html.theme-dark #object-nav ul li.selected a,
html.theme-dark #subnav ul li.current a,
html.theme-dark #subnav ul li.selected a {
	color: var(--dark-text-primary) !important;
	border-bottom: 3px solid var(--brand-primary) !important;
}

/* =======================================
   TOAST NOTIFICATION SYSTEM
   ======================================= */

.cjbb-toast-container {
	position: fixed;
	bottom: var(--space-6);
	right: var(--space-6);
	z-index: 10000;
	display: flex;
	flex-direction: column-reverse;
	gap: var(--space-3);
	pointer-events: none;
}

.cjbb-toast {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	box-shadow: var(--shadow-lg);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(12px);
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	max-width: 400px;
}

.cjbb-toast.visible {
	opacity: 1;
	transform: translateY(0);
}

.cjbb-toast-success {
	background: var(--success);
	color: white;
}

.cjbb-toast-error {
	background: var(--error);
	color: white;
}

.cjbb-toast-info {
	background: var(--neutral-800);
	color: white;
}

.toast-close {
	background: none;
	border: none;
	color: inherit;
	font-size: 18px;
	cursor: pointer;
	opacity: 0.7;
	padding: 0 2px;
	line-height: 1;
	flex-shrink: 0;
}

.toast-close:hover {
	opacity: 1;
}

@media (max-width: 768px) {
	.cjbb-toast-container {
		left: var(--space-4);
		right: var(--space-4);
		bottom: var(--space-4);
	}

	.cjbb-toast {
		max-width: none;
	}
}

/* =======================================
   CONFIRM MODAL
   ======================================= */

.cjbb-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	opacity: 0;
	transition: opacity 200ms;
}

.cjbb-modal-overlay.visible {
	opacity: 1;
}

.cjbb-modal-card {
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	max-width: 440px;
	width: 100%;
	box-shadow: var(--shadow-xl);
	transform: scale(0.95);
	transition: transform 200ms;
}

.cjbb-modal-overlay.visible .cjbb-modal-card {
	transform: scale(1);
}

.cjbb-modal-header {
	padding: var(--space-5) var(--space-6);
	border-bottom: 1px solid var(--border-subtle);
}

.cjbb-modal-header h3 {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	color: var(--text-primary);
}

.cjbb-modal-body {
	padding: var(--space-4) var(--space-6);
}

.cjbb-modal-body p {
	margin: 0;
	font-size: var(--text-base);
	color: var(--text-secondary);
	line-height: var(--leading-normal);
}

.cjbb-modal-actions {
	padding: var(--space-4) var(--space-6);
	display: flex;
	gap: var(--space-3);
	justify-content: flex-end;
	border-top: 1px solid var(--border-subtle);
}

.cjbb-btn-danger {
	background: var(--error);
	color: white;
	border: none;
}

.cjbb-btn-danger:hover {
	background: var(--error-dark);
}

/* Dark mode */
html.theme-dark .cjbb-modal-card {
	background: var(--dark-bg-secondary);
}

html.theme-dark .cjbb-modal-header {
	border-bottom-color: var(--dark-border-default);
}

html.theme-dark .cjbb-modal-header h3 {
	color: var(--dark-text-primary);
}

html.theme-dark .cjbb-modal-body p {
	color: var(--dark-text-secondary);
}

html.theme-dark .cjbb-modal-actions {
	border-top-color: var(--dark-border-default);
}

html.theme-dark .cjbb-toast-info {
	background: var(--dark-bg-quaternary);
}

/* =======================================
   RECIPE TAGS (Cards)
   ======================================= */

.recipe-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-top: var(--space-1);
}

.recipe-tag-pill-sm {
	padding: 2px var(--space-2);
	font-size: var(--text-xs);
	border-radius: 9999px;
	background: var(--bg-tertiary);
	color: var(--text-tertiary);
	border: 1px solid var(--border-subtle);
	font-family: var(--font-body);
	font-weight: var(--font-medium);
	text-decoration: none;
	transition: background 200ms, color 200ms, border-color 200ms;
	white-space: nowrap;
}

.recipe-tag-pill-sm:hover {
	background: var(--brand-primary);
	color: var(--neutral-000);
	border-color: var(--brand-primary);
	text-decoration: none;
}

.recipe-tag-more {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--space-2);
	font-size: var(--text-xs);
	font-family: var(--font-body);
	color: var(--text-tertiary);
	font-weight: var(--font-medium);
}

/* Dark mode card tags */
html.theme-dark .recipe-tag-pill-sm {
	background: var(--dark-bg-tertiary);
	color: var(--dark-text-tertiary);
	border-color: var(--dark-border-subtle);
}

html.theme-dark .recipe-tag-pill-sm:hover {
	background: var(--brand-primary);
	color: var(--neutral-000);
	border-color: var(--brand-primary);
}

html.theme-dark .recipe-tag-more {
	color: var(--dark-text-tertiary);
}