/* ============================================
   FORUM STYLES (Date: 2025-11-10)
   ============================================

   Scope: Forum page, forum posts, comments, tabs, filters
   Related JS: forumSystem.js, renderSystem.js, main.js
   Related Pages: Forum page

   BEFORE EDITING:
   - Forum styles belong HERE, not elsewhere
   - Shared components belong in components/
   - Theme colors belong in themes/
   - Check CLAUDE.md Section 2d for architecture

   ============================================ */

/* Forum Container and Layout */


/* Forum Tabs and Navigation */


/* Forum Post Rendering */


/* Forum Post Actions and Interactions */


/* Forum Reply System */


/* ============================================
   UNIFIED CONTENT STYLING (Messages, Forum Posts, Support Tickets)
   All three types use .forum-post as shared parent
   ============================================ */

/* UNIFIED: All headers and footers use blue background */
.forum-post .forum-post-header {
    background-color: var(--theme-card-hover-bg); /* Blue header for all types */
}

.forum-post .forum-post-footer {
    background-color: var(--theme-card-hover-bg); /* Blue footer for all types */
}

/* UNIFIED: All content areas transparent by default */
.forum-post .forum-post-content,
.forum-post .forum-post-text {
    background-color: transparent !important;
}
/* Forum Styles - Updated for clickable avatars */
.forum-container {
    margin: 0;
    /* padding removed - inherits from .content-section */
}

/* Forum posts container now scrolls - rules moved to line 1311 */
/* Forum content overflow rules moved to line 1305 */

/* Forum Activity Section - ensure it doesn't overlap tabs */
.forum-activity-section {
    position: relative;
    z-index: 1; /* Below forum tabs which have z-index: 10 */
    margin-top: 20px;
}
/* Report Popup Styles */
.report-popup {
    display: none;
    position: fixed;
    z-index: 10000;
    background: var(--theme-bg-primary);
    border: 1px solid var(--theme-border-light);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--theme-shadow-light);
    width: 400px;
    max-width: 90vw;
}

.report-popup-content {
    padding: 0;
    background: var(--theme-bg-primary);
    opacity: 1;
}

.report-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--theme-border-light);
    background: var(--theme-bg-secondary);
    border-radius: 8px 8px 0 0;
    cursor: move;
    user-select: none;
}

.report-popup-header:active {
    background: var(--theme-bg-secondary);
}

.report-popup-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--theme-text-primary);
}

.report-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--theme-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.report-close-btn:hover {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
}

.report-popup-body {
    padding: 16px;
}

.report-popup-body label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text-primary);
}

#report-category {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--theme-border-light);
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
    background: var(--theme-bg-primary);
    cursor: pointer;
}

#report-category:focus {
    outline: none;
    border-color: var(--theme-btn-primary-bg);
    box-shadow: 0 0 0 3px var(--theme-input-focus-shadow);
}

#report-reason {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--theme-border-light);
    border-radius: 6px;
    font-size: 14px;
    resize: none;
    min-height: 60px;
    max-height: 200px;
    overflow-y: auto;
    font-family: inherit;
}

#report-reason:focus {
    outline: none;
    border-color: var(--theme-btn-primary-bg);
    box-shadow: 0 0 0 3px var(--theme-input-focus-shadow);
}

.report-note {
    margin-top: 12px;
    padding: 10px;
    background: var(--theme-bg-secondary);
    border-radius: 6px;
    font-size: 13px;
    color: var(--theme-text-secondary);
}

.report-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--theme-border-light);
    background: var(--theme-bg-secondary);
    border-radius: 0 0 8px 8px;
}

