/* Responsive adjustments for dropdowns */
@media (max-width: 768px) {
    /*
      Ensures that dropdowns aligned to the end of the container (like user menu and notifications)
      do not overflow the viewport on smaller screens.
      We override Bootstrap's/Popper.js's default positioning.
    */
    .main-header .dropdown-menu-end {
        position: absolute !important;
        right: 5px !important;
        left: auto !important;
        transform: translateX(0) !important; /* Popper might add a transform, this resets it */
    }

    /* Specific adjustment for the notifications dropdown to control its width */
    #notifications-dropdown {
        width: 95vw !important;
        max-width: 400px;
    }
}

/* Forum Responsive Design */
@media (max-width: 992px) {
    .forum-container {
        padding: 0; /* Remove all padding from the main container */
    }

    .forum-main-content {
        grid-template-columns: 1fr;
        gap: 0.5rem; /* Reduce gap between columns */
    }

    .posts-section, .post-item, .forum-header {
        padding: 0.25rem; /* Drastically reduce padding */
        margin-bottom: 0.25rem !important; /* Drastically reduce margins */
        border-radius: 0; /* Flatten the cards */
    }

    .post-item-header {
        margin-bottom: 0.5rem;
    }

    .forum-sidebar {
        display: none; /* Sidebar will be handled via a dropdown/modal on mobile */
    }

    .post-item-title a {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

@media (max-width: 576px) {
    .post-item-header {
        flex-wrap: wrap;
    }

    .post-author-name {
        display: inline-block;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
}