/*
 * Facebook-style Notification Feed for bbPress Topics - V4 (Corrected Selectors)
 *
 * This CSS targets the specific HTML structure provided by the user.
 */

/* --- General Container & Reset --- */
#bbpress-forums {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: #1c1e21;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 20px !important;
}

#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-replies,
#bbpress-forums ul.bbp-forums {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Hide the default table-style header --- */
#bbpress-forums li.bbp-header {
    display: none !important;
}

/* --- Topic Card Styling --- */
#bbpress-forums ul.bbp-topics > li.bbp-body > ul[id^="bbp-topic-"] {
    padding: 12px 15px !important;
    border-bottom: 1px solid #e9e9e9 !important;
    display: flex !important;
    align-items: flex-start !important;
    transition: background-color 0.2s ease-in-out !important;
    position: relative !important;
}

#bbpress-forums ul.bbp-topics > li.bbp-body > ul[id^="bbp-topic-"]:last-child {
    border-bottom: none !important;
}

/* Hover effect */
#bbpress-forums ul.bbp-topics > li.bbp-body > ul[id^="bbp-topic-"]:hover {
    background-color: #f0f4ff !important;
}

/* --- Avatar --- */
#bbpress-forums .bbp-author-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    /* You might need to directly target the img inside if the above doesn't work */
    /*
    #bbpress-forums .bbp-author-avatar img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
    }
    */
}

/* --- Topic Content --- */
#bbpress-forums ul.bbp-topics > li.bbp-body > ul[id^="bbp-topic-"] > li.bbp-topic-title {
    flex-grow: 1 !important;
    margin-right: 15px !important;
}

#bbpress-forums .bbp-topic-title a {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #050505 !important;
    text-decoration: none !important;
}

#bbpress-forums .bbp-topic-title a:hover {
    color: #1877f2 !important;
}

#bbpress-forums .bbp-topic-meta {
    font-size: 13px !important;
    color: #65676b !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
}

#bbpress-forums .bbp-topic-meta a {
    color: #65676b !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

#bbpress-forums .bbp-topic-meta a:hover {
    text-decoration: underline !important;
}

/* --- Topic Stats --- */
#bbpress-forums ul.bbp-topics > li.bbp-body > ul[id^="bbp-topic-"] > li.bbp-topic-voice-count,
#bbpress-forums ul.bbp-topics > li.bbp-body > ul[id^="bbp-topic-"] > li.bbp-topic-reply-count {
    /* These elements are not directly relevant to the Facebook notification style we're aiming for,
       as reply count and time are integrated into the meta text.
       We can hide them or repurpose them if needed. For now, let's hide them for cleaner design. */
    display: none !important;
}

/* For time ago and last reply by */
#bbpress-forums ul.bbp-topics > li.bbp-body > ul[id^="bbp-topic-"] > li.bbp-topic-freshness {
    text-align: right !important;
    font-size: 13px !important;
    color: #65676b !important;
    flex-shrink: 0 !important;
    margin-left: auto !important; /* Push to the right */
    white-space: nowrap !important; /* Prevent wrapping */
}

#bbpress-forums ul.bbp-topics > li.bbp-body > ul[id^="bbp-topic-"] > li.bbp-topic-freshness a {
    color: #65676b !important;
    text-decoration: none !important;
}

#bbpress-forums ul.bbp-topics > li.bbp-body > ul[id^="bbp-topic-"] > li.bbp-topic-freshness a:hover {
    text-decoration: underline !important;
}

/* --- Unread Indicator --- */
/* This will require JS/PHP to add 'bbp-topic-unread' class to the ul[id^="bbp-topic-"] */
#bbpress-forums ul[id^="bbp-topic-"].bbp-topic-unread {
    position: relative !important;
    padding-left: 25px !important; /* Make space for the dot */
}

#bbpress-forums ul[id^="bbp-topic-"].bbp-topic-unread::before {
    content: '' !important;
    position: absolute !important;
    left: 10px !important; /* Position of the dot */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #1877f2 !important; /* Facebook blue */
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2) !important; /* Soft glow */
}

/* --- Hide default bbPress elements that don't fit the notification style --- */
#bbpress-forums .bbp-breadcrumb,
#bbpress-forums .bbp-pagination,
#bbpress-forums .bbp-topic-tags,
#bbpress-forums .bbp-forum-description,
#bbpress-forums .bbp-search-form {
    display: none !important;
}

/* --- Style the "Subscribe" button --- */
#bbpress-forums a.subscription-toggle {
    background-color: #e4e6eb !important; /* Light grey, similar to Facebook secondary buttons */
    color: #050505 !important;
    padding: 8px 15px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease-in-out !important;
    border: none !important;
    display: inline-flex !important; /* Use flex to align icon if any */
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
}

#bbpress-forums a.subscription-toggle:hover {
    background-color: #d8dade !important; /* Slightly darker grey on hover */
}

/* Add an icon to the subscribe button (optional, using Unicode) */
#bbpress-forums a.subscription-toggle::before {
    content: '🔔' !important; /* Bell icon */
    font-size: 16px !important;
}


/* --- Restore and Style "Create New Topic" Form --- */
#bbpress-forums #new-topic-0 {
    padding: 20px !important;
    background-color: #f0f2f5 !important;
    border-top: 1px solid #e9e9e9 !important;
    margin-top: 20px !important;
    border-radius: 8px !important;
}

#bbpress-forums #new-topic-0 fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#bbpress-forums #new-topic-0 legend {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    color: #1c1e21 !important;
}

#bbpress-forums #new-topic-0 label {
    font-weight: 500 !important;
    display: block !important;
    margin-bottom: 5px !important;
    color: #65676b !important;
}

#bbpress-forums #new-topic-0 input[type="text"],
#bbpress-forums #new-topic-0 textarea {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #ccd0d5 !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
}

#bbpress-forums #new-topic-0 .bbp-submit-wrapper {
    text-align: right !important;
}

#bbpress-forums #new-topic-0 button.submit {
    background-color: #1877f2 !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    border: none !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease-in-out !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

#bbpress-forums #new-topic-0 button.submit:hover {
    background-color: #166fe5 !important;
}

/* --- Responsive Styles --- */
@media (max-width: 600px) {
    #bbpress-forums ul.bbp-topics > li.bbp-body > ul[id^="bbp-topic-"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    #bbpress-forums .bbp-author-avatar {
        display: block !important; /* Show avatar on small screens */
        margin-bottom: 10px !important; /* Add some space below avatar */
    }

    #bbpress-forums ul.bbp-topics > li.bbp-body > ul[id^="bbp-topic-"] > li.bbp-topic-title {
        margin-right: 0 !important;
        width: 100% !important;
        text-align: left !important;
    }

    #bbpress-forums .bbp-topic-meta {
        text-align: left !important;
    }

    #bbpress-forums ul.bbp-topics > li.bbp-body > ul[id^="bbp-topic-"] > li.bbp-topic-freshness {
        text-align: left !important;
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 5px !important;
    }

    #bbpress-forums ul[id^="bbp-topic-"].bbp-topic-unread {
        padding-left: 15px !important; /* Reset padding and move dot to within content */
    }

    #bbpress-forums ul[id^="bbp-topic-"].bbp-topic-unread::before {
        left: auto !important;
        right: 10px !important;
        top: 10px !important; /* Move dot to top right */
        transform: none !important;
    }

    #bbpress-forums .bbp-topic-stats {
        flex-direction: row !important; /* Keep stats in a row */
        justify-content: flex-start !important;
        width: 100% !important;
        margin-top: 10px !important;
    }
}