/* ==========================================================================
   HotGames4u — hg-panels.css
   Profiles, User CP, private messages, Mod CP, member list, search, online,
   calendar, and the generic "label | field" form tables MyBB uses everywhere.
   ========================================================================== */

/* Profile -------------------------------------------------------------------- */

.hg-profile { margin: 0 0 18px; }

.hg-profile__banner {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 22px;
	align-items: center;
	padding: 26px;
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius-lg);
	background:
		radial-gradient(520px 220px at 0% 0%, rgba(255, 46, 136, 0.28), transparent 70%),
		radial-gradient(620px 260px at 100% 100%, rgba(139, 61, 255, 0.24), transparent 70%),
		var(--hg-surface);
	overflow: hidden;
	box-shadow: var(--hg-shadow);
}
.hg-profile__banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 4px);
	pointer-events: none;
}

.hg-profile__avatar img {
	display: block;
	width: 132px;
	height: 132px;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: 0 0 0 4px rgba(15, 15, 20, 0.85), 0 0 0 6px var(--hg-pink), 0 18px 40px -16px rgba(255, 46, 136, 0.7);
	background: var(--hg-surface-3);
}
.hg-profile__avatar img[src*="default_avatar"] { filter: invert(0.9) hue-rotate(180deg) brightness(0.55); }

.hg-profile__name { margin: 0; font-size: 28px; line-height: 1.15; }
.hg-profile__name strong { font-weight: 800; }
.hg-profile__usertitle {
	display: inline-block;
	margin-top: 8px;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--hg-pink-soft);
	color: var(--hg-pink-text);
	font-weight: 600;
	font-size: 12.5px;
}
.hg-profile__usertitle:empty { display: none; }
.hg-profile__badges { margin-top: 8px; }
.hg-profile__badges img { vertical-align: middle; }

.hg-profile__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 14px 0 0;
}
.hg-profile__facts > div { display: flex; flex-direction: column; gap: 1px; }
.hg-profile__facts dt { color: var(--hg-faint); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.hg-profile__facts dd { color: var(--hg-text); margin: 0; font-size: 13px; }

.hg-profile__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; position: relative; }
.hg-profile__actions:empty { display: none; }

.hg-profile__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.hg-kv td.trow1:first-child,
.hg-kv td.trow2:first-child,
.hg-profile__col .tborder td.trow1:first-child,
.hg-profile__col .tborder td.trow2:first-child { color: var(--hg-muted); }
.hg-kv td strong,
.hg-profile__col .tborder td:first-child strong { color: var(--hg-muted); font-weight: 600; }

.hg-profile__col .tborder .trow1 .signature,
.hg-profile__col .signature { color: var(--hg-text-2); }

/* User CP / Mod CP layout --------------------------------------------------- */

/* Both CPs render <table><tr>{nav td}<td>content</td></tr></table> */
td[valign="top"] > .tborder:first-child + .tborder { margin-top: 0; }

