/* Recent Topics
--------------------------------------------- */

#phpbbsection {
    overflow: hidden;
}

/* side view big screen maxed out */
@media screen and (min-width: 1024px)
{
    .index-left {
        width: auto;
        overflow: hidden;
    }
    .index-right {
        float: left;
        margin-right: 10px;
        /* width: 302px; */
		width: 23%;
        min-width: 280px;
    }
}

/* smartphones */
/* put side view as top block anyways */
@media only screen and (max-width: 1024px) {
    /*hide the forum index */
    .index-left, .index-right {
        width: auto;
        display: block;
        width: 100%;
    }
	
}

#recent-topics {
    /* Cosmic uses the same status-image system as viewforum. These harmless
       custom-property defaults keep the side block compact while allowing
       Cosmic to draw its topic icon, lock overlay and unread glow. */
    --cosmic-topic-slot-size: 50px;
    --cosmic-topic-icon-size: 40px;
    --cosmic-topic-slot-left: 0px;
    --cosmic-topic-slot-gap: 6px;
    --cosmic-topic-lock-offset-y: 4px;
}

#recent-topics ul {
    list-style: none;
}

#recent-topics li.row {
    border-top: none;
    border-bottom-color: #C7C7C7;
    transition: background 0.15s ease-in-out 0s;
}

#recent-topics li dl.icon {
    padding-bottom: 0px;
}

#recent-topics li.row dl {
    padding: 5px 8px;
    position: relative;
}

#recent-topics li.row dl:after {
    clear: both;
    content: "";
    display: block;
}


#recent-topics a.topictitle {
/*  display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 1px; */
	font-size: 1.3em;
}


#recent-topics a.forum-link {
    color: #877b69;
    font-size: 10px;
}

#recent-topics dd.lastpost {
    bottom: 3px;
    right: 5px;
    line-height: normal;
    display: block;
    min-height: inherit;
    width: auto;
    text-align: right;
}

#recent-topics dl {
    position: relative;
	padding-left:10px;
}

#recent-topics dd.status-icons {
    position: absolute;
    top: 3px;
    right: 5px;
    min-height: inherit;
}

#recent-topics dd.status-icons > a,
#recent-topics dd.status-icons > span {
    float: right;
    margin-left: 2px;
}

#recenttopicstop  .action-bar {
    margin-bottom: 0.5em;
}

#recenttopicsbottom .forabg + .action-bar {
    margin-top: 0.5em;
}


/* ImgPosts
---------------------------------------------
Recent Topics uses ImgPosts' public API. The extra imgposts-topic-* classes in
the templates intentionally match ImgPosts/Cosmic's shared topic-media markup:
when an image exists it occupies the status slot; otherwise the native
TOPIC_IMG_STYLE icon remains visible. */

.recenttopics_attach_image {
    float: left;
    border: 2px solid #fff;
    display: inline-block;
    margin-right: 6px;
    border-radius: 4px;
    box-shadow: 0 0 4px 0 #000000;
}

/* Keep the historical 40px Recent Topics thumbnail as a generic/prosilver
   fallback. Cosmic overrides this inside its 50/60px media slot. */
.recenttopics_attach_image_topic img,
.recenttopics_attach_image_forum img {
    display: block;
    width: 40px !important;
    height: 40px !important;
}

.recenttopics_attach_image_topic img {
    object-fit: cover;
}

.recenttopics_attach_image_forum {
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.recenttopics_attach_image_forum a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.recenttopics_attach_image_forum img {
    object-fit: contain;
}

/* Cosmic topic-media integration fixes
--------------------------------------------- */

/* In the narrow side layout the metadata <dd> elements must keep their
   natural height. Cosmic's generic topic-row rule raises every <dd> to the
   topic-icon slot height once TOPIC_IMG_STYLE is placed on the row. */
#recent-topics li.row dl.row-item > dd {
    min-height: 0 !important;
}

/* Keep the last-post metadata in the same .list-inner as the topic title and
   forum path. This is important in Cosmic: .list-inner owns the media slot and
   has a minimum height for the topic icon/ImgPosts thumbnail. If last-post
   metadata lives in a separate <dd>, it can only start after that minimum
   height and leaves a visible vertical gap below .forum-links. Inside
   .list-inner all three text lines share exactly the same left edge and stack
   naturally with no artificial spacing. */
#recent-topics .recenttopics-lastpost {
    display: block;
    margin: 0;
    padding: 3px;
    line-height: normal;
}

/* Cosmic normally draws an extra unread halo on li.row for ImgPosts images so
   it can escape phpBB's clipped topic list. Recent Topics has its own compact
   geometry, where that pseudo-element does not share the thumbnail's
   positioning context and can appear as a second floating frame. Keep the
   animated red/white border on the actual thumbnail, but suppress that extra
   halo only inside Recent Topics. */
#recent-topics li.row:has(dl.row-item[class*="_unread"] .imgposts-topic-image)::after,
.recent-topics li.row:has(dl.row-item[class*="_unread"] .imgposts-topic-image)::after {
    content: none !important;
    display: none !important;
}

/* Make the native unread hotspot cover the whole topic-icon slot in Recent
   Topics. Rows with an ImgPosts thumbnail already hide this hotspot in Cosmic;
   the thumbnail's own link is used instead. */
#recent-topics dl.row-item > dt > .row-item-link,
.recent-topics dl.row-item > dt > .row-item-link {
    top: 50%;
    left: var(--cosmic-topic-slot-left, 6px);
    width: var(--cosmic-topic-slot-size, 50px);
    height: var(--cosmic-topic-slot-size, 50px);
    margin: 0;
    transform: translateY(-50%);
}