.usercp_nav_item {
	display: block;
	padding: 1px 0 1px 23px;
	background-image: url(../../../images/usercp_sprite.png);
	background-repeat: no-repeat;
}

.usercp_nav_composepm {
	background-position: 0 0;
}

.usercp_nav_pmfolder {
	background-position: 0 -20px;
}

.usercp_nav_sub_pmfolder {
	padding-left: 40px;
	background-position: 0 -40px;
}

.usercp_nav_trash_pmfolder {
	padding-left: 40px;
	background-position: 0 -60px;
}

.usercp_nav_pmtracking {
	background-position: 0 -80px;
}

.usercp_nav_pmfolders {
	background-position: 0 -100px;
}

.usercp_nav_profile {
	background-position: 0 -120px;
}

.usercp_nav_email {
	padding-left: 40px;
	background-position: 0 -140px;
}

.usercp_nav_password {
	padding-left: 40px;
	background-position: 0 -160px;
}

.usercp_nav_username {
	padding-left: 40px;
	background-position: 0 -180px;
}

.usercp_nav_editsig {
	padding-left: 40px;
	background-position: 0 -200px;
}

.usercp_nav_avatar {
	padding-left: 40px;
	background-position: 0 -220px;
}

.usercp_nav_options {
	background-position: 0 -240px;
}

.usercp_nav_usergroups {
	background-position: 0 -260px;
}

.usercp_nav_editlists {
	background-position: 0 -280px;
}

.usercp_nav_attachments {
	background-position: 0 -300px;
}

.usercp_nav_drafts {
	background-position: 0 -320px;
}

.usercp_nav_subscriptions {
	background-position: 0 -340px;
}

.usercp_nav_fsubscriptions {
	background-position: 0 -360px;
}

.usercp_nav_viewprofile {
	background-position: 0 -380px;
}

.usercp_nav_home {
	background-position: 0 -400px;
}

.usercp_notepad {
	width: 99%;
}



.pmspace {
	float: right;
	margin: -3px 5px;
}

.pmspace_container {
	background: #fff;
	border: 1px solid var(--accent1);
	width: 100px;
	display: inline-block;
}

.pmspace_used {
	display: inline-block;
	color: #fff;
	margin: -1px;
}

.pmspace_used.low {
	border: 1px solid var(--accent1);
	background: #167203;
}

.pmspace_used.medium {
	background: #ff862b;
	border: 1px solid #d7611e;
}

.pmspace_used.high {
	background: #e73c3c;
	border: 1px solid #c00;
}

.pmspace_unused {
	display: inline-block;
}

.pmspace_text {
	padding: 1px 5px;
	display: inline-block;
}

.new_pm {
	font-weight: bold;
}



/* ===== User CP Container ===== */
.usercp_container {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	width: 100%;
}

.usercp_nav_column {
	flex: 0 0 220px;
	min-width: 220px;
}

.usercp_content_column {
	flex: 1;
	min-width: 0;
}

/* ===== User CP Navigation - Clean Simple Style ===== */
.usercp_nav_wrapper {
	width: 100%;
	background: var(--block-med);
	border-radius: 4px;
	overflow: hidden;
}

.usercp_nav_header {
	padding: .5em 1em;
	background: var(--block-dark);
	color: var(--accent1);
	border-radius: 4px 4px 0 0;
	font-family: var(--font-title);
	font-size: 3em;
	font-weight: normal;
	border-bottom: 1px solid var(--accent1);
}

/* All Navigation Items - Direct Anchor Style */
.usercp_nav_item {
	display: block;
	padding: 12px 20px;
	background: var(--block-light);
	border-bottom: 1px solid rgba(222, 166, 99, 0.08);
	color: var(--accent1);
	text-decoration: none;
	font-family: var(--font-read);
	font-size: 14px;
	transition: all 0.3s ease;
}

.usercp_nav_item:hover {
	background: var(--block-med);
	border-left: 3px solid var(--accent2);
	padding-left: 23px;
	color: var(--accent2);
}

/* Navigation Groups */
.usercp_nav_group {
	margin-bottom: 0;
	border-bottom: 1px solid rgba(222, 166, 99, 0.15);
}

.usercp_nav_group:last-of-type {
	border-bottom: none;
}

/* Category Headers */
.usercp_nav_category {
	padding: 14px 20px;
	background: var(--block-dark);
	color: var(--accent1);
	font-family: var(--font-header);
	font-size: 13px;
	border-bottom: 1px solid rgba(222, 166, 99, 0.2);
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.usercp_nav_category span {
	color: var(--accent1);
}

/* Links Container */
.usercp_nav_links {
	display: flex;
	flex-direction: column;
	background: var(--block-light);
}

.usercp_nav_links .usercp_nav_item:last-child {
	border-bottom: none;
}

/* Active State */
.usercp_nav_item.active {
	background: var(--block-med);
	border-left: 3px solid var(--accent1);
	padding-left: 23px;
	font-weight: 600;
}


/* Sub-header within navigation groups */
.usercp_nav_subheader {
	padding: 1em;
	background: var(--block-dark);
	color: var(--accent2);
	font-family: var(--font-header);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-top: 1px solid rgba(222, 166, 99, 0.15);
	border-bottom: 1px solid rgba(222, 166, 99, 0.15);
	margin: 5px 0;
	font-weight: bold;
}


/* Responsive */
@media (max-width: 768px) {
	.usercp_nav_header {
		font-size: 1.5em;
		padding: 0.8em;
	}
	
	.usercp_nav_category {
		padding: 12px 15px;
		font-size: 12px;
	}
	
	.usercp_nav_item {
		padding: 10px 15px;
	}
	
	.usercp_nav_item:hover {
		padding-left: 18px;
	}
}

@media (max-width: 480px) {
	.usercp_nav_header {
		font-size: 1.3em;
		padding: 0.7em;
	}
}

/* ===== User CP Summary ===== */
.usercp_summary {
	margin-bottom: 15px;
	background: var(--block-med);
	border-radius: 4px;

}

.usercp_summary_content {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 15px;
	background: var(--block-light);
}

.usercp_summary .thead {padding: 1em!important;}
.usercp_summary .thead strong {	font-family: var(--font-title); font-size: 2em; 	}

.usercp_avatar_container {
	flex: 0 0 auto;
	padding: 10px;
	background: var(--block-med);
	border-radius: 4px;
}

.usercp_avatar_container img {
	display: block;
	width: 150px;
	height: auto;
	border-radius: 4px;
}

.usercp_info {
	flex: 1;
	min-width: 250px;
	padding: 10px;
	color: var(--text-color);
	line-height: 1.8;
	font-family: var(--font-read);
}

.usercp_info strong {
	color: var(--accent1);
}

/* ===== Latest Threads - Clean Modern Layout ===== */
.usercp_latest_threads {
	margin-bottom: 15px;
	background: var(--block-med);
	border-radius: 4px;
	overflow: hidden;
}

.usercp_latest_threads .thead {
	padding: 15px 20px;
	background: var(--block-dark);
	color: var(--text-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.usercp_latest_threads .thead strong {
	color: var(--accent1);
	font-family: var(--font-header);
	font-size: 18px;
}

.usercp_latest_threads .float_right a {
	color: var(--accent2);
	text-decoration: none;
	font-size: 13px;
	transition: color 0.2s ease;
}

.usercp_latest_threads .float_right a:hover {
	color: var(--accent1);
}

/* Thread Rows */
.usercp_thread_row {
	display: grid;
	grid-template-columns: 50px 1fr 280px;
	gap: 15px;
	padding: 20px;
	align-items: center;
	background: var(--block-light);
	transition: all 0.2s ease;
	position: relative;
}

.usercp_thread_row:first-child {
	border-top: 1px solid rgba(222, 166, 99, 0.15);
}

.usercp_thread_row:hover {
	background: var(--block-med);
}

/* Subtle separator between threads */
.usercp_thread_row::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	height: 1px;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(222, 166, 99, 0.12) 10%, 
		rgba(222, 166, 99, 0.12) 90%, 
		transparent
	);
}

.usercp_thread_row:last-child::after {
	display: none;
}

/* Status Column */
.thread_col_status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-direction: column;
}

.thread_col_status img {
	max-width: 20px;
	max-height: 20px;
}

/* Main Thread Content */
.thread_col_main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.thread_title {
	font-size: 16px;
	line-height: 1.4;
}

.thread_title a {
	color: var(--accent1);
	font-family: var(--font-header);
	text-decoration: none;
	word-wrap: break-word;
	transition: color 0.2s ease;
}

.thread_title a:hover {
	color: var(--accent2);
}

.thread_title img {
	vertical-align: middle;
	margin-right: 5px;
}

.thread_meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 13px;
}

.thread_starter {
	color: var(--text-color);
}

.meta_label {
	color: var(--text-color-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.thread_stats {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.stat_badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--block-dark);
	padding: 5px 12px;
	border-radius: 4px;
	font-size: 12px;
	border: 1px solid rgba(222, 166, 99, 0.3);
	transition: all 0.2s ease;
}

.stat_badge:hover {
	border-color: var(--accent2);
	background: rgba(222, 166, 99, 0.05);
}

.stat_label {
	color: var(--text-color-muted);
	font-weight: normal;
	font-size: 11px;
}

.stat_badge a {
	color: var(--accent1);
	text-decoration: none;
	font-weight: bold;
}

.stat_badge a:hover {
	color: var(--accent2);
}

.stat_replies,
.stat_views {
	color: var(--text-color);
	font-weight: bold;
}

/* Last Post Column - Avatar on Right */
.thread_col_lastpost_modern {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	min-width: 0;
}

.lastpost_info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1;
}

