/* SPRU Bookmarks & Subscriptions */

.spru-topic-actions {
	display: inline-flex;
	float: left;
	align-items: center;
	gap: 3px;
	margin-right: 5px;
}

.spru-forum-actions {
	display: inline-flex;
	float: left;
	align-items: center;
	gap: 3px;
	margin-left: 5px;
}


.spru-topic-action {
	/* Keep the native .button line box so these controls have exactly the
	   same height as the other viewtopic buttons. */
	box-sizing: border-box;
}

.spru-topic-action .icon,
.spru-post-bookmark-control .icon {
	margin: 0;
}

/* Once JS places the top controls after the topic search box, keep a small
   visual gap from the search group. */
.action-bar.bar-top .search-box + .spru-topic-actions {
	margin-left: 5px;
}

/* Cosmic's tooltip pseudo-element inherits the button's font-weight (600).
   These action hints should use normal text weight. */
.spru-topic-action[data-tooltip]::after,
.spru-forum-watch[data-tooltip]::after,
.spru-post-bookmark-control[data-tooltip]::after {
	font-weight: 400 !important;
}

/* The two primary actions are rendered as standalone buttons. Hide their
   legacy copies immediately; JS removes the nodes and hides an empty tools
   dropdown while preserving items injected by other extensions. */
.topic-tools .dropdown-contents > li:has(> .bookmark-link),
.topic-tools .dropdown-contents > li:has(> .watch-topic-link) {
	display: none;
}

/* If Bookmark/Subscribe were the only topic-tools entries, hide the empty
   dropdown before JS runs. Any other <li> (core or extension-provided) keeps it. */
.topic-tools:not(:has(.dropdown-contents > li:not(:has(> .bookmark-link)):not(:has(> .watch-topic-link)))) {
	display: none;
}

/* Bookmark and subscription icons use the same active-state accent.
   A red filled glyph means the action is currently enabled/saved. */
.spru-topic-bookmark.is-active .icon,
.spru-topic-watch.is-active .icon,
.spru-forum-watch.is-active .icon,
.spru-post-bookmark-control.is-bookmarked .icon {
	color: #d31141;
}

.spru-post-bookmark-control.is-loading {
	pointer-events: none;
	opacity: 0.6;
}

/* When ImgPosts supplies artwork, its own link is the click target. */
.spru-saved-topiclist dl.row-item:has(.imgposts-topic-image) .spru-topic-art-link {
	display: none;
}

/* UCP topic/forum lists use phpBB's old float + huge negative-margin column
   layout by default. Our pages only need a content column and a mark column,
   so use a small grid instead. This keeps every checkbox in one real column
   and avoids the large empty gap created by .missing-column. */
.spru-ucp-list {
	--spru-mark-column: 68px;
}

.spru-ucp-list > li > dl {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--spru-mark-column);
	align-items: stretch;
}

.spru-ucp-list > li > dl > dt {
	float: none;
	width: auto;
	min-width: 0;
	margin-right: 0;
}

.spru-ucp-list > li > dl > dt > .list-inner {
	margin-right: 0 !important;
}