.report-popup-footer button {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.report-popup-footer .btn-secondary {
    background: var(--theme-bg-primary);
    border: 1px solid var(--theme-border-light);
    color: var(--theme-text-primary);
}

.report-popup-footer .btn-secondary:hover {
    background: var(--theme-bg-secondary);
}

.report-popup-footer .btn-primary {
    background: var(--theme-badge-danger-bg);
    border: 1px solid var(--theme-badge-danger-bg);
    color: var(--theme-text-on-primary);
}

.report-popup-footer .btn-primary:hover {
    background: var(--theme-badge-danger-bg);
    border-color: var(--theme-badge-danger-bg);
}

/* Context posts in forum - dim to show they're shown for context */
/* Excludes private messages, support tickets - they should always be clear */
.forum-post[data-context-post="true"]:not(.private-message):not([data-is-ticket="true"]) {
    opacity: 0.6;
    position: relative;
}

.forum-post[data-context-post="true"]:not(.private-message):not([data-is-ticket="true"]) .forum-post-username::before {
    content: "Context";
    display: block;
    background: var(--theme-bg-secondary);
    color: var(--theme-text-secondary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 2px;
    width: fit-content;
}

.forum-tab {
    /* Inherits from .menu-base */
    /* Color controlled by colorSchemeManager.js to match nav menu */
}

/* Reduce right padding for following and bookmark tabs */
.forum-tab[data-view="following"],
.forum-tab[data-view="bookmarked"],
.forum-tab[data-view="admin-following"],
.forum-tab[data-view="admin-bookmarks"] {
    /* Inherits padding from .menu-base */
}

/* Generic badge styling - MOVED TO components/badges.css */

/* Override for history counter badges */
#admin-purchase-history-counter,
#purchase-history-counter,
#admin-referral-history-counter,
#referral-history-counter,
#admin-discounts-history-counter,
#discounts-history-counter,
#admin-redeemed-history-counter,
#redeemed-history-counter {
    font-size: 10px !important;
    min-width: 0;
    margin-left: 0;
}

/* Gray badges for profile activity and history counters - use common counter system */
#activity-total-counter,
#support-activity-counter,
#forum-activity-counter,
#messages-activity-counter,
#history-total-counter,
#purchase-history-counter,
#referral-history-counter,
#discounts-history-counter,
#redeemed-history-counter,
#admin-history-total-counter,
#admin-purchase-history-counter,
#admin-referral-history-counter,
#admin-discounts-history-counter,
#admin-redeemed-history-counter {
    /* Use common counter system variables (same as .tab-counter) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--badge-counter-size);
    height: var(--badge-counter-size);
    padding: 0 5px;
    font-size: var(--badge-counter-font-size);
    font-weight: var(--badge-font-weight);
    line-height: var(--badge-counter-size);
    text-align: center;
    border-radius: var(--radius-full, 9999px);
    background: var(--theme-counter-total-bg);
    color: var(--theme-counter-total-color);
    text-decoration: none !important;
    margin-left: 0px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.leaderboard-button-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important; /* Allow clicks to pass through */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Re-enable pointer events for the leaderboard button itself */
.leaderboard-button-overlay .leaderboard-tab {
    pointer-events: auto !important;
}


/* Count badge for tabs - REMOVED: Now using unified .tab-counter definition from badges.css */

/* Override margin-left for all 2nd counters in forum tab buttons */
.view-tabs > button > span:nth-child(2) {
    margin-left: 0;
}

/* Ensure menu counters always reserve space (visibility instead of display) */
#forum-unread-counter,
#messages-unread-counter,
#support-unread-counter,
#cart-counter,
#forum-unread-counter-mobile,
#messages-unread-counter-mobile,
#support-unread-counter-mobile,
#cart-counter-mobile {
    display: inline-block !important;
    visibility: hidden;
    opacity: 0;
}
.tab-count-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--theme-badge-danger-bg);
    color: var(--theme-text-on-primary);
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1;
}

/* PM badge in menu */
.pm-badge, .pm-badge-mobile {
    background: var(--theme-badge-danger-bg);
    color: var(--theme-text-on-primary);
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    display: inline-block;
    text-align: center;
    margin-left: 5px;
}

/* Messages page styling - ALL MOVED TO messages.css (feature-based architecture) */

.forum-tab:hover {
    /* Inherits from .menu-base - blue hover color and underline */
}

.forum-tab.active {
    /* background-color removed - solid underline provides active feedback */
    /* color stays same as inactive - underline shows active state */
    text-shadow: none !important;
    font-weight: 500;
}

