/*  ================================================
	This is the Default Child Theme CSS file
	ONLY add the CSS rules that you need to override
	the main rules form the parent Unified theme.
==================================================== */

/*
 * Anime Nexus dark mode
 *
 * The WordPress theme applies `dark-mode` to the body.  The CSS-Only parent
 * uses fixed light colours, so these overrides deliberately live in the child
 * stylesheet and use the site's configurable colour variables.
 */
body.dark-mode #spMainContainer {
	color: var(--color-text, #e5e7eb);
	/* The outer forum container must be a surface too: child sections inherit
	 * this colour, so gaps between rows no longer show the page background. */
	background: var(--color-white, #0f172a);
	border-color: var(--color-border, #334155);
	color-scheme: dark;
}

body.dark-mode #spMainContainer a,
body.dark-mode #spMainContainer a:link,
body.dark-mode #spMainContainer a:active,
body.dark-mode #spMainContainer a:visited {
	color: color-mix(in srgb, var(--color-primary, #8b5cf6) 68%, #ffffff);
}

body.dark-mode #spMainContainer a:hover,
body.dark-mode #spMainContainer a:focus {
	color: color-mix(in srgb, var(--color-primary-hover, #a78bfa) 58%, #ffffff);
}

/* The parent theme gives breadcrumb links their own, more specific colour.
 * Keep them consistent with every other forum link in dark mode. */
body.dark-mode #spMainContainer #spBreadCrumbs a,
body.dark-mode #spMainContainer #spBreadCrumbs a:link,
body.dark-mode #spMainContainer #spBreadCrumbs a:active,
body.dark-mode #spMainContainer #spBreadCrumbs a:visited {
	color: color-mix(in srgb, var(--color-primary, #8b5cf6) 68%, #ffffff);
}

body.dark-mode #spMainContainer #spBreadCrumbs a:hover,
body.dark-mode #spMainContainer #spBreadCrumbs a:focus {
	color: color-mix(in srgb, var(--color-primary-hover, #a78bfa) 58%, #ffffff);
}

/* Main forum panels, lists, topic posts and profile cards. */
body.dark-mode #spMainContainer .spGroupViewSection,
body.dark-mode #spMainContainer .spForumViewSection,
body.dark-mode #spMainContainer .spTopicViewSection,
body.dark-mode #spMainContainer .spListViewSection,
body.dark-mode #spMainContainer .spGroupForumSection,
body.dark-mode #spMainContainer .spForumTopicSection,
body.dark-mode #spMainContainer .spTopicListSection,
body.dark-mode #spMainContainer .spMemberListSection,
body.dark-mode #spMainContainer .spTopicPostSection,
body.dark-mode #spMainContainer .spPostSection,
body.dark-mode #spMainContainer .spProfileForm,
body.dark-mode #spMainContainer .spProfileShowSection,
body.dark-mode #spMainContainer .spSearchSection,
body.dark-mode #spMainContainer .spPluginSection,
body.dark-mode #spMainContainer .spStatsSection,
body.dark-mode #spMainContainer .spEditorSection {
	color: var(--color-text, #e5e7eb);
	background: var(--color-white, #0f172a);
	border-color: var(--color-border, #334155);
}

/* Alternate rows and passive information areas retain visible separation. */
body.dark-mode #spMainContainer .spOdd,
body.dark-mode #spMainContainer .spPlainSection,
body.dark-mode #spMainContainer .spColumnSection,
body.dark-mode #spMainContainer .spListSection,
body.dark-mode #spMainContainer .spRecentPostSection,
body.dark-mode #spMainContainer .spPostContentSection,
body.dark-mode #spMainContainer .spMemberGroupsSection,
body.dark-mode #spMainContainer .spPostContent,
body.dark-mode #spMainContainer .spSpoilerContent {
	color: var(--color-text, #e5e7eb);
	background: var(--color-white, #0f172a);
	border-color: var(--color-border, #334155);
}

body.dark-mode #spMainContainer .spGroupForumSection:hover,
body.dark-mode #spMainContainer .spForumTopicSection:hover,
body.dark-mode #spMainContainer .spTopicListSection:hover,
body.dark-mode #spMainContainer .spMemberListSection:hover,
body.dark-mode #spMainContainer .spProfileMenuItem:hover {
	background: color-mix(in srgb, var(--color-white, #0f172a) 78%, var(--color-primary, #8b5cf6));
}

body.dark-mode #spMainContainer h1,
body.dark-mode #spMainContainer h2,
body.dark-mode #spMainContainer h3,
body.dark-mode #spMainContainer h4,
body.dark-mode #spMainContainer h5,
body.dark-mode #spMainContainer h6,
body.dark-mode #spMainContainer .spLabel,
body.dark-mode #spMainContainer .spLabelSmall,
body.dark-mode #spMainContainer .spHeaderMessage,
body.dark-mode #spMainContainer .spInHeaderLabel,
body.dark-mode #spMainContainer .spInRowLabel {
	color: var(--color-dark, #f9fafb);
}

body.dark-mode #spMainContainer input,
body.dark-mode #spMainContainer select,
body.dark-mode #spMainContainer textarea,
body.dark-mode #spMainContainer .spControl,
body.dark-mode #spMainContainer .spSelect {
	color: var(--color-text, #e5e7eb);
	background: var(--color-bg, #020617);
	border: 1px solid var(--color-border, #334155);
}

body.dark-mode #spMainContainer input:focus,
body.dark-mode #spMainContainer select:focus,
body.dark-mode #spMainContainer textarea:focus {
	border-color: var(--color-primary, #8b5cf6);
	box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary, #8b5cf6) 25%, transparent);
}

/* Keep every Simple:Press action control on the same dark surface as the
 * standard right-aligned buttons. */
body.dark-mode #spMainContainer .spButton,
body.dark-mode #spMainContainer .spSubmit,
body.dark-mode #spMainContainer button,
body.dark-mode #spMainContainer input[type="submit"],
body.dark-mode #spMainContainer input[type="button"] {
	color: var(--color-text, #e5e7eb);
	background: var(--color-bg, #020617);
	border-color: var(--color-border, #334155);
}

body.dark-mode #spMainContainer .spButton:hover,
body.dark-mode #spMainContainer .spSubmit:hover,
body.dark-mode #spMainContainer button:hover,
body.dark-mode #spMainContainer input[type="submit"]:hover,
body.dark-mode #spMainContainer input[type="button"]:hover {
	color: var(--color-dark, #f9fafb);
	background: var(--color-bg, #020617);
	border-color: var(--color-primary, #8b5cf6);
}

body.dark-mode #spMainContainer table,
body.dark-mode #spMainContainer tr,
body.dark-mode #spMainContainer td,
body.dark-mode #spMainContainer th,
body.dark-mode #spMainContainer fieldset,
body.dark-mode #spMainContainer .spProfileShowHeader,
body.dark-mode #spMainContainer .spForumToolsHeader {
	color: var(--color-text, #e5e7eb);
	border-color: var(--color-border, #334155);
}

body.dark-mode #spMainContainer .spEditorMessage,
body.dark-mode #spMainContainer .spHeaderMessage {
	background: color-mix(in srgb, var(--color-primary, #8b5cf6) 16%, var(--color-white, #0f172a));
	border-color: var(--color-border, #334155);
}

/* The parent CSS-Only theme gives the post editor several more specific light
 * backgrounds. Override every layer so no white frame remains around TinyMCE. */
body.dark-mode #spMainContainer #spPostForm,
body.dark-mode #spMainContainer #spPostForm .spEditorFieldset,
body.dark-mode #spMainContainer #spPostForm .spEditorSection,
body.dark-mode #spMainContainer #spPostForm .spEditorSection .spEditorMessage,
body.dark-mode #spMainContainer #spPostForm #spEditorContent,
body.dark-mode #spMainContainer #spPostForm #spEditorContent table,
body.dark-mode #spMainContainer #spPostForm #spEditorContent tbody,
body.dark-mode #spMainContainer #spPostForm #spEditorContent tr,
body.dark-mode #spMainContainer #spPostForm #spEditorContent td {
	color: var(--color-text, #e5e7eb);
	background: var(--color-white, #0f172a);
	border-color: var(--color-border, #334155);
}

body.dark-mode #spMainContainer #spPostForm .spEditorHeading,
body.dark-mode #spMainContainer #spPostForm #spEditorContent td.mceIframeContainer,
body.dark-mode #spMainContainer #spPostForm #spEditorContent td.mceStatusbar {
	border-color: var(--color-border, #334155);
}

/* In light mode the forum background is the predominant surface; using white
 * here leaves a visible gap around the editor. Dark mode keeps its panel
 * surface through the more specific rules above. */
#spMainContainer #spPostForm {
	background: var(--color-bg, #f9fafb);
}

#spMainContainer #spPostForm .spEditor {
	background: var(--color-bg, #f9fafb);
}

body.dark-mode #spMainContainer #spPostForm .spEditor {
	background: var(--color-white, #0f172a);
}

/* Keep both columns of a forum post at the same height. The parent theme uses
 * a padding/margin trick for this, which exposes the background after short
 * post content. Flexbox makes the post card self-contained instead. */
body.dark-mode #spMainContainer .spTopicPostSection {
	display: flex;
	align-items: stretch;
	padding: 2px;
	overflow: hidden;
}

body.dark-mode #spMainContainer .spTopicPostSection .spUserSection,
body.dark-mode #spMainContainer .spTopicPostSection .spPostSection {
	float: none !important;
	align-self: stretch;
	background: var(--color-white, #0f172a);
}

body.dark-mode #spMainContainer .spTopicPostSection .spUserSection {
	flex: 0 0 15%;
}

body.dark-mode #spMainContainer .spTopicPostSection .spPostSection {
	flex: 1 1 auto;
	width: auto !important;
	margin-bottom: 0 !important;
	padding-bottom: 4px !important;
}

body.dark-mode #spMainContainer .spTopicPostSection .spPostContentSection,
body.dark-mode #spMainContainer .spTopicPostSection .spPostContent {
	background: var(--color-white, #0f172a);
}

body.dark-mode #spMainContainer .spTopicPostSection .spPostContent,
body.dark-mode #spMainContainer .spTopicPostSection .spPostContent p,
body.dark-mode #spMainContainer .spTopicPostSection .spPostContent li,
body.dark-mode #spMainContainer .spTopicPostSection .spPostContent blockquote,
body.dark-mode #spMainContainer .spTopicPostSection .spPostContent cite,
body.dark-mode #spMainContainer .spTopicPostSection .spPostContent td,
body.dark-mode #spMainContainer .spTopicPostSection .spPostContent pre,
body.dark-mode #spMainContainer .spTopicPostSection .spPostContent .sfcode {
	color: #ffffff;
}

/* A hovered row must tint its visible inner layout too; otherwise an opaque
 * child panel masks the hover colour. */
body.dark-mode #spMainContainer .spGroupForumSection:hover,
body.dark-mode #spMainContainer .spForumTopicSection:hover,
body.dark-mode #spMainContainer .spTopicListSection:hover,
body.dark-mode #spMainContainer .spMemberListSection:hover,
body.dark-mode #spMainContainer .spGroupForumSection:hover .spPlainSection,
body.dark-mode #spMainContainer .spForumTopicSection:hover .spPlainSection,
body.dark-mode #spMainContainer .spTopicListSection:hover .spPlainSection,
body.dark-mode #spMainContainer .spMemberListSection:hover .spPlainSection,
body.dark-mode #spMainContainer .spGroupForumSection:hover .spColumnSection,
body.dark-mode #spMainContainer .spForumTopicSection:hover .spColumnSection,
body.dark-mode #spMainContainer .spTopicListSection:hover .spColumnSection,
body.dark-mode #spMainContainer .spMemberListSection:hover .spColumnSection,
body.dark-mode #spMainContainer .spGroupForumSection:hover .spListSection,
body.dark-mode #spMainContainer .spForumTopicSection:hover .spListSection,
body.dark-mode #spMainContainer .spTopicListSection:hover .spListSection,
body.dark-mode #spMainContainer .spMemberListSection:hover .spListSection {
	background: color-mix(in srgb, var(--color-white, #0f172a) 78%, var(--color-primary, #8b5cf6)) !important;
}

/* Profile views include several transparent child sections in the parent
 * stylesheet. Give every profile panel the same complete surface. */
body.dark-mode #spMainContainer .spProfileShowHeaderSection,
body.dark-mode #spMainContainer .spProfileShowAvatarSection,
body.dark-mode #spMainContainer .spProfileShowInfoSection,
body.dark-mode #spMainContainer .spProfileShowIdentitiesSection,
body.dark-mode #spMainContainer .spProfileShowStatsSection,
body.dark-mode #spMainContainer .spProfileShowSignatureSection,
body.dark-mode #spMainContainer .spProfileShowBasicSection,
body.dark-mode #spMainContainer .spProfileShowDetailsSection,
body.dark-mode #spMainContainer .spProfileShowPhotosSection,
body.dark-mode #spMainContainer .spProfileShowLinkSection {
	color: var(--color-text, #e5e7eb);
	background: var(--color-white, #0f172a);
	border-color: var(--color-border, #334155);
}

/* Profile editing has a separate layout from the public profile view. Its
 * menu and form columns must share a surface so floated panels do not leave
 * transparent gaps between them. */
body.dark-mode #spMainContainer #spProfileContent,
body.dark-mode #spMainContainer #spProfileHeader,
body.dark-mode #spMainContainer #spProfileMenu,
body.dark-mode #spMainContainer #spProfileData,
body.dark-mode #spMainContainer #spProfileFormPanel,
body.dark-mode #spMainContainer .spProfileForm,
body.dark-mode #spMainContainer .spProfileUsergroupsMemberships,
body.dark-mode #spMainContainer .spProfileUsergroupsNonMemberships,
body.dark-mode #spMainContainer .spProfileUsergroup,
body.dark-mode #spMainContainer .spProfileUserPermissions .spProfilePermission {
	color: var(--color-text, #e5e7eb);
	background: var(--color-white, #0f172a);
	border-color: var(--color-border, #334155);
}

body.dark-mode #spMainContainer ul#spProfileTabs a,
body.dark-mode #spMainContainer li.spProfileMenuItem,
body.dark-mode #spMainContainer li.spProfileMenuItem.current {
	color: var(--color-text, #e5e7eb);
	background: var(--color-white, #0f172a);
	border-color: var(--color-border, #334155);
}

/* The permission rows are built with floated columns. Keep each forum row and
 * its asynchronously loaded detail panel on a separate line, without changing
 * the column widths supplied by the CSS-Only parent theme. */
#spMainContainer .spProfileUserPermissions .spGroupForumSection {
	clear: both;
	display: flow-root;
}

#spMainContainer .spProfileUserPermissions .spProfilePermission {
	clear: both;
}

/* Search panels are mostly unstyled containers in CSS-Only, so browser/default
 * light backgrounds can show through them unless each form layer is surfaced. */
body.dark-mode #spMainContainer #spMembersListSearchForm,
body.dark-mode #spMainContainer #spMembersListSearchForm form,
body.dark-mode #spMainContainer #spMembersListSearchForm fieldset,
body.dark-mode #spMainContainer #spSearchFormAdvanced,
body.dark-mode #spMainContainer #spSearchFormAdvanced fieldset,
body.dark-mode #spMainContainer fieldset.spSearchFormAdvanced,
body.dark-mode #spMainContainer fieldset.spSearchMember,
body.dark-mode #spMainContainer #spSearchFormAdvanced .spSearchSection {
	color: var(--color-text, #e5e7eb);
	background: var(--color-white, #0f172a);
	border-color: var(--color-border, #334155);
}

body.dark-mode #spMainContainer #spMembersListSearchForm fieldset,
body.dark-mode #spMainContainer #spSearchFormAdvanced fieldset,
body.dark-mode #spMainContainer fieldset.spSearchFormAdvanced,
body.dark-mode #spMainContainer fieldset.spSearchMember {
	border: 1px solid var(--color-border, #334155);
}