/* Moderation Dropdown Styles - Subtle and Professional */

.moderation-dropdown {
    opacity: 0.8 !important;
    transition: opacity 0.2s ease !important;
    position: relative !important;
    z-index: 11000 !important;
    display: inline-block !important;
}

.moderation-dropdown:hover {
    opacity: 1 !important;
}

/* Subtle dropdown toggle button with red border to signify danger/moderation */
.moderation-dropdown-toggle {
    background: none !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    color: #dc3545 !important;
    padding: 0.25rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
    outline: none !important;
    margin-left: auto !important;
}

.moderation-dropdown-toggle:hover {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: rgba(220, 53, 69, 0.5) !important;
    color: #dc3545 !important;
}

.moderation-dropdown-toggle:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Dark mode support */
[data-bs-theme="dark"] .moderation-dropdown-toggle {
    color: #ff6b6b !important;
    opacity: 1 !important;
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: rgba(220, 53, 69, 0.4) !important;
}

[data-bs-theme="dark"] .moderation-dropdown-toggle:hover {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-color: rgba(220, 53, 69, 0.6) !important;
    color: #ff6b6b !important;
    opacity: 1 !important;
}

[data-bs-theme="dark"] .moderation-dropdown-toggle:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Make the dropdown more visible in dark mode */
[data-bs-theme="dark"] .moderation-dropdown {
    opacity: 1 !important;
}

[data-bs-theme="dark"] .moderation-dropdown:hover {
    opacity: 1 !important;
}

/* Ensure clickability */
.moderation-dropdown-toggle {
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 11001 !important;
    position: relative !important;
}

/* Dropdown menu styling */
.moderation-dropdown-menu {
    min-width: 160px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 11001 !important;
    background-color: white !important;
    border-radius: 0.375rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Force override any conflicting styles with maximum specificity - FIXED: Removed display: none */
html body main div div div div div div div div div ul.moderation-dropdown-menu,
html body [data-post-id] div div div ul.moderation-dropdown-menu,
.moderation-dropdown .moderation-dropdown-menu,
div.moderation-dropdown ul.moderation-dropdown-menu,
[data-post-id] .moderation-dropdown-menu {
    position: fixed !important;
    /* REMOVED: display: none !important; - This was causing the conflict! */
    z-index: 11000 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background-color: white !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    min-width: 160px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    inset: unset !important;
}

/* Visible state for moderation dropdown */
html body main div div div div div div div div div ul.moderation-dropdown-menu.show,
html body [data-post-id] div div div ul.moderation-dropdown-menu.show,
.moderation-dropdown .moderation-dropdown-menu.show,
div.moderation-dropdown ul.moderation-dropdown-menu.show,
[data-post-id] .moderation-dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: white !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

[data-bs-theme="dark"] .moderation-dropdown-menu {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Dropdown items */
.moderation-dropdown-item {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.2s !important;
    width: 100% !important;
    text-align: left !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
}

.moderation-dropdown-item:hover {
    background-color: rgba(0,0,0,0.05) !important;
}

[data-bs-theme="dark"] .moderation-dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Color coding for dropdown items */
.moderation-dropdown-item[data-moderation-action="hide"] {
    color: #ffc107 !important;
}

.moderation-dropdown-item[data-moderation-action="delete"] {
    color: #dc3545 !important;
}

.moderation-dropdown-item[data-moderation-action="restore"] {
    color: #198754 !important;
}

/* Force overflow visible on all containers that might clip dropdowns */

/* Main container - only for moderation dropdown context */
.moderation-dropdown .dashboard-main-content,
[data-post-id] .dashboard-main-content {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Post cards - only for moderation dropdown context */
.moderation-dropdown .spotterpost-card,
.moderation-dropdown .card,
[data-post-id] .spotterpost-card,
[data-post-id] .card {
    overflow: visible !important;
}

.moderation-dropdown .card-body,
[data-post-id] .card-body {
    overflow: visible !important;
}

/* Column containers - only for moderation dropdown context */
.moderation-dropdown .col-lg-9,
.moderation-dropdown .col-md-8,
.moderation-dropdown .posts-wrapper,
[data-post-id] .col-lg-9,
[data-post-id] .col-md-8,
[data-post-id] .posts-wrapper {
    overflow: visible !important;
}

/* Feed container - only for moderation dropdown context */
.moderation-dropdown #feed-posts,
.moderation-dropdown #posts-container,
[data-post-id] #feed-posts,
[data-post-id] #posts-container {
    overflow: visible !important;
}

/* Row containers - only for moderation dropdown context */
.moderation-dropdown .row,
[data-post-id] .row {
    overflow: visible !important;
}

/* Container fluid - only for moderation dropdown context */
.moderation-dropdown .container-fluid,
[data-post-id] .container-fluid {
    overflow: visible !important;
}

/* Desktop-specific overflow fixes */
@media (min-width: 768px) {
    /* Sidebar card should keep overflow hidden */
    .sidebar-card {
        overflow: hidden !important;
    }
    
    /* But main content area needs overflow visible */
    .col-lg-9 {
        overflow: visible !important;
    }
}

/* Ensure moderation dropdown container allows overflow */
.moderation-dropdown,
.moderation-dropdown-button-wrapper {
    overflow: visible !important;
    position: relative !important;
}

/* Force dropdown menu to be on top of everything */
.moderation-dropdown-menu {
    position: fixed !important;
    z-index: 999999 !important;
    transform: translate3d(0, 0, 0) !important; /* Force GPU rendering */
    will-change: transform !important;
}