.forum-tab.active:hover {
    /* background-color removed - underline provides feedback */
    /* color stays same - underline shows active state */
    text-shadow: none !important;
}

/* Staff-only tabs (shown via JavaScript based on user role) */
.staff-only {
    display: none;
}

/* Staff-only tabs that are forum-tab elements should align to top */
.forum-tab.staff-only {
    align-self: flex-start;
}

/* Override toggle-button-group's !important for staff-only elements */
.toggle-button-group.staff-only {
    display: none !important;
}


.forum-new-post-btn {
    background: var(--theme-btn-primary-bg);
    border: 1px solid var(--theme-btn-primary-bg);
    padding: 0 12px;
    border-radius: 6px;
    color: var(--theme-text-on-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
    height: 20px;
    min-width: 110px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.forum-new-post-btn:hover {
    background: var(--theme-btn-primary-bg);
    border-color: var(--theme-btn-primary-bg);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px var(--theme-shadow);
}

/* Forum Post Structure */
.forum-post {
    background: var(--theme-bg-primary);
    border: 2px solid var(--theme-btn-primary-bg); /* Blue border for all posts */
    border-left: 5px solid var(--theme-btn-primary-bg); /* Blue left edge for Level 0 */
    border-radius: 12px;
    margin-bottom: 8px; /* Proper gap between posts */
    position: relative;
    padding-left: 0; /* No extra padding needed */
}

/* New Post/PM Form */
.forum-post.new-post-form,
#pm-form {
    position: relative !important;
    z-index: 0;
    border: 2px solid var(--theme-btn-primary-bg);
    border-radius: 8px;
    box-shadow: 0 4px 6px var(--theme-shadow);
    margin: 15px 0;
    background: var(--theme-bg-primary);
    display: block !important;
    width: 100%;
    max-width: none;
}

/* Post Header */
.forum-post-header {
    display: flex;
    align-items: center;
    padding: 10px 12px 5px 12px;
    border-bottom: 1px solid var(--theme-border-light);
    background: var(--theme-badge-info-bg); /* Changed from grey to blue */
    border-radius: 10px 10px 0 0; /* Match top corners with outer border */
    position: relative;
}

.forum-post-pin-container {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    z-index: 1;
}

/* Pin button styling */
button.forum-post-badge.pin-button[data-pinned="false"] {
    background: var(--theme-bg-secondary) !important;
    color: var(--theme-text-secondary) !important;
}

button.forum-post-badge.pin-button[data-pinned="true"] {
    background: var(--theme-badge-warning-bg) !important;
    color: var(--theme-btn-warning-bg) !important;
}

/* Private message button - now gray by default */
button.forum-post-badge.pm-button {
    background: var(--theme-bg-secondary) !important;
    color: var(--theme-text-secondary) !important;
    margin-left: 5px;
    border: 1px solid var(--theme-border-light);
}

button.forum-post-badge.pm-button:hover {
    background: var(--theme-bg-secondary) !important;
    color: var(--theme-text-primary) !important;
}

/* PM button when message has been sent */
button.forum-post-badge.pm-button.pm-sent {
    background: var(--theme-btn-success-bg) !important;
    color: white !important;
    border-color: var(--theme-btn-success-bg);
}

button.forum-post-badge.pm-button.pm-sent:hover {
    background: var(--theme-btn-success-bg) !important;
}

.forum-post-avatar-link {
    text-decoration: none;
    margin-right: 10px;
    display: inline-block;
    cursor: pointer;
}

.forum-post-avatar {
    width: 40px;
    height: 40px;
    background: var(--theme-badge-warning-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-on-primary);
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.forum-post-avatar-link:hover .forum-post-avatar {
    transform: scale(1.1);
    box-shadow: 0 2px 8px var(--theme-purple-overlay-medium);
}

.forum-post-meta {
    flex: 1;
}

.forum-post-author {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    pointer-events: none;
}

.forum-post-author > * {
    pointer-events: auto;
}

.forum-post-username {
    font-weight: 600;
    color: var(--theme-btn-primary-bg);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    margin-right: 4px;
    cursor: pointer;
    width: fit-content;
    display: inline-block;
    padding: 0;
    max-width: max-content;
}

.forum-post-username:hover {
    color: var(--theme-btn-primary-bg);
    text-decoration: underline;
}

.recipient-link {
    font-weight: 600;
    color: var(--theme-btn-primary-bg);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.recipient-link:hover {
    color: var(--theme-btn-primary-bg);
    text-decoration: underline;
}

.post-count {
    color: var(--theme-border-light);
    font-size: 12px;
    font-weight: normal;
    margin-right: 8px;
}

.forum-post-badge {
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

a.forum-post-badge {
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

a.forum-post-badge:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Role badge styles moved to components/badges.css for unified management */

.forum-post-badge.pinned {
    background: var(--theme-badge-warning-bg);
    color: var(--theme-btn-warning-bg);
}

button.forum-post-badge.pin-button {
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 75px;
    text-align: center;
}

button.forum-post-badge.pin-button:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

button.forum-post-badge.pin-button[data-pinned="false"] {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-secondary);
    opacity: 0.7;
}

button.forum-post-badge.pin-button[data-pinned="false"]:hover {
    opacity: 1;
    background: var(--theme-badge-warning-bg);
    color: var(--theme-btn-warning-bg);
}

button.forum-post-badge.pin-button.pinned-readonly {
    cursor: default;
    pointer-events: none;
    opacity: 0.9;
}

.forum-post-time {
    color: var(--theme-text-secondary);
    font-size: 12px;
}

/* Post Actions (right side of header) */
.forum-post-actions {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap; /* Allow wrapping if too many actions */
    max-width: 100%; /* Prevent overflow */
}

.forum-action-item {
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 10;
    line-height: 1; /* Ensure consistent height across all pages */
}

/* Tooltip dropdown for admin/support users - positioned below with high z-index */
.action-tooltip {
    display: none;
    position: absolute;
    top: 100%; /* No gap - tooltip sits right below the icon */
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-text-primary);
    color: var(--theme-text-on-primary);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.8;
    z-index: 99999 !important;
    pointer-events: auto; /* Allow interaction with tooltip */
    box-shadow: 0 4px 12px var(--theme-shadow-medium-light);
    min-width: 120px;
    max-width: 180px;
    max-height: 100px; /* Reduced to show scrollbar with ~4-5 users */
    overflow-y: auto;
    padding: 10px 14px;
    text-align: center;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-shadow) transparent;
}

/* Special positioning for the last action item (Report) to avoid right edge cutoff */
.forum-action-item:last-child .action-tooltip {
    left: auto;
    right: 0;
    transform: none;
}

/* Invisible bridge to maintain hover between button and tooltip */
.action-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 8px; /* Bridge the gap */
    background: transparent;
    pointer-events: auto;
}

/* Custom scrollbar for tooltip */
.action-tooltip::-webkit-scrollbar {
    width: 6px;
}

.action-tooltip::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.action-tooltip::-webkit-scrollbar-thumb {
    background: var(--theme-shadow);
    border-radius: 3px;
}

.action-tooltip::-webkit-scrollbar-thumb:hover {
    background: var(--theme-shadow-dark);
}

/* Make tooltip visible on hover of button OR tooltip itself */
.forum-action-item:hover .action-tooltip,
.action-tooltip:hover {
    display: block;
}

/* Ensure forum actions don't overflow */
.forum-post-actions {
    overflow: visible !important;
    position: relative;
}

/* Tooltip arrow pointing up - centered (using separate element) */
.action-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--theme-text-primary);
    z-index: 99999;
}

