/**
 * ProfileGrid Pro Theme – profilegrid.css
 * Extra styles loaded only when ProfileGrid is active.
 */

/* ============================================================
   TOOLTIP
   ============================================================ */
.pgt-tooltip { position: relative; }
.pgt-tooltip-text {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--color-text);
	color: #fff;
	font-size: .72rem;
	font-weight: 600;
	padding: .25rem .5rem;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s, transform .15s;
	z-index: 50;
}
.pgt-tooltip:hover .pgt-tooltip-text {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ============================================================
   SKELETON LOADER (used by ProfileGrid async loading)
   ============================================================ */
.pg-skeleton {
	background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-3) 50%, var(--color-surface-2) 75%);
	background-size: 200% 100%;
	animation: pgt-skeleton 1.4s ease infinite;
	border-radius: var(--radius-sm);
}
@keyframes pgt-skeleton {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.pg-skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
.pg-skeleton-line   { height: 12px; margin-bottom: .5rem; }
.pg-skeleton-line.short { width: 60%; }

/* ============================================================
   REGISTRATION FORM (ProfileGrid custom registration)
   ============================================================ */
.pg-registration-wrap {
	max-width: 540px;
	margin: 0 auto;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-2xl);
	box-shadow: var(--shadow-lg);
}
.pg-registration-wrap h2 {
	text-align: center;
	margin-bottom: var(--space-sm);
}
.pg-registration-wrap .pg-subheading {
	text-align: center;
	color: var(--color-text-muted);
	font-size: .9rem;
	margin-bottom: var(--space-xl);
}
.pg-divider {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin: var(--space-lg) 0;
	color: var(--color-text-light);
	font-size: .8rem;
}
.pg-divider::before,
.pg-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

/* ============================================================
   GROUP DASHBOARD LAYOUT
   ============================================================ */
.pg-group-dashboard {
	display: grid;
	grid-template-columns: 1fr var(--sidebar-width);
	gap: var(--space-xl);
	align-items: start;
}
@media (max-width: 1024px) {
	.pg-group-dashboard { grid-template-columns: 1fr; }
}

.pg-group-hero {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	overflow: hidden;
	margin-bottom: var(--space-xl);
}
.pg-group-hero-cover {
	height: 200px;
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	position: relative;
}
.pg-group-hero-body {
	padding: var(--space-lg) var(--space-xl) var(--space-xl);
}
.pg-group-hero-title {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -.03em;
	margin-bottom: .35rem;
}

/* ============================================================
   NOTIFICATION PANEL
   ============================================================ */
.pg-notification-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.pg-notification-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--color-border);
	transition: background var(--transition-fast);
	cursor: pointer;
}
.pg-notification-item:hover { background: var(--color-surface-2); }
.pg-notification-item.unread { background: var(--color-primary-light); }
.pg-notification-item.unread:hover { background: rgba(219,234,254,.8); }
.pg-notification-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: var(--color-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	flex-shrink: 0;
}
.pg-notification-content { flex: 1; min-width: 0; }
.pg-notification-text { font-size: .875rem; color: var(--color-text); line-height: 1.45; }
.pg-notification-text strong { font-weight: 700; }
.pg-notification-time { font-size: .75rem; color: var(--color-text-light); margin-top: .15rem; }

/* ============================================================
   PROFILE EDIT FORM
   ============================================================ */
.pg-edit-profile-wrap {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--space-xl);
	align-items: start;
}
@media (max-width: 768px) {
	.pg-edit-profile-wrap { grid-template-columns: 1fr; }
}
.pg-edit-avatar-col { text-align: center; }
.pg-edit-avatar-col .avatar { margin: 0 auto var(--space-md); }
.pg-edit-avatar-upload {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	cursor: pointer;
	font-size: .875rem;
	font-weight: 600;
	color: var(--color-primary);
}
.pg-edit-avatar-upload input { display: none; }

/* ============================================================
   POINTS / PROGRESS BARS
   ============================================================ */
.pg-progress-wrap { margin-bottom: var(--space-md); }
.pg-progress-label {
	display: flex;
	justify-content: space-between;
	font-size: .8rem;
	font-weight: 600;
	color: var(--color-text-muted);
	margin-bottom: .35rem;
}
.pg-progress-bar {
	height: 8px;
	background: var(--color-surface-2);
	border-radius: var(--radius-full);
	overflow: hidden;
}
.pg-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	border-radius: var(--radius-full);
	transition: width .6s ease;
}

/* ============================================================
   LEVEL BADGE
   ============================================================ */
.pg-level-badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .75rem;
	border-radius: var(--radius-full);
	font-size: .8rem;
	font-weight: 800;
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	color: #fff;
	letter-spacing: .03em;
}

/* ============================================================
   EMPTY STATES
   ============================================================ */
.pg-empty-state {
	text-align: center;
	padding: var(--space-3xl) var(--space-xl);
	color: var(--color-text-muted);
}
.pg-empty-icon {
	font-size: 3.5rem;
	margin-bottom: var(--space-md);
	opacity: .7;
}
.pg-empty-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: .5rem;
}
.pg-empty-desc { font-size: .9rem; margin-bottom: var(--space-lg); }

/* ============================================================
   RESPONSIVE FIXES
   ============================================================ */
@media (max-width: 640px) {
	.pg-profile-stats { gap: var(--space-md); }
	.pg-avatar-wrap   { flex-direction: column; align-items: flex-start; }
}