.usercp_nav_item,
.modcp_nav_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	margin: 0 -8px;
	background-image: none !important;
	border-radius: var(--hg-radius-sm);
	color: var(--hg-text-2) !important;
	font-size: 13px;
	transition: background-color 0.15s var(--hg-ease), color 0.15s var(--hg-ease);
}
.usercp_nav_item:hover,
.modcp_nav_item:hover { background-color: var(--hg-pink-soft); color: #fff !important; text-decoration: none; }
.usercp_nav_item::before,
.modcp_nav_item::before {
	font: 900 12px "Font Awesome 6 Free";
	width: 16px;
	text-align: center;
	color: var(--hg-faint);
	content: "\f105";
	transition: color 0.15s;
}
.usercp_nav_item:hover::before,
.modcp_nav_item:hover::before { color: var(--hg-pink); }

.usercp_nav_home::before { content: "\f015"; }
.usercp_nav_composepm::before { content: "\f304"; }
.usercp_nav_pmfolder::before { content: "\f07b"; font-weight: 400; }
.usercp_nav_sub_pmfolder::before { content: "\f07b"; font-weight: 400; }
.usercp_nav_trash_pmfolder::before { content: "\f2ed"; font-weight: 400; }
.usercp_nav_pmtracking::before { content: "\f1da"; }
.usercp_nav_pmfolders::before { content: "\f07c"; }
.usercp_nav_profile::before { content: "\f007"; }
.usercp_nav_email::before { content: "\f0e0"; }
.usercp_nav_password::before { content: "\f084"; }
.usercp_nav_username::before { content: "\f2c2"; }
.usercp_nav_editsig::before { content: "\f5b7"; }
.usercp_nav_avatar::before { content: "\f2bd"; }
.usercp_nav_options::before { content: "\f1de"; }
.usercp_nav_usergroups::before { content: "\f0c0"; }
.usercp_nav_editlists::before { content: "\f500"; }
.usercp_nav_attachments::before { content: "\f0c6"; }
.usercp_nav_drafts::before { content: "\f15b"; font-weight: 400; }
.usercp_nav_subscriptions::before { content: "\f0f3"; }
.usercp_nav_fsubscriptions::before { content: "\f0f3"; font-weight: 400; }
.usercp_nav_viewprofile::before { content: "\f2bb"; }
.usercp_nav_sub_pmfolder,
.usercp_nav_trash_pmfolder,
.usercp_nav_email,
.usercp_nav_password,
.usercp_nav_username,
.usercp_nav_editsig,
.usercp_nav_avatar { padding-left: 26px; }

.modcp_nav_home::before { content: "\f015"; }
.modcp_nav_announcements::before { content: "\f0a1"; }
.modcp_nav_modqueue::before { content: "\f0ae"; }
.modcp_nav_reports::before { content: "\f024"; }
.modcp_nav_modlogs::before { content: "\f1da"; }
.modcp_nav_editprofile::before { content: "\f4ff"; }
.modcp_nav_banning::before { content: "\f05e"; }
.modcp_nav_warninglogs::before { content: "\f071"; }
.modcp_nav_ipsearch::before { content: "\f0ac"; }

/* CP menu wrapper: a <details> that is open on desktop, collapsible on phones */
.hg-cpnav-cell { padding: 0 18px 0 0 !important; }
.hg-cpnav > summary { display: none; }
@media (max-width: 768px) {
	.hg-cpnav-cell { padding: 0 !important; margin-bottom: 14px; }
	.hg-cpnav > summary {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 14px;
		background: var(--hg-surface);
		border: 1px solid var(--hg-line);
		border-radius: var(--hg-radius);
		color: #fff;
		font-weight: 600;
		cursor: pointer;
		list-style: none;
	}
	.hg-cpnav > summary::-webkit-details-marker { display: none; }
	.hg-cpnav > summary::after {
		content: "\f078";
		font: 900 11px "Font Awesome 6 Free";
		color: var(--hg-muted);
		margin-left: auto;
		transition: transform 0.2s var(--hg-ease);
	}
	.hg-cpnav[open] > summary { margin-bottom: 10px; border-color: rgba(255, 46, 136, 0.45); }
	.hg-cpnav[open] > summary::after { transform: rotate(180deg); }
	.hg-cpnav > summary i { color: var(--hg-pink); }
	.hg-cpnav .tborder > tbody:first-child > tr:first-child > td.thead,
	.hg-cpnav .tborder > tr:first-child > td.thead { display: none; }
}

/* Menus inside the CP navs use .tcat_menu sections */
.tcat_menu { background: var(--hg-bg-2); }
.tcat_menu > .expcolimage { margin-top: -5px; }
.tcat_collapse_collapsed { border-bottom: 0; }

/* Unread PM count in folder links */
.usercp_nav_pmfolder strong,
.usercp_nav_item strong { color: var(--hg-pink-text); }

/* Private messages ----------------------------------------------------------- */

.pm_alert strong { color: #fff; }

/* Member list, online list, team page ---------------------------------------- */

.tborder td img.avatar,
.tborder td a > img[alt][width][height] { border-radius: 10px; }

/* Generic form tables (new thread, reply, register, UCP forms...) ------------ */

.tborder td.trow1 > strong:first-child,
.tborder td.trow2 > strong:first-child { color: #fff; }
.tborder td.trow1 .smalltext,
.tborder td.trow2 .smalltext { color: var(--hg-muted); }
.tborder td.trow1 label,
.tborder td.trow2 label { color: var(--hg-text-2); }

.tborder td > textarea,
.tborder td > div > textarea { width: 100%; box-sizing: border-box; }
.tborder input.textbox { min-height: 36px; }

/* Post icon pickers */
.posticons_label { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; margin: 2px 8px 2px 0; }

/* Search results ------------------------------------------------------------- */

.hg-page--search .tborder td .smalltext a:link,
.hg-page--search .tborder td .smalltext a:visited { color: var(--hg-text-2); }

/* Calendar -------------------------------------------------------------------- */

.calendar_today,
td.calendar_today { background: var(--hg-pink-soft) !important; }
.calendar .day_number,
.calendar .birthday { color: var(--hg-text-2); }

/* Error / redirect / notices --------------------------------------------------- */

.hg-notice-box { max-width: 760px; margin: 24px auto; }
.hg-notice-box .thead i { color: var(--hg-amber); margin-right: 4px; }
.hg-notice-box .trow1 { padding: 18px 20px; line-height: 1.7; }

.hg-redirect { max-width: 92vw; margin: 12vh auto 0; }
.hg-redirect .trow1 p { margin: 12px 0 4px; color: var(--hg-text); }
.hg-redirect__spinner {
	width: 28px;
	height: 28px;
	margin: 8px auto 0;
	border-radius: 50%;
	border: 3px solid var(--hg-surface-3);
	border-top-color: var(--hg-pink);
	animation: hg-spin 0.8s linear infinite;
}
@keyframes hg-spin { to { transform: rotate(360deg); } }

/* Mod CP specifics -------------------------------------------------------------- */

.modcp_nav_item { margin: 0 -8px; }
.hg-page--modcp .trow_selected td { background: rgba(255, 46, 136, 0.1) !important; }

/* Reputation & warnings ------------------------------------------------------- */

.repbox { border-radius: 6px; padding: 2px 10px; font-weight: 700; }
._plus { background: rgba(61, 220, 151, 0.12); color: var(--hg-green); border: 1px solid rgba(61, 220, 151, 0.35); }
._neutral { background: var(--hg-surface-3); color: var(--hg-text-2); border: 1px solid var(--hg-line); }
._minus { background: rgba(255, 90, 106, 0.12); color: var(--hg-red); border: 1px solid rgba(255, 90, 106, 0.35); }

/* Buddy / ignore lists --------------------------------------------------------- */

#buddy_list,
#ignore_list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.hg-listuser {
	float: none !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	background: var(--hg-surface-2);
	border: 1px solid var(--hg-line);
	border-radius: 999px;
}
.hg-listuser .hg-presence { margin: 0; }
.hg-listuser__remove:link,
.hg-listuser__remove:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: var(--hg-muted);
	background: var(--hg-surface-3);
	font-size: 11px;
}
.hg-listuser__remove:hover { background: rgba(255, 90, 106, 0.18); color: var(--hg-red); }
.hg-presence {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--hg-faint);
	flex: 0 0 auto;
}
.hg-presence--online { background: var(--hg-green); box-shadow: 0 0 8px rgba(61, 220, 151, 0.7); }

@media (max-width: 768px) {
	/* usercp_editlists uses fixed inline widths for the "Username(s)" label */
	#buddy fieldset > .float_left,
	#ignored fieldset > .float_left { float: none; width: auto !important; text-align: left !important; margin-bottom: 6px; }
	#buddy fieldset > div[style*="margin-left"],
	#ignored fieldset > div[style*="margin-left"] { margin-left: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
	#buddy_add_username,
	#ignored_add_username,
	#buddy .select2-container,
	#ignored .select2-container { width: 100% !important; }
	#receivedrequests,
	#sentrequests { display: block; width: auto !important; }
	table:has(> tbody > tr > #receivedrequests),
	table:has(> tbody > tr > #receivedrequests) > tbody,
	table:has(> tbody > tr > #receivedrequests) > tbody > tr { display: block; }
}