.forum-action-item.zero-count {
    filter: grayscale(100%);
    opacity: 0.5;
}

.forum-action-item.zero-count .action-icon {
    filter: grayscale(100%);
}

.forum-action-item.zero-count .action-count {
    background: var(--theme-border-light);
}

.forum-action-item:not(.zero-count):not(.active) {
    filter: grayscale(0%);
    opacity: 1;
}

/* Blue for when others have interacted (but not when user has viewed) */
.forum-action-item:not(.zero-count):not(.active):not(.user-viewed) .action-count {
    background: var(--theme-btn-primary-bg);
    color: var(--theme-text-on-primary);
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: 600;
}

/* Red for when current user has interacted */
.forum-action-item.active {
    filter: grayscale(0%) brightness(1.2);
    opacity: 1;
}

.forum-action-item.active .action-icon {
    filter: saturate(1.5) brightness(1.1);
    transform: scale(1.1);
}

.forum-action-item.active .action-count {
    background: var(--theme-badge-danger-bg);
    color: var(--theme-text-on-primary);
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: 600;
}

/* Special state for views - red when current user has viewed */
.forum-action-item.user-viewed .action-count {
    background: var(--theme-badge-danger-bg);
    color: var(--theme-text-on-primary);
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: 600;
}

.forum-action-item:hover {
    transform: scale(1.05);
    z-index: 100000 !important;
}