.lastpost_date {
	color: var(--text-color-muted);
	font-size: 11px;
}

.lastpost_user {
	color: var(--text-color);
	font-size: 13px;
	line-height: 1.5;
}

.lastpost_label {
	color: var(--text-color-muted);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lastpost_user a {
	color: var(--accent1);
	text-decoration: none;
	font-weight: bold;
	transition: color 0.2s ease;
}

.lastpost_user a:hover {
	color: var(--accent2);
}

.lastpost_avatar {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	overflow: hidden;
	background: var(--block-dark);
	transition: transform 0.2s ease;
}

.usercp_thread_row:hover .lastpost_avatar {
	transform: scale(1.05);
}

.lastpost_avatar .avatarep_fd {
	width: 100%;
	height: 100%;
}

.lastpost_avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ===== Responsive Breakpoints ===== */
@media (max-width: 968px) {
	.usercp_thread_row {
		grid-template-columns: 45px 1fr 240px;
		padding: 18px;
	}
	
	.lastpost_avatar {
		width: 65px;
		height: 65px;
	}
}

@media (max-width: 768px) {
	.usercp_thread_row {
		grid-template-columns: 1fr;
		gap: 15px;
		padding: 18px;
	}
	
	.thread_col_status {
		flex-direction: row;
		justify-content: flex-start;
		gap: 10px;
	}
	
	.thread_col_main {
		order: 2;
	}
	
	.thread_col_lastpost_modern {
		order: 3;
		padding-top: 12px;
		border-top: 1px solid rgba(222, 166, 99, 0.15);
	}
	
	.thread_meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	
	.thread_stats {
		width: 100%;
	}
	
	.stat_badge {
		flex: 1;
		justify-content: center;
	}
	
	.lastpost_avatar {
		width: 60px;
		height: 60px;
	}
}

@media (max-width: 480px) {
	.usercp_latest_threads .thead {
		padding: 12px 15px;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	
	.usercp_latest_threads .float_right {
		width: 100%;
	}
	
	.usercp_thread_row {
		padding: 15px;
	}
	
	.thread_title {
		font-size: 15px;
	}
	
	.thread_meta {
		font-size: 12px;
	}
	
	.thread_stats {
		flex-direction: column;
		width: 100%;
		gap: 6px;
	}
	
	.stat_badge {
		width: 100%;
	}
	
	.lastpost_avatar {
		width: 55px;
		height: 55px;
	}
	
	.lastpost_info {
		font-size: 12px;
	}
}

/* ===== Notepad ===== */
.usercp_notepad_wrapper {
	margin-bottom: 15px;
}

.usercp_notepad {
	background: var(--block-med);
	border-radius: 4px;
}

.usercp_notepad_content {
	padding: 15px;
	background: var(--block-light);
}

.usercp_notepad_textarea {
	width: 100%;
	min-height: 200px;
	padding: 10px;
	background: var(--block-lighter);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	font-family: var(--font-read);
	font-size: 14px;
	resize: vertical;
	border-radius: 4px;
}

.usercp_notepad_textarea:focus {
	outline: none;
	border-color: var(--accent1);
}

.usercp_notepad_submit {
	text-align: center;
	padding: 15px 0;
}

.usercp_notepad_submit .button {
	background: var(--accent1);
		font-family: var(--font-read);
	color: var(--block-dark);
	border: none;
	padding: 10px 30px;
	font-size: 16px;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.3s;
}

.usercp_notepad_submit .button:hover {
	background: var(--accent2);
}

/* ===== Profile Edit Page ===== */
.usercp_profile_wrapper {
	background: var(--block-med);
	border-radius: 4px;
	margin-bottom: 15px;
}

.usercp_profile_content {
	padding: 20px;
	background: var(--block-light);
}

.usercp_profile_content fieldset {
	background: var(--block-med);
	border: 1px solid var(--accent2);
	padding: 15px;
	margin-bottom: 15px;
	border-radius: 4px;
}

.usercp_profile_content legend {
	color: var(--accent1);
	font-family: var(--font-header);
	padding: 0 10px;
}

.profile_fields_container,
.profile_optional_grid {
	color: var(--text-color);
}

.profile_optional_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.profile_optional_right {
	padding-left: 20px;
	border-left: 1px solid var(--accent2);
}

.profile_notice {
	margin-bottom: 15px;
	padding: 10px;
	background: var(--block-dark);
	border-radius: 4px;
}

.usercp_profile_submit {
	text-align: center;
	padding: 15px 0;
}

.usercp_profile_submit .button {
	background: var(--accent1);
	color: var(--block-dark);
	border: none;
	padding: 12px 40px;
	font-family: var(--font-read);
	font-size: 16px;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.3s;
}

.usercp_profile_submit .button:hover {
	background: var(--accent2);
}

/* ===== Form Elements ===== */
.usercp_profile_content select,
.usercp_profile_content input[type="text"],
.usercp_profile_content .textbox {
	background: var(--block-light);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	padding: 8px;
	border-radius: 4px;
	font-family: var(--font-read);
}

.usercp_profile_content select:focus,
.usercp_profile_content input[type="text"]:focus,
.usercp_profile_content .textbox:focus {
	outline: none;
	border-color: var(--accent1);
}

/* ===== Responsive Breakpoints ===== */
@media (max-width: 768px) {
	.usercp_container {
		flex-direction: column;
	}
	
	.usercp_nav_column {
		flex: 1 1 100%;
		width: 100%;
		min-width: 100%;
		order: 2;
	}
	
	.usercp_content_column {
		flex: 1 1 100%;
		width: 100%;
		order: 1;
	}
	
	.usercp_summary_content {
		flex-direction: column;
		align-items: center;
	}
	
	.usercp_threads_header {
		display: none;
	}
	
	.usercp_thread_row {
		grid-template-columns: 1fr;
		grid-template-areas:
			"icons"
			"subject"
			"stats"
			"lastpost";
		gap: 10px;
	}
	
	.thread_col_icon,
	.thread_col_icon2 {
		grid-area: icons;
		display: inline-block;
		text-align: left;
	}
	
	.thread_col_subject {
		grid-area: subject;
	}
	
	.thread_col_replies,
	.thread_col_views {
		grid-area: stats;
		display: inline-block;
		text-align: left;
	}
	
	.thread_col_replies::before {
		content: "Replies: ";
		font-weight: bold;
		color: var(--accent1);
	}
	
	.thread_col_views::before {
		content: " | Views: ";
		font-weight: bold;
		color: var(--accent1);
	}
	
	.thread_col_lastpost {
		grid-area: lastpost;
		white-space: normal;
	}
	
	.profile_optional_grid {
		grid-template-columns: 1fr;
	}
	
	.profile_optional_right {
		border-left: none;
		border-top: 1px solid var(--accent2);
		padding-left: 0;
		padding-top: 20px;
	}
}

@media (max-width: 480px) {
	.usercp_summary_content,
	.usercp_notepad_content,
	.usercp_profile_content {
		padding: 10px;
	}
	
	.usercp_info {
		padding: 5px;
		min-width: 100%;
	}
	
	.usercp_nav_item {
		padding: 8px;
	}
}

/* ===== User CP Container ===== */
.usercp_container {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	width: 100%;
}

.usercp_nav_column {
	flex: 0 0 220px;
	min-width: 220px;
}

.usercp_content_column {
	flex: 1;
	min-width: 0;
}

/* ===== Profile Edit Page ===== */
.usercp_profile_wrapper {
	background: var(--block-med);
	border-radius: 4px;
	margin-bottom: 15px;
}

.usercp_profile_wrapper .thead {
	padding: 1em;
	background: var(--block-dark);
	color: var(--accent1);
	font-family: var(--font-title);
	font-size: 2em;
	border-bottom: 2px solid var(--accent1);
}

.usercp_profile_content {
	padding: 25px;
	background: var(--block-light);
}

.usercp_fieldset {
	background: var(--block-dark);
	border: 1px solid rgba(222, 166, 99, 0.3);
	padding: 25px;
	margin-bottom: 25px;
	border-radius: 4px;
}

.usercp_fieldset legend strong, .usercp_profile_content .trow2 strong {
	color: rgba(228,229,231,0.85);
	padding: 0 15px;
	font-size: 1.1em;
	font-weight: bold;
}



/* Header styling — full control version */
.app-fieldset .app-header {
  display: block;
  color: var(--accent1);
  font-family: var(--font-title);
  font-size: 3em;
  font-weight: 300;
  text-align: center;
  margin: -10px auto 20px; /* pulls it slightly into the fieldset border */
  padding: 0 20px;
  background: var(--block-med);
  width: max-content;
  border-radius: 4px;
  line-height: 1.2;
}

/* Optional: if you want a decorative line under it */
.app-fieldset .app-header::after {
  content: "";
  display: block;
  max-width: 200px;
  height: 1px;
  background: var(--accent1);
  margin: 8px auto 0;
  border-radius: 1px;
}

/* Keep spacing and layout consistent inside */
.customfields-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.profile_fields_container {
	color: var(--text-color);
	font-family: var(--font-read);
}

.profile_optional_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	color: var(--text-color);
	font-family: var(--font-read);
}

.profile_optional_left {
  padding: 15px;
  background: var(--block-med);
  border-radius: 4px;
}

/* add spacing around each form control */
.profile_optional_left select,
.profile_optional_left input[type="text"],
.profile_optional_left input[type="number"],
.profile_optional_left input[type="date"] {
  margin: 6px 4px 10px 0;   /* top right bottom left */
  padding: 6px 8px;
}

/* optional: make the groupings (like birthday selects) feel unified */
.profile_optional_left br + select,
.profile_optional_left br + input {
  margin-top: 8px;
}


.profile_optional_right {
	padding: 20px;
	background: var(--block-light);
	border-left: 3px solid var(--accent2);
	border-radius: 4px;
}

.profile_notice {
	margin-bottom: 20px;
	padding: 15px;
	background: var(--block-med);
	border-radius: 4px;
	border-left: 3px solid var(--accent1);
}

.usercp_profile_submit {
	text-align: center;
	padding: 20px 0;
}

.usercp_profile_submit .button {
	background: var(--accent1);
	color: var(--block-dark);
	border: none;
	padding: 14px 50px;
 font-family: var(--font-read);
	font-size: 16px;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.usercp_profile_submit .button:hover {
	background: var(--accent2);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(222, 166, 99, 0.3);
}

/* Form Elements */
.usercp_profile_content select,
.usercp_profile_content input[type="text"],
.usercp_profile_content .textbox,
.usercp_profile_content textarea {
	background: var(--block-light);
	border: 1px solid rgba(222, 166, 99, 0.3);
	color: var(--text-color);
	padding: 10px;
	border-radius: 4px;
	font-family: var(--font-read);
	font-size: 14px;
	transition: border-color 0.3s ease;
}

.usercp_profile_content select:focus,
.usercp_profile_content input[type="text"]:focus,
.usercp_profile_content .textbox:focus,
.usercp_profile_content textarea:focus {
	outline: none;
	border-color: var(--accent1);
	box-shadow: 0 0 0 2px rgba(222, 166, 99, 0.1);
}

.usercp_profile_content textarea {
	width: 100%;
	min-height: 120px;
	resize: vertical;
}

.usercp_profile_content select {
	min-width: 120px;
	margin-right: 8px;
}

/* Labels and text */
.usercp_profile_content .smalltext {
	color: var(--text-color-muted);
	font-size: 13px;
	line-height: 1.6;
}

.usercp_profile_content strong {
	color: var(--text-color-muted);
	font-size: 1em;
	display: block;
}

/* Custom field instructions in right column */
.profile_optional_right strong {
	display: block;
	margin-bottom: 12px;
	font-size: 15px;
	color: var(--accent1);
}

.profile_optional_right .smalltext {
	display: block;
	line-height: 1.8;
	padding-left: 5px;
}

/* Profile field descriptions */
.profile-field-desc {
	display: block;
	line-height: 1.2;
	padding: 1em;
	background: var(--block-dark);
	border-radius: 5px;
	color: var(--text-color-muted)!important;
}

/* Responsive */
@media (max-width: 968px) {
	.usercp_container {
		gap: 15px;
	}
	
	.profile_optional_grid {
		gap: 30px;
	}
}

@media (max-width: 768px) {
	.usercp_container {
		flex-direction: column;
	}
	
	.usercp_nav_column {
		flex: 1 1 100%;
		width: 100%;
		min-width: 100%;
		order: 2;
	}
	
	.usercp_content_column {
		flex: 1 1 100%;
		width: 100%;
		order: 1;
	}
	
	.profile_optional_grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.profile_optional_right {
		border-left: none;
		border-top: 3px solid var(--accent2);
		padding-left: 15px;
		padding-top: 20px;
	}
	
	.usercp_fieldset {
		padding: 20px;
	}
	
	.usercp_profile_content {
		padding: 20px;
	}
}

@media (max-width: 480px) {
	.usercp_profile_wrapper .thead {
		font-size: 1.5em;
		padding: 0.8em;
	}
	
	.usercp_profile_content {
		padding: 15px;
	}
	
	.usercp_fieldset {
		padding: 15px;
	}
	
	.profile_optional_grid {
		gap: 15px;
	}
	
	.usercp_profile_submit .button {
		width: 100%;
		padding: 12px;
	}
}


.customfields-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px; /* space between each field row */
}

.customfield-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* optional visual separation */
  padding-bottom: 10px;
}

