/* =========================================================
   PokéBoard — Template global pages compte
   Fichier : /assets/css/template-pages-compte.css
========================================================= */

/* =========================================================
   DASHBOARD GLOBAL
========================================================= */

.pkb-dash {
	min-height: calc(100vh - var(--pkb-header-height, 78px));
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	align-items: start;          /* requis pour position:sticky de la sidebar */
	gap: 0;
	overflow: clip;              /* clip n'établit pas de scroll-container, donc sticky fonctionne */
	/* Alignement identique au header inner : même largeur max + padding latéral */
	width: min(var(--pkb-container, 1680px), 100%);
	margin-inline: auto;
	padding-inline: var(--pkb-container-padding, 14px) !important;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	position: relative;          /* ancrage pour overlay/burger en mobile */
}

/* Le wrapper .pkb-account-app et la section .pkb-account-page doivent être pleine largeur
   pour que .pkb-dash puisse se centrer comme .pb-header-inner (même formule min+auto).
   width:100% annule le min(1540px,100%) défini dans pkb-compte-inscription-connexion.css
   qui limiterait le conteneur sur les grands écrans et décalerait la sidebar du logo.
   EXCEPTION : sur la page auth (/mon-compte/ non connecté), on préserve le layout centré. */
body:not(.pkb-account-auth-page) .pkb-account-page,
body:not(.pkb-account-auth-page) .pkb-account-app {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* =========================================================
   SIDEBAR
========================================================= */

/* ── Sidebar (desktop sticky pleine hauteur, continuité du header) ───── */
.pkb-dash-sidebar {
	min-width: 0;
	position: sticky;
	top: var(--pkb-header-height, 78px);
	align-self: start;
	height: calc(100vh - var(--pkb-header-height, 78px));
	max-height: calc(100vh - var(--pkb-header-height, 78px));
	overflow-y: auto;
	overflow-x: hidden;
	padding: 22px 18px;
	background: var(--pkb-ds-surface, #fff);
	border-right: 1px solid rgba(15,23,42,.06);
	display: flex;
	flex-direction: column;
	gap: 16px;
	scrollbar-width: thin;
	scrollbar-color: rgba(15,23,42,.18) transparent;
}
.pkb-dash-sidebar::-webkit-scrollbar { width: 6px; }
.pkb-dash-sidebar::-webkit-scrollbar-track { background: transparent; }
.pkb-dash-sidebar::-webkit-scrollbar-thumb { background: rgba(15,23,42,.14); border-radius: 999px; }

/* Brand + close (visible mobile) */
.pkb-dash-sidebar__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0 4px;
}
.pkb-dash-sidebar__brand {
	display: flex; align-items: center; gap: 12px;
	min-width: 0;
	color: var(--pkba-ink, var(--idd-color-bg-dark, #0f172a));
}
.pkb-dash-sidebar__brand-avatar {
	width: 36px; height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
	border: 2px solid #fff;
	box-shadow: 0 6px 14px rgba(15, 23, 42, .14), 0 0 0 2px rgba(254,2,1, .14);
	flex-shrink: 0;
}
.pkb-dash-sidebar__brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.1;
}
.pkb-dash-sidebar__brand-text small {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--pkba-text-muted, var(--idd-color-text-muted, #64748b));
	text-transform: uppercase;
	letter-spacing: .12em;
}
.pkb-dash-sidebar__brand-text strong {
	font-size: 14px;
	font-weight: 900;
	letter-spacing: -.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pkb-dash-sidebar__close {
	display: none;
	width: 36px; height: 36px;
	border: 0; border-radius: 10px;
	background: rgba(15, 23, 42, .06);
	color: var(--pkba-text-muted, var(--idd-color-text-muted, #64748b));
	cursor: pointer;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.pkb-dash-sidebar__close:hover { background: rgba(15, 23, 42, .12); }

/* ── Menu structure ──────────────────────────────────────────────────── */
.pkb-dash-menu {
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* Pas de shrink : le menu garde sa hauteur naturelle, la sidebar scroll si besoin */
	flex: 0 0 auto;
}
.pkb-dash-menu__section {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pkb-dash-menu__section + .pkb-dash-menu__section {
	padding-top: 14px;
	border-top: 1px solid rgba(15, 23, 42, .06);
}
.pkb-dash-menu__heading {
	font-size: 10.5px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--pkba-text-muted, var(--idd-color-text-muted, #64748b));
	padding: 0 12px 8px;
	opacity: .8;
}

/* Item link */
.pkb-dash-menu__link {
	position: relative;
	min-height: 44px;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-radius: 12px;
	text-decoration: none;
	color: var(--pkba-ink, var(--idd-color-bg-dark, #0f172a));
	font-weight: 700;
	font-size: 14px;
	transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pkb-dash-menu__link:hover {
	background: rgba(254,2,1,.05);
	color: var(--pkb-ds-accent, var(--idd-color-primary, #fe0201));
}
.pkb-dash-menu__link:hover .pkb-dash-menu__icon { color: var(--pkb-ds-accent, var(--idd-color-primary, #fe0201)); }

/* Item actif : transparence rouge subtile + indicateur latéral rouge */
.pkb-dash-menu__link.is-active {
	color: var(--pkb-ds-accent, var(--idd-color-primary, #fe0201));
	background: rgba(254,2,1,.10);
	box-shadow: none;
	transform: none;
	font-weight: 900;
}
.pkb-dash-menu__link.is-active::before {
	content: '';
	position: absolute;
	left: -10px;
	top: 8px; bottom: 8px;
	width: 3px;
	border-radius: 999px;
	background: var(--pkb-ds-accent, var(--idd-color-primary, #fe0201));
	box-shadow: none;
}
.pkb-dash-menu__icon {
	width: 28px; height: 28px;
	display: grid; place-items: center;
	color: var(--pkba-text-muted, var(--idd-color-text-muted, #64748b));
	transition: color .18s ease;
}
.pkb-dash-menu__link.is-active .pkb-dash-menu__icon { color: var(--pkb-ds-accent, var(--idd-color-primary, #fe0201)); }
.pkb-dash-menu__icon svg { width: 20px; height: 20px; }
.pkb-dash-menu__label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -.01em;
}

/* Badges — count rouge ou pill colorée plan */
.pkb-dash-menu__badge {
	display: inline-grid;
	place-items: center;
	min-width: 22px; height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}
.pkb-dash-menu__badge.is-count {
	background: linear-gradient(135deg, var(--idd-color-primary, #fe0201), #1565C0);
	color: #fff;
}
.pkb-dash-menu__link.is-active .pkb-dash-menu__badge.is-count {
	background: var(--pkb-ds-accent, var(--idd-color-primary, #fe0201));
	color: #fff;
}
.pkb-dash-menu__badge.is-pill {
	background: var(--pkb-badge-color, var(--idd-color-text-muted, #64748b));
	color: #fff;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 0 9px;
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pkb-dash-menu__link.is-active .pkb-dash-menu__badge.is-pill {
	background: var(--idd-surface-glass-strong, rgba(255,255,255,.95));
	color: var(--pkb-ds-accent, var(--idd-color-primary, #fe0201));
}

/* ── Burger + overlay (mobile only, désactivés desktop) ─────────────── */
.pkb-dash-burger,
.pkb-dash-overlay,
.pkb-account-header {
	display: none;
}

.pkb-side-level {
	margin-top: auto;
	min-height: 108px;
	padding: 18px;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	border-radius: 18px;
	background: var(--idd-surface-glass-strong, rgba(255,255,255,.9));
	border: 1px solid var(--pkba-line);
	box-shadow: 0 14px 30px rgba(17, 24, 39, .08);
}

.pkb-side-medal {
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #ffd66b, #ff9f0a);
	box-shadow: inset 0 0 0 5px var(--idd-surface-glass, rgba(255,255,255,.35));
	font-size: 25px;
}

.pkb-side-level strong {
	display: block;
	font-size: 18px;
	line-height: 1.15;
	margin-bottom: 8px;
}

.pkb-side-level small {
	display: block;
	margin-top: 7px;
	color: var(--pkba-muted);
	font-weight: 800;
}

.pkb-mini-progress,
.pkb-progress {
	position: relative;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(17, 24, 39, .08);
}

.pkb-mini-progress span,
.pkb-progress i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--idd-color-primary, #fe0201), #1565C0);
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.pkb-dash-main {
	min-width: 0;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background:
		radial-gradient(circle at 46% 0%, rgba(47, 128, 237, .10), transparent 40%),
		linear-gradient(180deg, var(--idd-surface-glass, rgba(255,255,255,.18)), var(--idd-surface-glass-strong, rgba(255,255,255,.55)));
}

.pkb-card {
	border-radius: var(--pkba-radius);
	background: var(--pkba-card);
	border: 1px solid var(--idd-surface-glass-strong, rgba(255,255,255,.76));
	box-shadow: 0 16px 34px rgba(17, 24, 39, .08);
	backdrop-filter: blur(14px);
}

.pkb-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
}

.pkb-section-head h2 {
	margin: 0;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -.03em;
}

.pkb-section-head a {
	color: var(--pkb-ds-accent, var(--idd-color-primary, #fe0201));
	font-weight: 900;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.pkb-section-head a:hover { color: var(--pkb-ds-accent-deep, var(--idd-color-primary-hover, #d40000)); }



/* =========================================================
   PROFILE CARD
========================================================= */

.pkb-profile-top {
	position: relative;
	min-height: 160px;
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	align-items: center;
	gap: 20px;
	padding: 22px;
	border-radius: var(--pkba-radius);
	background: var(--idd-surface-glass-strong, rgba(255,255,255,.90));
	border: 1px solid var(--idd-surface-glass-strong, rgba(255,255,255,.78));
	box-shadow: 0 16px 34px rgba(17, 24, 39, .08);
	backdrop-filter: blur(14px);
}

.pkb-edit-btn {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 10px;
	background: rgba(17, 24, 39, .04);
	color: #667085;
	font-size: 18px;
	font-weight: 900;
	cursor: pointer;
	transition: .18s ease;
}

.pkb-edit-btn:hover {
	background: linear-gradient(135deg, var(--idd-color-primary, #fe0201), #1565C0);
	color: #fff;
	transform: translateY(-1px);
}

.pkb-profile-top > img {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
	border: 6px solid #dff5ff;
	box-shadow: 0 12px 28px rgba(17, 24, 39, .10);
}

.pkb-profile-top h2 {
	margin: 0 0 6px;
	font-size: 24px;
	line-height: 1;
	letter-spacing: -.03em;
}

.pkb-profile-top p {
	margin: 0 0 18px;
	color: var(--idd-color-text, #111827);
	font-weight: 650;
}

.pkb-profile-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.pkb-profile-stats span {
	text-align: center;
}

.pkb-profile-stats b {
	display: block;
	font-size: 19px;
	line-height: 1.1;
}

.pkb-profile-stats small {
	display: block;
	margin-top: 3px;
	color: #344054;
	font-weight: 750;
}

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

@media (max-width: 1320px) {
	.pkb-dash {
		grid-template-columns: 250px minmax(0, 1fr);
	}
	.pkb-dash-sidebar {
		padding: 20px 14px;
	}
	.pkb-dash-main {
		padding: 24px 18px;
	}
	.pkb-dash-right {
		padding: 24px 18px 24px 0;
	}
}

@media (max-width: 1120px) {
	.pkb-dash {
		grid-template-columns: 224px minmax(0, 1fr);
	}
	.pkb-dash-menu__link { font-size: 13.5px; padding: 8px 10px; gap: 10px; }
	.pkb-dash-menu__heading { padding: 0 10px 6px; }
	.pkb-dash-menu__link.is-active::before { left: -18px; }

	.pkb-dash-right {
		grid-column: 2;
		padding: 0 18px 24px;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pkb-profile-top {
		grid-column: 1 / -1;
	}
}

/* ── Drawer mobile ───────────────────────────────────────────────────── */
@media (max-width: 860px) {

	/* 1. Le header du site est masqué sur les pages compte (compatibilité large via :has) */
	body:has(.pkb-account-page) .pb-site-header { display: none !important; }
	/* Fallback pour navigateurs sans :has — class set côté template si jamais nécessaire */
	body.pkb-account-mobile-header .pb-site-header { display: none !important; }

	/* 2. Header dédié au compte : retour | logo | burger menu compte
	      → position fixed pour rester collé en haut quoi qu'il arrive (immune aux
	        ancêtres avec overflow:hidden qui casseraient un position:sticky) */
	.pkb-account-header {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr) 48px;
		align-items: center;
		gap: 10px;
		position: fixed;
		top: var(--pb-admin-bar-h, 0); left: 0; right: 0;
		z-index: 1000;
		height: var(--pkb-header-height-mobile, 60px);
		padding: 0 12px;
		background: var(--idd-surface-glass-strong, rgba(255,255,255,.96));
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-bottom: 1px solid var(--pkba-line);
		box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
	}
	.pkb-account-header__back,
	.pkb-account-header__burger {
		display: inline-grid; place-items: center;
		border: 0;
		text-decoration: none;
		cursor: pointer;
		transition: background .15s ease, transform .15s ease;
	}

	/* Retour (gauche) : icône rouge plus petite, fond très clair */
	.pkb-account-header__back {
		width: 40px; height: 40px;
		border-radius: 11px;
		background: rgba(239, 68, 68, .08);
		color: var(--pkb-danger, var(--idd-color-primary, #ef4444));
	}
	.pkb-account-header__back svg {
		width: 22px !important;
		height: 22px !important;
		stroke: currentColor;
		stroke-width: 2.25px !important;
		fill: none;
		display: block;
		flex-shrink: 0;
	}
	.pkb-account-header__back:hover { background: rgba(239, 68, 68, .14); transform: translateY(-1px); }
	.pkb-account-header__back:active { transform: translateY(0); }

	/* Burger (droite) : compact, taille cohérente avec le bouton back */
	.pkb-account-header__burger {
		width: 40px; height: 40px;
		border-radius: 12px;
		background: rgba(254,2,1, .10);
		color: var(--pkb-ds-accent, var(--idd-color-primary, #fe0201));
	}
	.pkb-account-header__burger svg {
		width: 22px !important;
		height: 22px !important;
		stroke: currentColor;
		stroke-width: 2.25px !important;
		fill: none;
		display: block;
		flex-shrink: 0;
	}
	.pkb-account-header__burger:hover { background: rgba(254,2,1, .18); transform: translateY(-1px); }
	.pkb-account-header__burger:active { transform: translateY(0); }

	/* Re-aligne les colonnes du header pour matcher les nouvelles tailles */
	.pkb-account-header {
		grid-template-columns: 40px minmax(0, 1fr) 40px;
	}
	.pkb-account-header__logo {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
	}
	.pkb-account-header__logo img {
		max-height: 36px;
		max-width: 100%;
		object-fit: contain;
		display: block;
	}

	/* 3. Compensation : le header fixed prend la hauteur du header.
	   L'admin-bar WP est déjà compensée par le padding-top que WP applique sur <html>,
	   donc on ne le rajoute pas ici (sinon double comptage = trou visible). */
	.pkb-account-page {
		padding: 0 !important;
		padding-top: var(--pkb-header-height-mobile, 60px) !important;
	}

	/* Fil d'ariane : sur les pages compte le header est fixed, donc le breadcrumb
	   (qui est dans le flux normal AVANT .pkb-account-page) doit être décalé
	   pour passer SOUS le header au lieu d'être recouvert. */
	body:has(.pkb-account-page) .pb-breadcrumb-wrap,
	body.pkb-account-mobile-header .pb-breadcrumb-wrap {
		margin-top: var(--pkb-header-height-mobile, 60px);
	}

	/* Si le breadcrumb est présent, il occupe déjà la place sous le header,
	   donc on annule le padding-top de .pkb-account-page pour éviter le double trou. */
	body:has(.pb-breadcrumb-wrap) .pkb-account-page {
		padding-top: 0 !important;
	}

	/* 4. Layout principal : grille à 1 colonne */
	.pkb-dash {
		min-height: calc(100vh - var(--pkb-header-height-mobile, 60px));
		grid-template-columns: 1fr;
		align-content: start;
		border: 0;
		border-radius: 0;
		overflow: visible;
		padding-inline: 0;
	}

	/* 5. Overlay plein écran : couvre tout (y compris le header compte) quand ouvert */
	.pkb-dash-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, .55);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s ease;
		z-index: 1100;          /* au-dessus du header (1000) */
	}
	body.pkb-drawer-open .pkb-dash-overlay {
		opacity: 1;
		visibility: visible;
	}

	/* 6. Sidebar = drawer plein écran qui passe DEVANT le header compte */
	.pkb-dash-sidebar {
		position: fixed;
		top: var(--pb-admin-bar-h, 0);  /* sous l'admin-bar WP */
		left: 0;
		bottom: 0;
		width: min(86vw, 320px);
		max-height: calc(100vh - var(--pb-admin-bar-h, 0px));
		z-index: 1110;           /* au-dessus de l'overlay (1100) et du header (1000) */
		transform: translateX(-100%);
		transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
		background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
		border-right: 1px solid var(--pkba-line);
		padding: 18px 16px;
		gap: 14px;
	}
	body.pkb-drawer-open .pkb-dash-sidebar {
		transform: translateX(0);
		box-shadow: 24px 0 60px rgba(15, 23, 42, .22);
	}
	body.pkb-drawer-open { overflow: hidden; }

	/* Bouton fermer visible dans la sidebar mobile */
	.pkb-dash-sidebar__close { display: inline-flex; }

	/* Indicateur actif : pas de débordement hors du drawer */
	.pkb-dash-menu__link.is-active::before { left: -10px; }

	.pkb-dash-main {
		padding: 16px 12px 14px;
		gap: 12px;
	}
	.pkb-dash-main p:empty { display: none; }

	.pkb-dash-right {
		grid-column: auto;
		grid-template-columns: 1fr;
		padding: 0 14px 18px;
		gap: 14px;
	}
}

@media (max-width: 520px) {
	.pkb-profile-top {
		grid-template-columns: 78px minmax(0, 1fr);
		gap: 14px;
		padding: 18px;
	}

	.pkb-profile-top > img {
		width: 78px;
		height: 78px;
		border-width: 4px;
	}

	.pkb-profile-top h2 {
		font-size: 21px;
	}

	.pkb-profile-stats {
		grid-column: 1 / -1;
	}

	.pkb-section-head h2 {
		font-size: 20px;
	}
}

/* =========================================================
   HARMONISATION VISUELLE — Pages compte (Statistiques v2 comme référence)
   Aligne le rendu de tous les "hero" sur le pattern stats v2 :
   surface blanche, border subtle, shadow douce, accent violet/cyan léger.
   Le fond bleu radial vient du parent .pkb-dash-main (déjà en place).
   ========================================================= */

.pkb-dash-main .pkbc-hero,
.pkb-dash-main .pkb-progression-hero,
.pkb-dash-main .pkb-dash-hero,
.pkb-dash-main .pkb-wl-hero,
.pkb-dash-main .pkb-fav-hero,
.pkb-dash-main .pkb-nearby-v2__hero {
	background: var(--pkb-surface, #fff);
	border: 1px solid rgba(15,23,42,.06);
	border-radius: 22px;
	box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.12);
	position: relative;
	overflow: hidden;
}

/* Accent bleu/violet très subtil en haut des heros (signature design) */
.pkb-dash-main .pkbc-hero::before,
.pkb-dash-main .pkb-progression-hero::before,
.pkb-dash-main .pkb-dash-hero::before,
.pkb-dash-main .pkb-wl-hero::before,
.pkb-dash-main .pkb-fav-hero::before,
.pkb-dash-main .pkb-nearby-v2__hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(254,2,1,.05), transparent 40%);
	pointer-events: none;
	z-index: 0;
}

.pkb-dash-main .pkbc-hero > *,
.pkb-dash-main .pkb-progression-hero > *,
.pkb-dash-main .pkb-dash-hero > *,
.pkb-dash-main .pkb-wl-hero > *,
.pkb-dash-main .pkb-fav-hero > *,
.pkb-dash-main .pkb-nearby-v2__hero > * {
	position: relative;
	z-index: 1;
}

/* ─── Pleine largeur intégrée pour les shortcodes hébergés dans pkb-dash-main ─── */
.pkb-dash-main:has(.pkb-progression-page) { padding: 0 !important; gap: 0 !important; }
.pkb-dash-main .pkb-progression-page {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 24px clamp(16px, 3vw, 32px) !important;
}