.action-icon {
    font-size: 18px;
    display: block;
    position: relative;
    pointer-events: none; /* Allow clicks to pass through to parent */
}

.action-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--theme-btn-primary-bg);
    color: var(--theme-text-on-primary);
    font-size: 9px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 8px;
    min-width: 14px;
    text-align: center;
    line-height: 1.2;
    pointer-events: none; /* Allow clicks to pass through to parent */
}

/* When user has viewed the post, turn the view count red */
.forum-action-item.user-viewed .action-count {
    background: var(--theme-badge-danger-bg);
}

.action-label {
    font-size: 10px;
    color: var(--theme-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    pointer-events: none; /* Allow clicks to pass through to parent */
}

.forum-action-item[data-count="0"] .action-count {
    background: var(--theme-border-light);
}

/* Hide count when it's 0 for cleaner look */
.forum-action-item[data-count="0"] .action-count {
    display: none;
}

/* Show count for non-zero values */
.forum-action-item:not([data-count="0"]) .action-count {
    display: block;
}

/* Reply Structure */
.forum-replies-container {
    margin-top: 0; /* Changed from -1px to match level 0 spacing */
}

/* Level 2 replies container (contains level 3 replies) */
.forum-replies-container.level-2-replies {
    margin-top: 0;
    margin-left: 0;
}

.forum-reply {
    position: relative;
    margin-bottom: 8px; /* Proper gap between replies */
    border-radius: 8px;
    border: 2px solid var(--theme-btn-primary-bg); /* Blue border for all replies */
}

/* Level 1 replies - RED left edge */
.forum-reply.level-1 {
    margin-left: 20px;
    border: 2px solid var(--theme-btn-primary-bg); /* Blue outer border */
    border-left: 5px solid var(--theme-badge-danger-bg); /* Red left edge */
    padding-left: 0;
}

/* Level 2 replies - GREEN left edge */
.forum-reply.level-2 {
    margin-left: 40px;
    border: 2px solid var(--theme-btn-primary-bg); /* Blue outer border */
    border-left: 5px solid var(--theme-btn-success-bg); /* Green left edge */
    padding-left: 0;
}

/* Level 3 replies - ORANGE left edge */
.forum-reply.level-3 {
    margin-left: 80px;
    border: 2px solid var(--theme-btn-primary-bg); /* Blue outer border */
    border-left: 5px solid var(--theme-btn-warning-hover-bg); /* Orange left edge */
    padding-left: 0;
}

/* Level 4 replies - PURPLE left edge */
.forum-reply.level-4 {
    margin-left: 100px;
    border: 2px solid var(--theme-btn-primary-bg); /* Blue outer border */
    border-left: 5px solid var(--theme-badge-warning-bg); /* Purple left edge */
    padding-left: 0;
}

/* Level 5+ replies - PURPLE left edge */
.forum-reply.level-5,
.forum-reply.level-6,
.forum-reply.level-7,
.forum-reply.level-8,
.forum-reply.level-9,
.forum-reply.level-10 {
    margin-left: 120px;
    border: 2px solid var(--theme-btn-primary-bg); /* Blue outer border */
    border-left: 5px solid var(--theme-badge-warning-bg); /* Purple left edge */
    padding-left: 0;
}

/* Reply header and footer border radius */
.forum-reply .forum-post-header {
    border-radius: 6px 6px 0 0; /* Match reply border radius */
}

.forum-reply .forum-post-footer {
    border-radius: 0 0 6px 6px; /* Match reply border radius */
}

/* Post Content */
.forum-post-content {
    padding: 2px 12px 2px 12px;
}

/* Placeholder for contentEditable */
.forum-post-text.empty:before {
    content: attr(data-placeholder);
    color: var(--theme-border-light);
    pointer-events: none;
    position: absolute;
}

.forum-post-text[contenteditable="true"] {
    position: relative;
    cursor: text;
    z-index: 1;
}

.forum-post-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-post-text);
    margin-bottom: 4px;
}