.spru-ucp-list > li > dl > dd.mark {
	display: flex;
	float: none;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0 6px !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.spru-ucp-list > li.row > dl > dd.mark {
	/* Neutralise phpBB's 999px equal-column trick; grid provides equal height. */
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.spru-ucp-list dd.mark input[type="checkbox"] {
	margin: 0;
}

/* Header mark column: layout only. Keeping the core .mark class off the
   header prevents forum_fn.js from adding .with-mark to the title cell. */
.spru-ucp-list > li.header > dl > dd.spru-mark-header {
	display: flex;
	float: none;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	white-space: nowrap;
}


/* Match the standard ImgPosts presentation used elsewhere on the forum.
   Cosmic's unread animation can then animate border-color on the real frame. */
.spru-saved-topiclist .imgposts-topic-image-wrap.attach_image {
	border: 2px solid #fff;
	border-radius: 4px;
	box-shadow: 0 0 4px 0 #000;
	box-sizing: border-box;
}

/* Reuse Cosmic's native topic artwork exactly as it is rendered in viewforum.
   The extension only adds a transparent click target over that artwork. */
.spru-saved-topiclist .spru-topic-art-link {
	z-index: 2;
	top: 50%;
	left: calc(var(--cosmic-topic-slot-left, 6px) + 5px);
	width: var(--cosmic-topic-icon-size, 40px);
	height: var(--cosmic-topic-icon-size, 40px);
	margin: 0;
	transform: translateY(-50%);
}

/* Watched forums use the same custom forum artwork as the board index. Keep
   it compact in UCP and reuse the existing unread glow animation. */
.spru-watch-forums .spru-watched-forum-image {
	float: left;
	width: 50px;
	height: 50px;
	margin: 0 10px 0 0;
	overflow: visible;
}

.spru-watch-forums .spru-watched-forum-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.spru-watch-forums .spru-watched-forum-has-image {
	min-height: 50px;
}

.spru-watch-forums .forum-image-unread img {
	animation: forum-image-glow 1.8s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
	.spru-watch-forums .forum-image-unread img {
		animation: none;
		filter:
			drop-shadow(0 0 2px rgba(255, 130, 155, 0.9))
			drop-shadow(0 0 5px rgba(211, 17, 65, 0.7));
	}
}

.spru-topic-meta {
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.35;
}

.spru-meta-sep {
	padding: 0 3px;
}

.spru-topic-tags {
	margin-top: 4px;
}

/* Topic rows mirror RH Topic Tags search results: artwork on the left, then
   title, description, forum and tags. Only the last-post column remains on
   desktop; reply/view statistics are intentionally omitted. */
.spru-topiclist-header > li > dl,
.spru-saved-topiclist > li > dl {
	grid-template-columns: minmax(0, 1fr) 210px var(--spru-mark-column);
}

.spru-saved-topiclist > li > dl > dd.lastpost {
	display: flex;
	float: none;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 7px 8px !important;
	align-items: flex-start;
	box-sizing: border-box;
}

.spru-saved-topiclist > li.row > dl > dd.lastpost {
	padding-bottom: 7px !important;
	margin-bottom: 0 !important;
}

.spru-topic-description {
	margin-top: 2px;
	line-height: 1.35;
}

.spru-topic-forum {
	margin-top: 2px;
}

.spru-lastpost-column a[href] {
	cursor: pointer;
}

.spru-lastpost-column .lastpostavatar,
.spru-lastpost-mobile .lastpostavatar {
	display: inline-block;
	margin-left: 4px;
	vertical-align: middle;
}

.spru-lastpost-column .lastpostavatar img,
.spru-lastpost-mobile .lastpostavatar img {
	display: inline-block;
	width: auto;
	height: auto;
	max-width: 35px;
	max-height: 35px;
	vertical-align: middle;
}

.spru-lastpost-mobile {
	display: none;
	margin-top: 4px;
}

.spru-topic-bookmarked {
	display: inline-block;
	margin-left: 5px;
	vertical-align: 1px;
	color: #d31141;
}

.spru-saved-posts {
	margin-top: 7px;
	padding-top: 6px;
	border-top: 1px solid rgba(120, 135, 150, 0.28);
}

.spru-saved-posts-title {
	margin-bottom: 4px;
	font-weight: 700;
}

.spru-saved-post {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	padding: 5px 0;
}

.spru-saved-post + .spru-saved-post {
	border-top: 1px dotted rgba(120, 135, 150, 0.25);
}

.spru-saved-post-check {
	flex: 0 0 auto;
	padding-top: 2px;
}

.spru-saved-post-body {
	min-width: 0;
	flex: 1 1 auto;
}

.spru-saved-post-title {
	font-weight: 700;
}

.spru-saved-post-meta {
	margin-top: 1px;
	font-size: 11px;
	opacity: 0.78;
}


.spru-orphans h3 {
	margin-top: 0;
}

.spru-orphan-row {
	display: block;
	padding: 3px 0;
}

.spru-saved-actions {
	margin-top: 10px;
}

@media (max-width: 700px) {
	.spru-topic-actions {
		gap: 3px;
	}


	.spru-ucp-list > li > dl {
		grid-template-columns: minmax(0, 1fr) var(--spru-mark-column);
	}

	.spru-topiclist-header > li > dl,
	.spru-saved-topiclist > li > dl {
		grid-template-columns: minmax(0, 1fr) var(--spru-mark-column);
	}

	.spru-topiclist-header > li > dl > dd.spru-lastpost-header,
	.spru-saved-topiclist > li > dl > dd.lastpost {
		display: none !important;
	}

	.spru-lastpost-mobile {
		display: block !important;
	}

	/* phpBB normally hides all <dd> columns on narrow screens. The mark
	   column is an action, so keep it available and aligned on mobile too. */
	.spru-ucp-list > li > dl > dd.mark {
		display: flex !important;
		padding-left: 5px !important;
		padding-right: 5px !important;
	}
}

/* Keep topic artwork anchored to the title area on UCP pages. Saved-post
   groups can make a topic row very tall, so centring the artwork vertically
   would push it far away from the topic title. */
.spru-saved-topiclist {
	--spru-topic-art-top: 5px;
}

.spru-saved-topiclist dl.row-item[class*="topic_"] > dt > .list-inner::before,
.spru-saved-topiclist dl.row-item[class*="sticky_"] > dt > .list-inner::before,
.spru-saved-topiclist dl.row-item[class*="announce_"] > dt > .list-inner::before,
.spru-saved-topiclist dl.row-item[class*="global_"] > dt > .list-inner::before {
	top: var(--spru-topic-art-top);
	transform: none;
}

.spru-saved-topiclist li.row dl.row-item:has(.imgposts-topic-image) .imgposts-topic-image-wrap {
	top: 0;
	transform: none;
}

.spru-saved-topiclist .spru-topic-art-link {
	top: var(--spru-topic-art-top);
	transform: none;
}

.spru-saved-topiclist dl.row-item > dt > .list-inner > .topic-user-icon {
	top: calc(var(--spru-topic-art-top) + var(--cosmic-topic-icon-size) - 2px);
}

.spru-saved-topiclist dl.row-item > dt > .list-inner > .topic-poll-badge {
	top: calc(var(--spru-topic-art-top) - 2px);
}

.spru-saved-topiclist dl.row-item[class*="_locked"] > dt > .list-inner::after {
	top: calc(var(--spru-topic-art-top) + var(--cosmic-topic-icon-size) - 16px);
}

/* Last-post avatar floats on the left, so author/date text uses the space to
   its right and can continue below it naturally. Mobile markup deliberately
   omits the avatar entirely. */
.spru-lastpost-column .spru-lastpost-content {
	display: block;
	width: 100%;
}

.spru-lastpost-column .lastpostavatar {
	float: left;
	margin: 0 8px 3px 0;
}

.spru-lastpost-column .lastpostavatar img {
	display: block;
}

.spru-lastpost-column .spru-lastpost-content::after {
	content: "";
	display: block;
	clear: both;
}

/* Bookmark-state markers in the grouped bookmark list.
   data-tooltip lives on a wrapper, not on the Font Awesome <i>, because the
   forum tooltip implementation may use ::before and would otherwise replace
   Font Awesome's own ::before glyph. */
.spru-topic-bookmarked,
.spru-post-bookmarked-marker {
	color: #d31141;
}

.spru-topic-posts-only {
	color: #536482;
}

.spru-topic-state-marker {
	display: inline-block;
	margin-left: 3px;
	vertical-align: 1px;
	line-height: 1;
}

.spru-topic-state-marker .icon {
	margin: 0;
	color: inherit;
}

.spru-topic-state-marker[data-tooltip]::after {
	font-weight: 400 !important;
}

/* Make a checked topic visually distinct without changing row height.
   The translucent layer darkens the existing bg1/bg2 colour instead of
   replacing the whole UCP palette. */
.spru-saved-topiclist > li.row > dl {
	transition: background-color 120ms ease;
}

.spru-ucp-list > li.row:has(> dl > dd.mark input[type="checkbox"]:checked) > dl {
	background-color: rgba(54, 62, 81, 0.12);
}

/* UCP rows use CSS grid here, so the old phpBB overflow:hidden on topic-list
   <dl> is no longer needed. Let status-marker tooltips escape the row. */
.spru-saved-topiclist > li.row,
.spru-saved-topiclist > li.row > dl.row-item,
.spru-saved-topiclist > li.row > dl.row-item > dt,
.spru-saved-topiclist > li.row > dl.row-item > dt > .list-inner {
	overflow: visible;
}

.spru-topic-state-marker {
	position: relative;
	z-index: 20;
}

.spru-topic-state-marker[data-tooltip]::after {
	z-index: 10020 !important;
	white-space: nowrap;
}


.spru-remove-choice-form .submit-buttons .button1,
.spru-remove-choice-form .submit-buttons .button2 {
	margin: 0 3px 3px 0;
}

/* Watched forums use the same forumbg/topiclist shell as topic lists. */
.spru-watch-forums-block {
	margin-bottom: 10px;
}

.spru-watch-forums > li > dl {
	min-height: 58px;
}

.spru-watch-forums > li > dl > dt > .list-inner {
	padding-top: 6px;
	padding-right: 0;
	padding-bottom: 6px;
	padding-left: 6px !important;
}

.spru-watch-forums .forumtitle {
	display: inline-block;
	margin-top: 2px;
}

.spru-forum-lastpost {
	margin-top: 3px;
	font-size: 11px;
	line-height: 1.35;
}

/* phpBB-style confirmation controls. The controls themselves are native
   input.button2 elements; only their equal sizing/layout is customised. */
.spru-confirm-actions {
	margin-top: 12px;
	text-align: center;
}

.spru-confirm-actions input.button2 {
	box-sizing: border-box;
	width: 180px;
	margin: 0 3px 4px;
}

@media (max-width: 600px) {
	.spru-confirm-actions input.button2 {
		display: block;
		width: 100%;
		margin: 0 0 6px;
	}
}