.customfield-left,
.customfield-right {
  flex: 1 1 65%;
  min-width: 250px;
}

.customfield-left span {
	color: var(--accent1);
	font-size: 1.2em;
  font-weight: 600;
}

.customfield-right strong {
  display: block;
  margin-bottom: 4px;
}


.usertitle-block {
  display: flex;
  flex-direction: column;
  gap: var(--cell-gap, 8px); /* mimic old cellpadding */
}

.usertitle-row {
  /* optional: add a subtle separation if you like */
  /* padding: 4px 0; */
}

.away-block {
  display: flex;
  flex-direction: column;
  gap: var(--cell-gap, 8px);
}

.away-row { /* each former TR */
  /* optional: padding: 2px 0; */
}

.away-status {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.away-date {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.away-date-field select,
.away-date-field input {
  /* inherit your theme inputs naturally */
  max-width: 100%;
}



/* ===== Avatar Page Specific Styles ===== */

/* Avatar info section */
.avatar_info_section {
    padding: 20px;
    background: var(--block-light);
    border-radius: 4px;
    line-height: 1.8;
}

.avatar_info_section > div:first-child {
    margin-bottom: 20px;
    color: var(--text-color);
}

/* Current avatar display */
.avatar_info_section table,
.avatar_info_section td {
    background: transparent !important;
    border: none !important;
}

.avatar_info_section img {
    display: block;
    border-radius: 4px;
    border: 2px solid var(--accent2);
    padding: 5px;
    background: var(--block-med);
	width: 250px;
		height:500px;
	object-fit: cover;
}

/* Avatar upload section */
.avatar_upload_section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: var(--block-light);
    border-radius: 4px;
}

/* Style the upload/remote rows */
.avatar_upload_section table,
.avatar_upload_section tbody,
.avatar_upload_section tr {
    display: block;
    width: 100%;
    background: transparent !important;
    border: none !important;
}

.avatar_upload_section td {
    display: block;
    width: 100%;
    padding: 12px 0 !important;
    background: transparent !important;
    border: none !important;
}

.avatar_upload_section td:first-child {
    margin-bottom: 8px;
}

.avatar_upload_section strong {
    color: var(--accent1);
    font-size: 1.1em;
    display: block;
    margin-bottom: 5px;
}

.avatar_upload_section .smalltext {
    color: var(--text-color);
    font-size: 0.9em;
    display: block;
    margin-top: 5px;
}

/* File upload and text inputs */
.avatar_upload_section input[type="file"],
.avatar_upload_section input[type="text"] {
    background: var(--block-med);
    border: 1px solid rgba(222, 166, 99, 0.3);
    color: var(--text-color);
    padding: 10px;
    border-radius: 4px;
    font-family: var(--font-read);
    font-size: 14px;
    width: 100%;
    max-width: 500px;
    transition: border-color 0.3s ease;
}

.avatar_upload_section input[type="file"]:focus,
.avatar_upload_section input[type="text"]:focus {
    outline: none;
    border-color: var(--accent1);
    box-shadow: 0 0 0 2px rgba(222, 166, 99, 0.1);
}

/* Separation between upload and URL sections */
.avatar_upload_section tr:not(:last-child) {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(222, 166, 99, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
    .avatar_info_section,
    .avatar_upload_section {
        padding: 15px;
    }
    
    .avatar_upload_section input[type="file"],
    .avatar_upload_section input[type="text"] {
        max-width: 100%;
    }
}

/* ===== Avatar Page Specific Styles ===== */

/* Avatar info section */
.avatar_info_section {
    padding: 20px;
    background: var(--block-light);
    border-radius: 4px;
    line-height: 1.8;
}

.avatar_info_section > div:first-child {
    margin-bottom: 20px;
    color: var(--text-color);
}

/* Current avatar display */
.avatar_info_section table,
.avatar_info_section td {
    background: transparent !important;
    border: none !important;
}

.avatar_info_section img {
    display: block;
    border-radius: 4px;
    border: 2px solid var(--accent2);
    padding: 5px;
    background: var(--block-med);
}

/* Avatar upload section */
.avatar_upload_section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: var(--block-light);
    border-radius: 4px;
}

/* Style the upload/remote rows */
.avatar_upload_section table,
.avatar_upload_section tbody,
.avatar_upload_section tr {
    display: block;
    width: 100%;
    background: transparent !important;
    border: none !important;
}

.avatar_upload_section td {
    display: block;
    width: 100%;
    padding: 12px 0 !important;
    background: transparent !important;
    border: none !important;
}

.avatar_upload_section td:first-child {
    margin-bottom: 8px;
}

.avatar_upload_section td:first-child strong {
    color: var(--accent1);
    font-size: 1.1em;
    display: block;
    margin-bottom: 5px;
}

.avatar_upload_section .smalltext {
    color: var(--text-color-muted);
    font-size: 0.9em;
    display: block;
    margin-top: 5px;
}

/* File upload and text inputs */
.avatar_upload_section input[type="file"],
.avatar_upload_section input[type="text"] {
    background: var(--block-med);
    border: 1px solid rgba(222, 166, 99, 0.3);
    color: var(--text-color);
    padding: 10px;
    border-radius: 4px;
    font-family: var(--font-read);
    font-size: 14px;
    width: 100%;
    max-width: 500px;
    transition: border-color 0.3s ease;
}

.avatar_upload_section input[type="file"]:focus,
.avatar_upload_section input[type="text"]:focus {
    outline: none;
    border-color: var(--accent1);
    box-shadow: 0 0 0 2px rgba(222, 166, 99, 0.1);
}

/* Separation between upload and URL sections */
.avatar_upload_section tr:not(:last-child) {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(222, 166, 99, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
    .avatar_info_section,
    .avatar_upload_section {
        padding: 15px;
    }
    
    .avatar_upload_section input[type="file"],
    .avatar_upload_section input[type="text"] {
        max-width: 100%;
    }
}


/* ===== Signature Page Specific Styles ===== */

/* Make page header 3em */
.usercp_profile_wrapper .thead {
    padding: 1em;
    background: var(--block-dark);
    color: var(--accent1);
    font-family: var(--font-title);
    font-size: 3em;
    border-bottom: 2px solid var(--accent1);
}

/* Current signature display */
.usercp_current_signature {
    margin-bottom: 20px;
    background: var(--block-med);
    border-radius: 4px;
    overflow: hidden;
}

.signature_preview_header {
    padding: 15px 20px;
    background: var(--block-dark);
    border-bottom: 2px solid var(--accent1);
}

.signature_preview_header strong {
    color: var(--accent1);
    font-family: var(--font-header);
    font-size: 1.5em;
}

.signature_preview_content {
    padding: 25px;
    background: var(--block-light);
    color: var(--text-color);
    line-height: 1.8;
    min-height: 80px;
}

.signature_preview_content:empty::before {
    content: 'No signature set';
    color: var(--text-color-muted);
    font-style: italic;
}

/* Signature editor - vertical layout */
.usercp_fieldset {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Instructions on top */
.signature_instructions_top {
    padding: 15px 20px;
    background: var(--block-med);
    border-radius: 4px;
    border-left: 3px solid var(--accent2);
}

.signature_instructions_top strong {
    display: block;
    color: var(--accent1);
    font-size: 1.1em;
    margin-bottom: 10px;
    line-height: 1.6;
}

.signature_instructions_top .smalltext {
    color: var(--text-color);
    font-size: 0.95em;
    line-height: 1.8;
}

/* Smilie inserter styling */
.signature_instructions_top #clickablesmilies {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(222, 166, 99, 0.2);
}

/* Editor area below instructions */
.signature_editor_area {
    padding: 20px;
    background: var(--block-light);
    border-radius: 4px;
}

.signature_editor_area textarea {
    width: 100%;
    min-height: 200px;
    padding: 15px;
    background: var(--block-med);
    border: 1px solid rgba(222, 166, 99, 0.3);
    color: var(--text-color);
    font-family: var(--font-read);
    font-size: 14px;
    border-radius: 4px;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.signature_editor_area textarea:focus {
    outline: none;
    border-color: var(--accent1);
    box-shadow: 0 0 0 2px rgba(222, 166, 99, 0.1);
}

/* SCEditor container styling */
.signature_editor_area .sceditor-container {
    background: var(--block-med);
    border: 1px solid rgba(222, 166, 99, 0.3);
    border-radius: 4px;
}

.signature_editor_area .sceditor-toolbar {
    background: var(--block-dark);
    border-bottom: 1px solid rgba(222, 166, 99, 0.3);
}

/* Signature options section */
.signature_options_section {
    margin-top: 20px;
}

/* Options area below instructions */
.signature_options_area {
    padding: 20px;
    background: var(--block-light);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.signature_option_label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: var(--block-med);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.signature_option_label:hover {
    background: var(--block-dark);
    border-color: rgba(222, 166, 99, 0.3);
}

.signature_option_label input[type="radio"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    margin: 0;
}

.signature_option_label span {
    color: var(--text-color);
    font-size: 0.95em;
    line-height: 1.5;
}

.signature_option_label input[type="radio"]:checked + span {
    color: var(--accent1);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .usercp_profile_wrapper .thead {
        font-size: 2em;
        padding: 0.8em;
    }
    
    .signature_editor_area,
    .signature_options_area,
    .signature_instructions_top {
        padding: 15px;
    }
    
    .signature_option_label {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .usercp_profile_wrapper .thead {
        font-size: 1.5em;
    }
    
    .usercp_profile_submit .button {
        width: 100%;
        margin-bottom: 10px;
    }
}


/* ===== Thread Subscriptions Page ===== */

/* Main subscriptions wrapper */
.thread_subscriptions_wrapper {
	background: var(--block-light);
}

/* Header Row */
.threadsub_header_row {
	display: grid;
	grid-template-columns: 30px 40px 1fr 80px 80px 150px 60px 40px;
	gap: 12px;
	padding: 12px 15px;
	background: var(--block-dark);
	align-items: center;
	border-top: 1px solid rgba(222, 166, 99, 0.2);
	font-family: var(--font-header);
}

.threadsub_header_row strong {
	color: var(--accent1);
	font-size: 14px;
}

/* Thread Row */
.threadsub_row {
	display: grid;
	grid-template-columns: 30px 40px 1fr 80px 80px 150px 60px 40px;
	gap: 12px;
	padding: 15px;
	align-items: center;
	border-top: 1px solid var(--block-dark);
	background: var(--block-light);
	transition: background 0.2s ease;
	position: relative;
}

.threadsub_row:hover {
	background: var(--block-med);
}

/* Subtle separator between rows */
.threadsub_row::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	height: 1px;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(222, 166, 99, 0.12) 10%, 
		rgba(222, 166, 99, 0.12) 90%, 
		transparent
	);
}

.threadsub_row:last-child::after {
	display: none;
}

/* Individual Columns */
.threadsub_col_status {
	display: flex;
	align-items: center;
	justify-content: center;
}

.threadsub_col_status .thread_status {
	width: 20px;
	height: 20px;
	display: inline-block;
}

.threadsub_col_icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.threadsub_col_icon img {
	max-width: 28px;
	max-height: 28px;
}

.threadsub_col_subject {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.threadsub_col_subject a {
	color: var(--accent1);
	font-family: var(--font-header);
	font-size: 15px;
	text-decoration: none;
	word-wrap: break-word;
	transition: color 0.2s ease;
	line-height: 1.4;
}

.threadsub_col_subject a:hover {
	color: var(--accent2);
}

.threadsub_col_subject .smalltext {
	color: var(--text-color-muted);
	font-size: 12px;
	font-family: var(--font-read);
}

.threadsub_col_replies,
.threadsub_col_views {
	text-align: center;
	color: var(--text-color);
	font-family: var(--font-read);
}

.threadsub_col_replies a {
	color: var(--accent1);
	text-decoration: none;
}

.threadsub_col_replies a:hover {
	color: var(--accent2);
	text-decoration: underline;
}

/* Last Post Text Info Only */
.threadsub_col_lastpost {
	color: var(--text-color-muted);
	font-size: 12px;
	font-family: var(--font-read);
	line-height: 1.5;
}

.threadsub_col_lastpost .lastpost_info {
	display: block;
}

.threadsub_col_lastpost a {
	color: var(--accent1);
	text-decoration: none;
	display: inline !important;
}

.threadsub_col_lastpost a:hover {
	color: var(--accent2);
}

/* Avatar Column - Separate */
.threadsub_col_avatar {
	display: flex;
	align-items: center;
	justify-content: center;
}

.threadsub_col_avatar img,
.threadsub_col_avatar .avatarep_img {
	width: 100px !important;
	height: 100px !important;
	max-height: 100px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.threadsub_col_checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
}

.threadsub_col_checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

/* Footer Actions */
.subscriptions_footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: var(--block-med);
	border-top: 2px solid var(--block-dark);
	flex-wrap: wrap;
	gap: 15px;
}

.subscriptions_footer_left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.subscriptions_footer_left strong {
	color: var(--accent1);
	font-family: var(--font-header);
}

.subscriptions_footer_left select {
	background: var(--block-dark);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	padding: 8px 12px;
	border-radius: 4px;
	font-family: var(--font-read);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.subscriptions_footer_left select:focus {
	outline: none;
	border-color: var(--accent1);
}

.subscriptions_footer_right strong a {
	color: var(--accent2);
	text-decoration: none;
	font-family: var(--font-header);
	transition: color 0.2s ease;
}

.subscriptions_footer_right strong a:hover {
	color: var(--accent1);
}

/* Thread Legend */
.thread_legend_wrapper {
	margin-top: 20px;
	background: var(--block-med);
	border-radius: 4px;
	padding: 15px;
}

.thread_legend_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}

.thread_legend_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--block-light);
	border-radius: 4px;
	font-size: 13px;
	color: var(--text-color);
	font-family: var(--font-read);
}

.thread_legend_item .thread_status {
	width: 20px;
	height: 20px;
	display: inline-block;
	flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 968px) {
	.threadsub_header_row {
		grid-template-columns: 30px 1fr 120px 50px 40px;
	}
	
	.threadsub_row {
		grid-template-columns: 30px 1fr 120px 50px 40px;
	}
	
	.threadsub_col_icon,
	.threadsub_col_replies,
	.threadsub_col_views {
		display: none;
	}
	
	.thread_legend_grid {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

@media (max-width: 768px) {
	.threadsub_header_row {
		display: none;
	}
	
	.threadsub_row {
		grid-template-columns: 1fr;
		grid-template-areas:
			"status"
			"subject"
			"lastpost"
			"avatar"
			"checkbox";
		gap: 12px;
		padding: 15px;
	}
	
	.threadsub_col_status {
		grid-area: status;
		justify-content: flex-start;
	}
	
	.threadsub_col_subject {
		grid-area: subject;
	}
	
	.threadsub_col_lastpost {
		grid-area: lastpost;
		padding: 10px;
		background: var(--block-dark);
		border-radius: 4px;
	}
	
	.threadsub_col_avatar {
		grid-area: avatar;
		justify-content: flex-start;
	}
	
	.threadsub_col_checkbox {
		grid-area: checkbox;
		justify-content: flex-start;
	}
	
	.subscriptions_footer {
		flex-direction: column;
		align-items: stretch;
	}
	
	.subscriptions_footer_left,
	.subscriptions_footer_right {
		width: 100%;
		justify-content: center;
	}
	
	.subscriptions_footer_left {
		flex-direction: column;
		align-items: stretch;
	}
	
	.subscriptions_footer_left select {
		width: 100%;
	}
	
	.thread_legend_grid {
		grid-template-columns: 1fr;
	}
	
	/* Smaller avatar on mobile */
	.threadsub_col_avatar img,
	.threadsub_col_avatar .avatarep_img {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px;
		min-height: 40px;
		max-width: 40px;
		max-height: 40px;
	}
}

@media (max-width: 480px) {
	.threadsub_row {
		padding: 12px;
	}
	
	.subscriptions_footer {
		padding: 12px;
	}
	
	.thread_legend_wrapper {
		padding: 12px;
	}
}


/* ===== UserCP Options Page ===== */

/* Full width section for privacy */
.options_full_width {
	margin-bottom: 20px;
}

.options_full_width fieldset.trow2 {
	background: var(--block-med);
	border: none;
	border-radius: 4px;
	padding: 0;
	margin: 0;
}

.options_full_width fieldset.trow2 legend {
	background: var(--block-dark);
	padding: 12px 15px;
	font-family: var(--font-header);
	font-size: 15px;
	color: var(--accent1);
	font-weight: bold;
	width: 100%;
	border-radius: 4px 4px 0 0;
	border-bottom: 2px solid var(--accent2);
}

.options_full_width fieldset.trow2 table {
	width: 100%;
	background: var(--block-light);
	border-radius: 0 0 4px 4px;
}

.options_full_width fieldset.trow2 table tr {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px;
}

.options_full_width fieldset.trow2 table td {
	display: flex;
	align-items: center;
}

.options_full_width fieldset.trow2 input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.options_full_width fieldset.trow2 label {
	color: var(--text-color);
	font-family: var(--font-read);
	font-size: 14px;
	cursor: pointer;
}

.options_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.options_left_column,
.options_right_column {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Fieldset Styling */
.usercp_fieldset {
	background: var(--block-med);
	border-radius: 4px;
	overflow: hidden;
}

.fieldset_header {
	background: var(--block-dark);
	padding: 12px 15px;
	font-family: var(--font-header);
	font-size: 15px;
	color: var(--accent1);
	font-weight: bold;
	border-bottom: 2px solid var(--accent2);
}

.fieldset_content {
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Option Rows */
.option_row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background: var(--block-light);
	border-radius: 4px;
}

.option_row label {
	color: var(--text-color);
	font-family: var(--font-read);
	font-size: 14px;
	flex: 1;
	cursor: pointer;
}

.option_row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	flex-shrink: 0;
}

.option_row select {
	background: var(--block-dark);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	padding: 8px 12px;
	border-radius: 4px;
	font-family: var(--font-read);
	flex: 1;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.option_row select:focus {
	outline: none;
	border-color: var(--accent1);
}

/* When label and select are in the same row */
.option_row:has(select) {
	flex-direction: column;
	align-items: stretch;
}

.option_row:has(select) label {
	margin-bottom: 5px;
	font-weight: bold;
	color: var(--accent1);
}

/* Responsive */
@media (max-width: 968px) {
	.options_grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.fieldset_content {
		padding: 12px;
	}
	
	.option_row {
		padding: 10px;
	}
	
	.options_full_width fieldset.trow2 table tr {
		padding: 12px;
	}
}


/* ===== UserCP Password Page ===== */

.password_field_row {
	display: grid;
	grid-template-columns: 40% 60%;
	align-items: center;
	gap: 15px;
	padding: 10px;
	background: var(--block-light);
	border-radius: 4px;
}

.password_field_row label {
	color: var(--text-color);
	font-family: var(--font-read);
	font-size: 14px;
}

.password_field_row input[type="password"] {
	background: var(--block-dark);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	padding: 10px;
	border-radius: 4px;
	font-family: var(--font-read);
	font-size: 14px;
	transition: border-color 0.3s ease;
}

.password_field_row input[type="password"]:focus {
	outline: none;
	border-color: var(--accent1);
	box-shadow: 0 0 0 2px rgba(222, 166, 99, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
	.password_field_row {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	
	.password_field_row label {
		font-weight: bold;
	}
}


/* ===== UserCP Password & Email Pages ===== */

.password_field_row {
	display: grid;
	grid-template-columns: 40% 60%;
	align-items: center;
	gap: 15px;
	padding: 10px;
	background: var(--block-light);
	border-radius: 4px;
}

.password_field_row label {
	color: var(--text-color);
	font-family: var(--font-read);
	font-size: 14px;
}

.password_field_row input[type="password"],
.password_field_row input[type="text"] {
	background: var(--block-dark);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	padding: 10px;
	border-radius: 4px;
	font-family: var(--font-read);
	font-size: 14px;
	transition: border-color 0.3s ease;
}

.password_field_row input[type="password"]:focus,
.password_field_row input[type="text"]:focus {
	outline: none;
	border-color: var(--accent1);
	box-shadow: 0 0 0 2px rgba(222, 166, 99, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
	.password_field_row {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	
	.password_field_row label {
		font-weight: bold;
	}
}


/* ===== UserCP Drafts Page ===== */

.drafts_wrapper {
	background: var(--block-light);
}

/* Header Row */
.drafts_header_row {
	display: grid;
	grid-template-columns: 1fr 200px 150px 40px;
	gap: 12px;
	padding: 12px 15px;
	background: var(--block-dark);
	align-items: center;
	border-top: 1px solid rgba(222, 166, 99, 0.2);
	font-family: var(--font-header);
}

.drafts_header_row strong {
	color: var(--accent1);
	font-size: 14px;
}

/* No Drafts Message */
.drafts_no_content {
	padding: 30px 20px;
	text-align: center;
	color: var(--text-color-muted);
	font-family: var(--font-read);
	font-size: 14px;
	background: var(--block-light);
	border-top: 1px solid var(--block-dark);
}

/* Draft Row */
.drafts_row {
	display: grid;
	grid-template-columns: 1fr 200px 150px 40px;
	gap: 12px;
	padding: 15px;
	align-items: center;
	border-top: 1px solid var(--block-dark);
	background: var(--block-light);
	transition: background 0.2s ease;
	position: relative;
}

.drafts_row:hover {
	background: var(--block-med);
}

/* Subtle separator between rows */
.drafts_row::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	height: 1px;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(222, 166, 99, 0.12) 10%, 
		rgba(222, 166, 99, 0.12) 90%, 
		transparent
	);
}

.drafts_row:last-child::after {
	display: none;
}

/* Individual Columns */
.drafts_col_title {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.drafts_col_title strong {
	color: var(--accent1);
	font-family: var(--font-header);
	font-size: 15px;
	line-height: 1.4;
}

.drafts_col_title .smalltext {
	color: var(--text-color-muted);
	font-size: 12px;
	font-family: var(--font-read);
}

.drafts_col_title .smalltext a {
	color: var(--accent1);
	text-decoration: none;
}

.drafts_col_title .smalltext a:hover {
	color: var(--accent2);
	text-decoration: underline;
}

.drafts_col_saved {
	text-align: center;
	color: var(--text-color-muted);
	font-family: var(--font-read);
	font-size: 13px;
}

.drafts_col_options {
	text-align: center;
}

.drafts_col_options a {
	color: var(--accent1);
	text-decoration: none;
	font-family: var(--font-read);
	font-size: 13px;
}

.drafts_col_options a:hover {
	color: var(--accent2);
	text-decoration: underline;
}

.drafts_col_checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
}

.drafts_col_checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

/* Header checkbox */
.drafts_header_row .drafts_col_checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
}

/* Responsive Design */
@media (max-width: 968px) {
	.drafts_header_row {
		grid-template-columns: 1fr 150px 40px;
	}
	
	.drafts_row {
		grid-template-columns: 1fr 150px 40px;
	}
	
	.drafts_col_options {
		display: none;
	}
}

@media (max-width: 768px) {
	.drafts_header_row {
		display: none;
	}
	
	.drafts_row {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"saved"
			"checkbox";
		gap: 12px;
		padding: 15px;
	}
	
	.drafts_col_title {
		grid-area: title;
	}
	
	.drafts_col_saved {
		grid-area: saved;
		text-align: left;
		padding: 10px;
		background: var(--block-dark);
		border-radius: 4px;
	}
	
	.drafts_col_saved::before {
		content: "Saved: ";
		font-weight: bold;
		color: var(--accent1);
	}
	
	.drafts_col_checkbox {
		grid-area: checkbox;
		justify-content: flex-start;
	}
	
	.drafts_no_content {
		padding: 20px 15px;
	}
}

@media (max-width: 480px) {
	.drafts_row {
		padding: 12px;
	}
}


/* ===== UserCP Attachments Page ===== */

.attachments_wrapper {
	background: var(--block-light);
}

/* Header Row */
.attachments_header_row {
	display: grid;
	grid-template-columns: 40px 1fr 1fr 150px 40px;
	gap: 12px;
	padding: 12px 15px;
	background: var(--block-dark);
	align-items: center;
	border-top: 1px solid rgba(222, 166, 99, 0.2);
	font-family: var(--font-header);
}

.attachments_header_row strong {
	color: var(--accent1);
	font-size: 14px;
}

/* No Attachments Message */
.attachments_no_content {
	padding: 30px 20px;
	text-align: center;
	color: var(--text-color-muted);
	font-family: var(--font-read);
	font-size: 14px;
	background: var(--block-light);
	border-top: 1px solid var(--block-dark);
}

/* Attachment Row */
.attachments_row {
	display: grid;
	grid-template-columns: 40px 1fr 1fr 150px 40px;
	gap: 12px;
	padding: 15px;
	align-items: center;
	border-top: 1px solid var(--block-dark);
	background: var(--block-light);
	transition: background 0.2s ease;
	position: relative;
}

.attachments_row:hover {
	background: var(--block-med);
}

/* Subtle separator between rows */
.attachments_row::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	height: 1px;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(222, 166, 99, 0.12) 10%, 
		rgba(222, 166, 99, 0.12) 90%, 
		transparent
	);
}

.attachments_row:last-child::after {
	display: none;
}

/* Individual Columns */
.attach_col_icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.attach_col_icon img {
	max-width: 24px;
	max-height: 24px;
}

.attach_col_file {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.attach_col_file a {
	color: var(--accent1);
	font-family: var(--font-header);
	font-size: 14px;
	text-decoration: none;
	word-wrap: break-word;
	transition: color 0.2s ease;
}

.attach_col_file a:hover {
	color: var(--accent2);
}

.attach_col_file .smalltext {
	color: var(--text-color-muted);
	font-size: 12px;
	font-family: var(--font-read);
}

.attach_col_post {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.attach_col_post a {
	color: var(--accent1);
	font-family: var(--font-read);
	font-size: 14px;
	text-decoration: none;
	word-wrap: break-word;
	transition: color 0.2s ease;
}

.attach_col_post a:hover {
	color: var(--accent2);
}

.attach_col_post .smalltext {
	color: var(--text-color-muted);
	font-size: 12px;
	font-family: var(--font-read);
}

.attach_col_post .smalltext a {
	font-size: 12px;
}

.attach_col_date {
	text-align: center;
	color: var(--text-color-muted);
	font-family: var(--font-read);
	font-size: 13px;
}

.attach_col_checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
}

.attach_col_checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

/* Stats Section */
.attachments_stats_wrapper {
	margin-top: 20px;
}

.attachments_stats {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.stat_row {
	display: grid;
	grid-template-columns: 40% 60%;
	padding: 12px 15px;
	border-bottom: 1px solid var(--block-dark);
	background: var(--block-light);
}

.stat_row:nth-child(even) {
	background: var(--block-med);
}

.stat_row:last-child {
	border-bottom: none;
}

.stat_label {
	color: var(--accent1);
	font-family: var(--font-read);
	font-size: 14px;
}

.stat_value {
	color: var(--text-color);
	font-family: var(--font-read);
	font-size: 14px;
}

/* Responsive Design */
@media (max-width: 968px) {
	.attachments_header_row {
		grid-template-columns: 40px 1fr 120px 40px;
	}
	
	.attachments_row {
		grid-template-columns: 40px 1fr 120px 40px;
	}
	
	.attach_col_post {
		display: none;
	}
}

@media (max-width: 768px) {
	.attachments_header_row {
		display: none;
	}
	
	.attachments_row {
		grid-template-columns: 1fr;
		grid-template-areas:
			"icon"
			"file"
			"post"
			"date"
			"checkbox";
		gap: 12px;
		padding: 15px;
	}
	
	.attach_col_icon {
		grid-area: icon;
		justify-content: flex-start;
	}
	
	.attach_col_file {
		grid-area: file;
	}
	
	.attach_col_post {
		grid-area: post;
		display: flex;
		padding: 10px;
		background: var(--block-dark);
		border-radius: 4px;
	}
	
	.attach_col_date {
		grid-area: date;
		text-align: left;
		padding: 10px;
		background: var(--block-dark);
		border-radius: 4px;
	}
	
	.attach_col_date::before {
		content: "Uploaded: ";
		font-weight: bold;
		color: var(--accent1);
	}
	
	.attach_col_checkbox {
		grid-area: checkbox;
		justify-content: flex-start;
	}
	
	.stat_row {
		grid-template-columns: 1fr;
		gap: 5px;
	}
	
	.stat_label {
		font-weight: bold;
	}
}

@media (max-width: 480px) {
	.attachments_row {
		padding: 12px;
	}
	
	.stat_row {
		padding: 10px;
	}
}



/* ===== UserCP Relationships Page (Plugin) ===== */

.relationships_wrapper {
	background: var(--block-light);
}

/* Header Row */
.relationships_header_row {
	display: grid;
	grid-template-columns: 1fr 200px 150px 150px;
	gap: 12px;
	padding: 12px 15px;
	background: var(--block-dark);
	align-items: center;
	border-top: 1px solid rgba(222, 166, 99, 0.2);
	font-family: var(--font-header);
	text-align: center;
}

.relationships_header_row strong {
	color: var(--accent1);
	font-size: 14px;
}

.rel_col_user {
	text-align: left;
}

/* Relationship Row */
.relationships_row {
	display: grid;
	grid-template-columns: 1fr 200px 150px 150px;
	gap: 12px;
	padding: 15px;
	align-items: center;
	border-top: 1px solid var(--block-dark);
	background: var(--block-light);
	transition: background 0.2s ease;
	position: relative;
	text-align: center;
}

.relationships_row:hover {
	background: var(--block-med);
}

/* Subtle separator between rows */
.relationships_row::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	height: 1px;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(222, 166, 99, 0.12) 10%, 
		rgba(222, 166, 99, 0.12) 90%, 
		transparent
	);
}

.relationships_row:last-child::after {
	display: none;
}

/* Individual Columns */
.rel_col_user {
	text-align: left;
	min-width: 0;
}

.rel_col_user a {
	color: var(--accent1);
	font-family: var(--font-header);
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.rel_col_user a:hover {
	color: var(--accent2);
}

.rel_col_type {
	color: var(--text-color);
	font-family: var(--font-read);
	font-size: 13px;
}

.rel_col_date {
	color: var(--text-color-muted);
	font-family: var(--font-read);
	font-size: 13px;
}

.rel_col_options a {
	color: var(--accent1);
	text-decoration: none;
	font-family: var(--font-read);
	font-size: 13px;
	padding: 5px 10px;
	background: var(--block-dark);
	border-radius: 4px;
	display: inline-block;
	transition: all 0.2s ease;
}

.rel_col_options a:hover {
	background: var(--accent2);
	color: var(--block-dark);
}

/* No Relationships Message */
.relationships_no_content {
	padding: 30px 20px;
	text-align: center;
	color: var(--text-color-muted);
	font-family: var(--font-read);
	font-size: 14px;
	background: var(--block-light);
	border-top: 1px solid var(--block-dark);
}

/* Create Relationship & Requests Sections - Use same wrapper style */
.relationships_wrapper + .usercp_profile_wrapper {
	margin-top: 20px;
}

/* Plugin tables fallback */
.usercp_content_column .tborder {
	background: var(--block-med);
	border-radius: 4px;
	overflow: hidden;
	border: none;
}

.usercp_content_column .tborder .thead {
	background: var(--block-dark);
	padding: 12px 15px;
	font-family: var(--font-header);
	font-size: 16px;
	color: var(--accent1);
	font-weight: bold;
	border-bottom: 2px solid var(--accent2);
}

.usercp_content_column .tborder .tcat {
	background: var(--block-dark);
	padding: 10px 15px;
	font-family: var(--font-header);
	font-size: 14px;
	color: var(--accent1);
}

.usercp_content_column .tborder .trow1,
.usercp_content_column .tborder .trow2 {
	background: var(--block-light);
	padding: 12px 15px;
	border-bottom: 1px solid var(--block-dark);
	color: var(--text-color);
	font-family: var(--font-read);
}

.usercp_content_column .tborder .trow1:hover,
.usercp_content_column .tborder .trow2:hover {
	background: var(--block-med);
}

/* Message styling */
.usercp_content_column > p {
	padding: 15px;
	margin: 15px 0 0 0;
	text-align: center;
	color: var(--text-color);
	font-family: var(--font-read);
	background: var(--block-light);
	border-radius: 4px;
}

/* Responsive Design */
@media (max-width: 968px) {
	.relationships_header_row {
		grid-template-columns: 1fr 150px 120px;
	}
	
	.relationships_row {
		grid-template-columns: 1fr 150px 120px;
	}
	
	.rel_col_date {
		display: none;
	}
}

@media (max-width: 768px) {
	.relationships_header_row {
		display: none;
	}
	
	.relationships_row {
		grid-template-columns: 1fr;
		grid-template-areas:
			"user"
			"type"
			"date"
			"options";
		gap: 12px;
		padding: 15px;
		text-align: left;
	}
	
	.rel_col_user {
		grid-area: user;
	}
	
	.rel_col_type {
		grid-area: type;
		padding: 8px;
		background: var(--block-dark);
		border-radius: 4px;
	}
	
	.rel_col_type::before {
		content: "Type: ";
		font-weight: bold;
		color: var(--accent1);
	}
	
	.rel_col_date {
		grid-area: date;
		display: block;
		padding: 8px;
		background: var(--block-dark);
		border-radius: 4px;
	}
	
	.rel_col_date::before {
		content: "Since: ";
		font-weight: bold;
		color: var(--accent1);
	}
	
	.rel_col_options {
		grid-area: options;
	}
}

@media (max-width: 480px) {
	.relationships_row {
		padding: 12px;
	}
}


/* ===== UserCP Account Switcher Page (Plugin) ===== */

.account_switcher_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.as_left_column,
.as_right_column {
	display: flex;
	flex-direction: column;
}

/* Privacy Section - Full Width */
.as_privacy_section {
	margin-top: 20px;
	padding: 20px;
	background: var(--block-med);
	border-radius: 4px;
}

.as_privacy_section fieldset {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
}

.as_privacy_section legend {
	background: var(--block-dark);
	padding: 12px 15px;
	font-family: var(--font-header);
	font-size: 15px;
	color: var(--accent1);
	font-weight: bold;
	width: 100%;
	border-radius: 4px;
	margin-bottom: 15px;
}

.as_privacy_section table {
	width: 100%;
	background: var(--block-light);
	border-radius: 4px;
}

.as_privacy_section table tr {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 15px;
	border-bottom: 1px solid var(--block-dark);
}

.as_privacy_section table tr:last-child {
	border-bottom: none;
}

.as_privacy_section table td {
	color: var(--text-color);
	font-family: var(--font-read);
	font-size: 14px;
}

.as_privacy_section input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.as_privacy_section label {
	cursor: pointer;
	flex: 1;
}

/* Account Switcher Options/Users Styling */
.as_left_column .usercp_fieldset,
.as_right_column .usercp_fieldset {
	background: var(--block-med);
	border-radius: 4px;
	overflow: hidden;
}

.as_right_column fieldset {
	background: var(--block-med);
	border: none;
	border-radius: 4px;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.as_right_column legend {
	background: var(--block-dark);
	padding: 12px 15px;
	font-family: var(--font-header);
	font-size: 15px;
	color: var(--accent1);
	font-weight: bold;
	width: 100%;
	border-bottom: 2px solid var(--accent2);
}

.as_right_column table {
	width: 100%;
	background: var(--block-light);
}

.as_right_column table tr {
	display: block;
	padding: 12px 15px;
	border-bottom: 1px solid var(--block-dark);
}

.as_right_column table tr:last-child {
	border-bottom: none;
}

.as_right_column table td {
	display: block;
	color: var(--text-color);
	font-family: var(--font-read);
	padding: 5px 0;
}

.as_right_column a {
	color: var(--accent1);
	text-decoration: none;
	transition: color 0.2s ease;
}

.as_right_column a:hover {
	color: var(--accent2);
}

/* Form elements in options section */
.as_left_column select,
.as_left_column input[type="text"] {
	background: var(--block-dark);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	padding: 8px 12px;
	border-radius: 4px;
	font-family: var(--font-read);
	width: 100%;
	margin-top: 8px;
}

.as_left_column select:focus,
.as_left_column input[type="text"]:focus {
	outline: none;
	border-color: var(--accent1);
}

.as_left_column .button {
	background: var(--block-dark);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	padding: 10px 20px;
	border-radius: 4px;
	font-family: var(--font-read);
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 10px;
}

.as_left_column .button:hover {
	background: var(--accent2);
	color: var(--block-dark);
	border-color: var(--accent1);
}

/* Style any plugin tables that appear */
.as_left_column table,
.as_right_column table {
	border-collapse: collapse;
}

.as_left_column table td,
.as_right_column table td {
	padding: 8px;
}

/* Select2 compatibility */
.select2-container {
	width: 100% !important;
}

.select2-container .select2-choice {
	background: var(--block-dark);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	padding: 8px 12px;
	border-radius: 4px;
}

.select2-container .select2-choice:focus {
	border-color: var(--accent1);
}

/* Responsive Design */
@media (max-width: 968px) {
	.account_switcher_grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	.as_right_column {
		order: -1;
	}
}

@media (max-width: 768px) {
	.as_privacy_section {
		padding: 15px;
	}
	
	.as_privacy_section table tr {
		padding: 10px;
	}
	
	.as_right_column table tr {
		padding: 10px;
	}
}

@media (max-width: 480px) {
	.account_switcher_grid {
		gap: 12px;
	}
	
	.as_privacy_section {
		padding: 12px;
	}
}


/* ===== UserCP Usergroups Page ===== */

.usergroups_wrapper {
	background: var(--block-light);
}

/* Add spacing between sections */
.usercp_profile_wrapper + .usercp_profile_wrapper {
	margin-top: 20px;
}

/* Leader Groups - 3 columns */
.usergroups_leader_header {
	display: grid;
	grid-template-columns: 1fr 250px 250px;
	gap: 15px;
	padding: 12px 15px;
	background: var(--block-dark);
	align-items: center;
	border-top: 1px solid rgba(222, 166, 99, 0.2);
	font-family: var(--font-header);
	text-align: center;
}

.usergroups_leader_header .usergroup_col_name {
	text-align: left;
}

.usergroups_leader_row {
	display: grid;
	grid-template-columns: 1fr 250px 250px;
	gap: 15px;
	padding: 15px;
	align-items: center;
	border-top: 1px solid var(--block-dark);
	background: var(--block-light);
	transition: background 0.2s ease;
	position: relative;
}

.usergroups_leader_row:hover {
	background: var(--block-med);
}

/* Joinable Groups - 3 columns */
.usergroups_joinable_header {
	display: grid;
	grid-template-columns: 1fr 1fr 200px;
	gap: 15px;
	padding: 12px 15px;
	background: var(--block-dark);
	align-items: center;
	border-top: 1px solid rgba(222, 166, 99, 0.2);
	font-family: var(--font-header);
	text-align: center;
}

.usergroups_joinable_header .usergroup_col_name {
	text-align: left;
}

.usergroups_joinable_row {
	display: grid;
	grid-template-columns: 1fr 1fr 200px;
	gap: 15px;
	padding: 15px;
	align-items: center;
	border-top: 1px solid var(--block-dark);
	background: var(--block-light);
	transition: background 0.2s ease;
	position: relative;
}

.usergroups_joinable_row:hover {
	background: var(--block-med);
}

/* Member Groups - 3 columns */
.usergroups_member_header {
	display: grid;
	grid-template-columns: 1fr 250px 200px;
	gap: 15px;
	padding: 12px 15px;
	background: var(--block-dark);
	align-items: center;
	border-top: 1px solid rgba(222, 166, 99, 0.2);
	font-family: var(--font-header);
	text-align: center;
}

.usergroups_member_header .usergroup_col_name {
	text-align: left;
}

.usergroups_member_row {
	display: grid;
	grid-template-columns: 1fr 250px 200px;
	gap: 15px;
	padding: 15px;
	align-items: center;
	border-top: 1px solid var(--block-dark);
	background: var(--block-light);
	transition: background 0.2s ease;
	position: relative;
}

.usergroups_member_row:hover {
	background: var(--block-med);
}

/* Common row styling */
.usergroups_row::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	height: 1px;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(222, 166, 99, 0.12) 10%, 
		rgba(222, 166, 99, 0.12) 90%, 
		transparent
	);
}

.usergroups_row:last-child::after {
	display: none;
}

/* Header styling */
.usergroups_header_row strong {
	color: var(--accent1);
	font-size: 14px;
}

/* Column Styling */
.usergroup_col_name {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.usergroup_col_name strong {
	font-family: var(--font-header);
	font-size: 15px;
	color: var(--accent1);
	word-wrap: break-word;
}

.usergroup_col_name .smalltext {
	color: var(--text-color-muted);
	font-size: 12px;
	font-family: var(--font-read);
}

.usergroup_col_members,
.usergroup_col_requests,
.usergroup_col_usertitle,
.usergroup_col_leave,
.usergroup_col_join {
	text-align: center;
	color: var(--text-color);
	font-family: var(--font-read);
	font-size: 13px;
}

.usergroup_col_conditions {
	color: var(--text-color);
	font-family: var(--font-read);
	font-size: 13px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.usergroup_col_conditions .smalltext {
	color: var(--text-color-muted);
	font-size: 12px;
}

/* Links and buttons */
.usergroup_col_join a,
.usergroup_col_leave a,
.usergroup_col_members a,
.usergroup_col_requests a {
	display: inline-block;
	color: var(--accent1);
	background: var(--block-dark);
	border: 1px solid var(--accent2);
	padding: 8px 15px;
	border-radius: 4px;
	text-decoration: none;
	font-family: var(--font-read);
	font-size: 13px;
	transition: all 0.2s ease;
}

.usergroup_col_join a:hover,
.usergroup_col_leave a:hover,
.usergroup_col_members a:hover,
.usergroup_col_requests a:hover {
	background: var(--accent2);
	color: var(--block-dark);
	border-color: var(--accent1);
}

/* Display as primary group indicator */
.usergroup_col_name .smalltext strong {
	color: var(--accent2);
}

/* Conditions column links */
.usergroup_col_conditions a {
	color: var(--accent1);
	text-decoration: none;
}

.usergroup_col_conditions a:hover {
	color: var(--accent2);
}

/* Responsive Design */
@media (max-width: 968px) {
	.usergroups_leader_header,
	.usergroups_leader_row {
		grid-template-columns: 1fr 180px 180px;
	}
	
	.usergroups_joinable_header,
	.usergroups_joinable_row {
		grid-template-columns: 1fr 150px;
	}
	
	.usergroup_col_conditions {
		display: none;
	}
	
	.usergroups_member_header,
	.usergroups_member_row {
		grid-template-columns: 1fr 150px;
	}
	
	.usergroup_col_usertitle {
		display: none;
	}
}

@media (max-width: 768px) {
	.usergroups_header_row {
		display: none;
	}
	
	.usergroups_leader_row,
	.usergroups_joinable_row,
	.usergroups_member_row {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 15px;
	}
	
	.usergroup_col_members,
	.usergroup_col_requests,
	.usergroup_col_join,
	.usergroup_col_leave,
	.usergroup_col_usertitle {
		text-align: left;
	}
	
	.usergroup_col_conditions,
	.usergroup_col_usertitle {
		display: flex;
		padding: 10px;
		background: var(--block-dark);
		border-radius: 4px;
	}
	
	.usergroup_col_usertitle::before {
		.usergroup_col_usertitle::before {
		content: "User Title: ";
		font-weight: bold;
		color: var(--accent1);
		margin-right: 5px;
	}
	
	.usergroup_col_join a,
	.usergroup_col_leave a {
		display: block;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.usergroups_row {
		padding: 12px;
	}
}
			
/* ===== UserCP Edit Lists (Buddy/Ignore) Page ===== */

/* Add spacing between sections */
.usercp_profile_wrapper + .usercp_profile_wrapper {
	margin-top: 20px;
}

/* Instructions text */
.editlist_instructions {
	color: var(--text-color-muted);
	font-size: 13px;
	font-family: var(--font-read);
	line-height: 1.6;
	margin: 0 0 15px 0;
}

/* Add user input row */
.editlist_add_row {
	display: flex;
	align-items: flex-start;
	gap: 15px;
}

.editlist_add_row label {
	min-width: 150px;
	padding-top: 10px;
	text-align: right;
	color: var(--text-color);
	font-family: var(--font-read);
	font-size: 14px;
	flex-shrink: 0;
}

.editlist_add_input {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	flex: 1;
}

/* Select2 container in editlist */
.editlist_add_input .select2-container {
	flex: 1;
	min-width: 0;
}

.editlist_add_input input[type="text"] {
	flex: 1;
	background: var(--block-dark);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	padding: 10px;
	border-radius: 4px;
	font-family: var(--font-read);
	font-size: 14px;
}

.editlist_add_input input[type="text"]:focus {
	outline: none;
	border-color: var(--accent1);
}

.editlist_add_input input[type="submit"] {
	background: var(--block-dark);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	padding: 10px 20px;
	border-radius: 4px;
	font-family: var(--font-read);
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.editlist_add_input input[type="submit"]:hover {
	background: var(--accent2);
	color: var(--block-dark);
	border-color: var(--accent1);
}

/* Users grid */
.editlist_users_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.editlist_user_item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	background: var(--block-med);
	border-radius: 4px;
	transition: background 0.2s ease;
}

.editlist_user_item:hover {
	background: var(--block-dark);
}

.editlist_remove_btn {
	flex-shrink: 0;
}

.editlist_remove_btn img {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

.editlist_status_icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	vertical-align: middle;
}

.editlist_user_item > a {
	color: var(--accent1);
	text-decoration: none;
	font-family: var(--font-read);
	font-size: 14px;
	transition: color 0.2s ease;
}

.editlist_user_item > a:hover {
	color: var(--accent2);
}

/* No users message */
.editlist_no_users {
	padding: 30px 20px;
	text-align: center;
	color: var(--text-color-muted);
	font-family: var(--font-read);
	font-size: 14px;
}

/* Buddy Requests Grid */
.buddy_requests_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 20px;
}

.buddy_requests_section {
	margin-top: 0;
}

/* Buddy Requests Wrapper */
.buddy_requests_wrapper {
	background: var(--block-light);
}

/* Requests Header Row */
.buddy_requests_header_row {
	display: grid !important;
	grid-template-columns: 1fr 200px 180px !important;
	gap: 12px;
	padding: 12px 15px;
	background: var(--block-dark);
	align-items: center;
	border-top: 1px solid rgba(222, 166, 99, 0.2);
	font-family: var(--font-header);
}

.buddy_requests_header_row .request_col_user {
	text-align: left;
}

.buddy_requests_header_row .request_col_date {
	text-align: center;
}

.buddy_requests_header_row .request_col_options {
	text-align: center;
}

.buddy_requests_header_row strong {
.buddy_requests_header_row strong {
	color: var(--accent1);
	font-size: 14px;
	display: inline;
}
	
/* Hide header when only no_content exists */
.buddy_requests_wrapper:has(> .buddy_requests_no_content:only-child) .buddy_requests_header_row {
	display: none !important;
}

/* Request Row */
.buddy_requests_row {
	display: grid !important;
	grid-template-columns: 1fr 200px 180px !important;
	gap: 12px;
	padding: 15px;
	align-items: center;
	border-top: 1px solid var(--block-dark);
	background: var(--block-light);
	transition: background 0.2s ease;
	position: relative;
}

.buddy_requests_row:hover {
	background: var(--block-med);
}

.buddy_requests_row::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	height: 1px;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(222, 166, 99, 0.12) 10%, 
		rgba(222, 166, 99, 0.12) 90%, 
		transparent
	);
}

.buddy_requests_row:last-child::after {
	display: none;
}

/* Request Columns */
.request_col_user {
	color: var(--text-color);
	font-family: var(--font-read);
	font-size: 14px;
	min-width: 0;
	text-align: left;
}

.request_col_user a {
	color: var(--accent1);
	text-decoration: none;
}

.request_col_user a:hover {
	color: var(--accent2);
}

.request_col_date {
	text-align: center;
	color: var(--text-color-muted);
	font-family: var(--font-read);
	font-size: 13px;
}

.request_col_options {
	text-align: center;
	font-family: var(--font-read);
	font-size: 13px;
}

.request_col_options a {
	color: var(--accent1);
	text-decoration: none;
}

.request_col_options a:hover {
	color: var(--accent2);
	text-decoration: underline;
}

/* No requests message */
.buddy_requests_no_content {
	padding: 30px 20px;
	text-align: center;
	color: var(--text-color-muted);
	font-family: var(--font-read);
	font-size: 14px;
}

/* Select2 styling for this page */
.select2-container {
	width: 100% !important;
}

.select2-container .select2-choice {
	background: var(--block-dark);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	padding: 8px 12px;
	height: auto;
	line-height: normal;
}

.select2-container.select2-container-multi .select2-choices {
	background: var(--block-dark);
	border: 1px solid var(--accent2);
	border-radius: 4px;
	padding: 5px;
}

.select2-container.select2-container-multi .select2-choices .select2-search-choice {
	background: var(--block-med);
	border: 1px solid var(--accent2);
	color: var(--text-color);
	padding: 3px 8px;
	border-radius: 3px;
}

.select2-container.select2-container-multi .select2-choices .select2-search-field input {
	color: var(--text-color);
	font-family: var(--font-read);
}

/* Responsive Design */
@media (max-width: 968px) {
	.buddy_requests_grid {
		grid-template-columns: 1fr;
	}
	
	.editlist_add_row {
		flex-direction: column;
		align-items: stretch;
	}
	
	.editlist_add_row label {
		text-align: left;
		padding-top: 0;
		min-width: 0;
	}
	
	.editlist_users_grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
	
	.buddy_requests_header_row,
	.buddy_requests_row {
		grid-template-columns: 1fr 180px 160px !important;
	}
}

@media (max-width: 768px) {
	.buddy_requests_header_row {
		display: none !important;
	}
	
	.buddy_requests_row {
		grid-template-columns: 1fr !important;
		grid-template-areas:
			"user"
			"date"
			"options";
		gap: 12px;
		text-align: left;
	}
	
	.request_col_user {
		grid-area: user;
	}
	
	.request_col_date {
		grid-area: date;
		text-align: left;
		padding: 8px;
		background: var(--block-dark);
		border-radius: 4px;
	}
	
	.request_col_date::before {
		content: "Date: ";
		font-weight: bold;
		color: var(--accent1);
	}
	
	.request_col_options {
		grid-area: options;
		text-align: left;
	}
	
	.editlist_users_grid {
		grid-template-columns: 1fr;
	}
	
	.editlist_add_input {
		flex-direction: column;
		align-items: stretch;
	}
	
	.editlist_add_input input[type="submit"] {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.buddy_requests_row {
		padding: 12px;
	}
}