.forum-post-text {
    color: var(--theme-post-text);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    margin: 0;
}

/* Post Footer */
.forum-post-footer {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 12px;
    border-top: 1px solid var(--theme-border-light);
    border-radius: 0 0 10px 10px; /* Match bottom corners with outer border */
    background: var(--theme-badge-info-bg); /* Changed from grey to blue */
}

.forum-footer-left {
    display: flex;
    gap: 6px;
}

.forum-footer-right {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.clear-reports-btn {
    background: var(--theme-badge-warning-bg) !important;
    color: var(--theme-btn-warning-bg) !important;
    border: 1px solid var(--theme-btn-warning-bg) !important;
}

.clear-reports-btn:hover {
    background: var(--theme-badge-warning-bg) !important;
}

.forum-footer-btn {
    padding: 4px 10px;
    background: var(--theme-btn-secondary-bg);
    color: var(--theme-btn-secondary-color);
    border: 1px solid var(--theme-btn-secondary-border, transparent);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.forum-footer-btn:hover {
    background: var(--theme-btn-secondary-hover-bg);
}

.forum-footer-btn.show-replies {
    background: var(--theme-btn-secondary-bg);
    color: var(--theme-btn-secondary-color);
}

.forum-footer-btn.show-replies:hover {
    background: var(--theme-btn-secondary-hover-bg);
}

.ticket-controls {
    position: relative;
    z-index: 1;
}

.ticket-control-btn {
    position: relative;
    z-index: 1;
}



.forum-messages-container {
    margin-top: 20px;
}

.messages-in-forum {
    padding: 10px;
}

/* Messages container and forum log view don't need extra padding - normal flow */
#messages-container {
    padding-top: 0;
}

#forum-log-view {
    padding-top: 0;
}

/* Prevent flashing when switching tabs - hidden content should stay invisible */
#forum-posts[style*="display: none"] {
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

.messages-in-forum h3 {
    margin: 0 0 20px 0;
    color: var(--theme-text-primary);
}

/* PM Button Styling - removed duplicate, using button.forum-post-badge.pm-button styles */
.forum-post-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.forum-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--theme-shadow-medium-dark);
    cursor: pointer;
}

.pm-post-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    max-width: 90vw;
    background: var(--theme-bg-primary);
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px var(--theme-shadow), 0 10px 10px -5px var(--theme-shadow-lightest);
    z-index: 10001;
}

.pm-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--theme-border-light);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.pm-close-btn:hover {
    color: var(--theme-text-primary);
}

.pm-header {
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--theme-border-light);
    margin-bottom: 16px;
}

.pm-header h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.pm-notice {
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: 13px;
    font-style: italic;
    line-height: 1.4;
}

.pm-message-area {
    margin-top: 12px;
}

.pm-message-area label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.pm-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--theme-border-light);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.pm-textarea:focus {
    outline: none;
    border-color: var(--theme-badge-warning-bg);
    box-shadow: 0 0 0 3px var(--theme-purple-overlay-light);
}

.pm-post-dialog .forum-post-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--theme-border-light);
    display: flex;
    justify-content: flex-end;
}

.pm-post-dialog .forum-footer-right {
    display: flex;
    gap: 8px;
}

/* Admin bottom section break removed per requirements */

/* Bottom scroll trigger removed per requirements */

/* Allow badges on all forum tabs including unread */
/* Badge styling now consistent across all tabs */

/* Duplicate #pm-form removed - definition at line 432 */
/* Inline reply form styling */
#reply-form {
    margin: 20px 0;
    border: 1px solid var(--theme-border-light);
    border-radius: 8px;
}

/* Style for inline form headers */
#reply-form .pm-header,
#pm-form .pm-header {
    margin-bottom: 12px;
}

/* Ensure forum container doesn't have elements outside viewport */
.forum-container > * {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure moderation tab badge matches other badges */
.forum-tab.moderation-tab .badge {
    background: var(--theme-badge-danger-bg) !important;
    color: white !important;
    border-radius: 10px !important;
    padding: 1px 5px !important;
    font-size: 10px !important;
    margin-left: 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    font-weight: bold !important;
}

/* Unread counter styles removed - now using .tab-counter for all counters */


/* Private message form styling */
.forum-post.new-message-form {
    background: linear-gradient(135deg, var(--theme-badge-info-bg) 0%, var(--theme-badge-info-bg) 100%);
    border-left: 4px solid var(--theme-btn-primary-bg);
    box-shadow: 0 1px 3px var(--theme-input-focus-shadow);
}

.forum-post.new-message-form:hover {
.deleted-post .forum-post-content {
    font-style: italic;
    color: var(--theme-border-light);
}

.deleted-post .forum-post-header {
    opacity: 0.6;
}

/* Following/Bookmarked Indicators - styled as bars on the header */

/* Orange header for actually followed/bookmarked posts */
.highlight-indicator {
    background: var(--theme-badge-warning-bg) !important; /* Light orange */
    color: var(--theme-btn-warning-color) !important; /* Dark orange text for contrast */
    padding: 2px 12px !important; /* Just 2px top and bottom */
    font-size: 11px !important;
    font-weight: 500 !important;
    display: block !important;
    margin: 0 !important;
    position: relative !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important; /* Match post's top radius */
    z-index: 2 !important;
    text-align: left !important;
    border-bottom: 1px solid var(--theme-btn-warning-hover-bg) !important; /* Orange bottom border */
    line-height: 1 !important; /* Minimize line height to reduce extra space */
}

/* Light red header for pinned posts */
.pinned-indicator {
    background: var(--theme-badge-danger-bg) !important; /* Light red */
    color: var(--theme-badge-danger-bg) !important; /* Dark red text for contrast */
    padding: 2px 12px !important; /* Just 2px top and bottom */
    font-size: 11px !important;
    font-weight: 500 !important;
    display: block !important;
    margin: 0 !important;
    position: relative !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important; /* Match post's top radius */
    z-index: 2 !important;
    text-align: left !important;
    border-bottom: 1px solid var(--theme-badge-danger-bg) !important; /* Red bottom border */
    line-height: 1 !important; /* Minimize line height to reduce extra space */
}

/* Yellow header for context posts (parent/thread posts) - .context-indicator-top MOVED TO layouts.css (shared UI element) */
.context-indicator-reply {
    background: var(--theme-badge-warning-bg) !important; /* Light yellow */
    color: var(--theme-btn-warning-bg) !important; /* Dark amber text for contrast */
    padding: 2px 12px !important; /* Just 2px top and bottom */
    font-size: 11px !important;
    font-weight: 500 !important;
    display: block !important;
    margin: 0 !important;
    position: relative !important; /* Changed from absolute */
    border: none !important;
    border-radius: 10px 10px 0 0 !important; /* Match post's top radius */
    z-index: 2 !important;
    text-align: left !important; /* Changed from center to left */
    border-bottom: 1px solid var(--theme-btn-warning-bg) !important; /* Add subtle bottom border */
    line-height: 1 !important; /* Minimize line height to reduce extra space */
}

/* Ensure forum post is positioned for indicator */
.forum-post:has(.highlight-indicator),
.forum-post:has(.pinned-indicator),
.forum-post:has(.context-indicator-reply),
.forum-post:has(.context-indicator-top) {
    position: relative !important;
    overflow: visible !important;
}