/* Profile Reviews - layout and Profile-only behavior only */
/* Card structure (dimensions, header/body/footer) is defined ONCE in review-display.css.
   Profile is a consumer: it only provides layout (tab, container) and Profile-only UI (edit/delete buttons). */

/* CRITICAL FIX: Ensure edit button is never hidden - HIGHEST PRIORITY */
/* Target ALL possible selectors for edit button - MAXIMUM SPECIFICITY */
/* Force edit button to be visible - even more aggressive rules */
#reviews-tab-pane .new-review-card .card-actions button.btn.btn-sm.btn-outline-warning.edit-review-btn[data-bs-toggle="modal"],
#reviews-tab-pane .review-card .card-actions button.btn.btn-sm.btn-outline-warning.edit-review-btn[data-bs-toggle="modal"],
#reviews-tab-pane .card-actions .edit-review-btn,
#reviews-tab-pane .card-actions .btn-outline-warning.edit-review-btn,
#reviews-tab-pane .card-actions button.edit-review-btn,
#reviews-tab-pane .new-review-card .card-actions .edit-review-btn,
#reviews-tab-pane .review-card .card-actions .edit-review-btn,
#reviews-tab-pane .new-review-card .card-actions button.edit-review-btn,
#reviews-tab-pane .review-card .card-actions button.edit-review-btn,
#reviews-tab-pane .new-review-card .card-actions .btn-outline-warning,
#reviews-tab-pane .review-card .card-actions .btn-outline-warning,
#reviews-tab-pane .new-review-card .card-actions button.btn-outline-warning,
#reviews-tab-pane .review-card .card-actions button.btn-outline-warning,
#reviews-tab-pane .new-review-card .card-actions .btn.btn-outline-warning,
#reviews-tab-pane .review-card .card-actions .btn.btn-outline-warning,
#reviews-tab-pane .new-review-card .card-actions .btn.btn-sm.btn-outline-warning,
#reviews-tab-pane .review-card .card-actions .btn.btn-sm.btn-outline-warning,
#reviews-tab-pane .card-actions button:first-child,
#reviews-tab-pane .new-review-card .card-actions button:first-child,
#reviews-tab-pane .review-card .card-actions button:first-child {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    border: 1px solid #ffc107 !important;
    border-width: 1px !important;
    border-style: solid !important;
    background-color: transparent !important;
    color: #ffc107 !important;
    position: relative !important;
    z-index: 200 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    order: 1 !important; /* Ensure edit button comes first */
    flex-grow: 0 !important;
    flex-basis: auto !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure edit button icon is visible */
#reviews-tab-pane .card-actions .edit-review-btn i,
#reviews-tab-pane .card-actions .btn-outline-warning i,
#reviews-tab-pane .new-review-card .card-actions .edit-review-btn i,
#reviews-tab-pane .review-card .card-actions .edit-review-btn i {
    color: #ffc107 !important;
    font-size: 14px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
}

/* Force edit button visibility even when parent has opacity 0 */
#reviews-tab-pane .new-review-card .card-actions[style*="opacity: 0"] .edit-review-btn,
#reviews-tab-pane .review-card .card-actions[style*="opacity: 0"] .edit-review-btn {
    /* This will be overridden by parent opacity, but we ensure button itself is visible */
    opacity: 1 !important;
}

/* Keep everything strictly scoped to the reviews tab */
#reviews-tab-pane {
    /* Ensure reviews pane forms its own rendering context to avoid spillover */
    position: relative !important;
    /* Remove containment to prevent visual overlap issues */
    z-index: 0 !important;
    /* Add isolation to prevent content mixing */
    isolation: isolate !important;
    /* CRITICAL: Ensure tab-pane doesn't constrain width */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* Allow shrinking if needed */
    overflow: visible !important; /* Don't clip content */
}

/* CRITICAL: Ensure reviews-content parent doesn't constrain width */
#reviews-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

/* Review cards use the same .cards-grid > * rules as post/publication/study (profile _card-base.css).
   Do NOT add review-only height/align overrides here; all tab cards must have the same dimensions. */

@media (max-width: 768px) {
    /* Force reviews containers to full viewport width on mobile */
    #reviews-content,
    #reviews-list,
    #reviews-content #reviews-list {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: 0 !important;
    }
}

/* Grid layout rules moved to profile-grid-layout.css (shared across all tabs) */
/* Card structure (dimensions, header/body/footer) is defined ONCE in review-display.css under .cards-grid .review-card */
/* This file only contains Profile-specific behavior: edit/delete buttons, tab layout, container layout */

/* When reviews list is not in grid layout (fallback) */
#reviews-list:not(.cards-grid) .review-card,
#reviews-list:not(.cards-grid) .new-review-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure all footer elements are in one row and aligned */
#reviews-list .review-footer .review-interactions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    align-content: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    height: auto !important;
}

/* Review footer actions row — evenly spaced with safe card-edge insets */
#reviews-list .review-footer .review-footer-actions,
#reviews-list .review-footer > .d-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: clamp(4px, 2vw, 12px) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#reviews-list .review-footer .review-footer-stat,
#reviews-list .review-footer .review-interactions .btn,
#reviews-list .review-footer > .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
    max-width: fit-content !important;
    margin: 0 !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
    height: auto !important;
    cursor: default;
}

/* Review action button — same row spacing as like/comment stats */
#reviews-list .review-footer .review-action-btn {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    max-width: fit-content !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
    cursor: pointer;
}

#reviews-list .review-footer .review-action-btn span {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Avoid any accidental float/clear from legacy rules */
#reviews-tab-pane .review-card {
    float: none !important;
    clear: none !important;
}

/* Card Actions Positioning - Match Publication Cards */
/* Apply to both .review-card and .new-review-card classes */
#reviews-tab-pane .review-card .card-actions,
#reviews-tab-pane .new-review-card .card-actions {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 999 !important; /* Very high z-index to ensure above everything */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    border-radius: 8px !important;
    padding: 4px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}

/* Ensure flex container shows both buttons when visible */
#reviews-tab-pane .review-card:hover .card-actions,
#reviews-tab-pane .new-review-card:hover .card-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* CRITICAL: Force edit button to be visible when parent is visible - override Bootstrap modal styling */
#reviews-tab-pane .new-review-card:hover .card-actions button[data-bs-toggle="modal"],
#reviews-tab-pane .review-card:hover .card-actions button[data-bs-toggle="modal"],
#reviews-tab-pane .new-review-card:hover .card-actions button[data-bs-target="#editReviewModal"],
#reviews-tab-pane .review-card:hover .card-actions button[data-bs-target="#editReviewModal"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    border: 1px solid #0d6efd !important;
    color: #0d6efd !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 201 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    order: 1 !important;
}

/* Show buttons on hover - CRITICAL: Both buttons must appear together */
#reviews-tab-pane .review-card:hover .card-actions,
#reviews-tab-pane .new-review-card:hover .card-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* FORCE: When container is visible, both buttons MUST be visible */
#reviews-tab-pane .review-card:hover .card-actions .btn,
#reviews-tab-pane .new-review-card:hover .card-actions .btn,
#reviews-tab-pane .review-card:hover .card-actions .edit-review-btn,
#reviews-tab-pane .new-review-card:hover .card-actions .edit-review-btn,
#reviews-tab-pane .review-card:hover .card-actions .delete-review,
#reviews-tab-pane .new-review-card:hover .card-actions .delete-review,
#reviews-tab-pane .review-card:hover .card-actions .btn-outline-primary,
#reviews-tab-pane .new-review-card:hover .card-actions .btn-outline-primary,
#reviews-tab-pane .review-card:hover .card-actions .btn.btn-outline-primary,
#reviews-tab-pane .new-review-card:hover .card-actions .btn.btn-outline-primary,
#reviews-tab-pane .review-card:hover .card-actions .btn.btn-sm.btn-outline-primary,
#reviews-tab-pane .new-review-card:hover .card-actions .btn.btn-sm.btn-outline-primary {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    min-width: 32px !important;
    min-height: 32px !important;
}

/* Ensure edit button icon is visible on hover */
#reviews-tab-pane .review-card:hover .card-actions .edit-review-btn i,
#reviews-tab-pane .new-review-card:hover .card-actions .edit-review-btn i,
#reviews-tab-pane .review-card:hover .card-actions .btn-outline-primary i,
#reviews-tab-pane .new-review-card:hover .card-actions .btn-outline-primary i,
#reviews-tab-pane .review-card:hover .card-actions button[data-bs-toggle="modal"] i,
#reviews-tab-pane .new-review-card:hover .card-actions button[data-bs-toggle="modal"] i,
#reviews-tab-pane .review-card:hover .card-actions button[data-bs-target="#editReviewModal"] i,
#reviews-tab-pane .new-review-card:hover .card-actions button[data-bs-target="#editReviewModal"] i {
    color: #0d6efd !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-size: 14px !important;
    width: auto !important;
    height: auto !important;
}

/* Base button styles - all buttons in card-actions */
/* Buttons have opacity: 1, but parent container controls visibility */
#reviews-tab-pane .review-card .card-actions .btn,
#reviews-tab-pane .new-review-card .card-actions .btn {
    padding: 4px 6px !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    background-color: transparent !important;
    transition: opacity 0.2s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Edit button styling - CRITICAL: Must be visible when parent is visible */
#reviews-tab-pane .review-card .card-actions .btn-outline-primary,
#reviews-tab-pane .new-review-card .card-actions .btn-outline-primary,
#reviews-tab-pane .review-card .card-actions .edit-review-btn,
#reviews-tab-pane .new-review-card .card-actions .edit-review-btn,
#reviews-tab-pane .review-card .card-actions button.btn-outline-primary,
#reviews-tab-pane .new-review-card .card-actions button.btn-outline-primary,
#reviews-tab-pane .review-card .card-actions button.edit-review-btn,
#reviews-tab-pane .new-review-card .card-actions button.edit-review-btn {
    border-color: #0d6efd !important;
    border-width: 1px !important;
    border-style: solid !important;
    color: #0d6efd !important;
    opacity: 1 !important;
    display: inline-flex !important;
    visibility: visible !important;
    background-color: transparent !important;
    min-width: 28px !important;
    min-height: 28px !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
    z-index: 101 !important;
}

/* When parent container is visible (hover), edit button must be visible */
#reviews-tab-pane .review-card:hover .card-actions .edit-review-btn,
#reviews-tab-pane .new-review-card:hover .card-actions .edit-review-btn,
#reviews-tab-pane .review-card:hover .card-actions .btn-outline-warning,
#reviews-tab-pane .new-review-card:hover .card-actions .btn-outline-warning,
#reviews-tab-pane .review-card:hover .card-actions button.edit-review-btn,
#reviews-tab-pane .new-review-card:hover .card-actions button.edit-review-btn,
#reviews-tab-pane .review-card:hover .card-actions button.btn-outline-warning,
#reviews-tab-pane .new-review-card:hover .card-actions button.btn-outline-warning {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
}

/* Ensure edit button icon is visible - CRITICAL */
#reviews-tab-pane .review-card .card-actions .btn-outline-warning i,
#reviews-tab-pane .new-review-card .card-actions .btn-outline-warning i,
#reviews-tab-pane .review-card .card-actions .edit-review-btn i,
#reviews-tab-pane .new-review-card .card-actions .edit-review-btn i,
#reviews-tab-pane .review-card .card-actions button.edit-review-btn i,
#reviews-tab-pane .new-review-card .card-actions button.edit-review-btn i,
#reviews-tab-pane .review-card .card-actions button.btn-outline-warning i,
#reviews-tab-pane .new-review-card .card-actions button.btn-outline-warning i {
    color: #ffc107 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-size: 0.875rem !important;
    width: auto !important;
    height: auto !important;
}

#reviews-tab-pane .review-card .card-actions .btn-outline-warning:hover,
#reviews-tab-pane .new-review-card .card-actions .btn-outline-warning:hover,
#reviews-tab-pane .review-card .card-actions .edit-review-btn:hover,
#reviews-tab-pane .new-review-card .card-actions .edit-review-btn:hover {
    background-color: #ffc107 !important;
    color: #000 !important;
    opacity: 1 !important;
    border-color: #ffc107 !important;
}

/* Ensure edit button icon is black on hover (for better contrast on yellow) */
#reviews-tab-pane .review-card .card-actions .btn-outline-warning:hover i,
#reviews-tab-pane .new-review-card .card-actions .btn-outline-warning:hover i,
#reviews-tab-pane .review-card .card-actions .edit-review-btn:hover i,
#reviews-tab-pane .new-review-card .card-actions .edit-review-btn:hover i {
    color: #000 !important;
    opacity: 1 !important;
}

/* Delete button styling - CRITICAL: Must match edit button appearance */
#reviews-tab-pane .review-card .card-actions .btn-outline-danger,
#reviews-tab-pane .new-review-card .card-actions .btn-outline-danger,
#reviews-tab-pane .review-card .card-actions .delete-review,
#reviews-tab-pane .new-review-card .card-actions .delete-review {
    border-color: #dc3545 !important;
    border-width: 1px !important;
    border-style: solid !important;
    color: #dc3545 !important;
    opacity: 1 !important;
    background-color: transparent !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
    order: 2 !important; /* Ensure delete button comes second */
    flex-grow: 0 !important;
    flex-basis: auto !important;
    margin: 0 !important;
}

/* Ensure delete button icon matches edit button icon styling */
#reviews-tab-pane .review-card .card-actions .btn-outline-danger i,
#reviews-tab-pane .new-review-card .card-actions .btn-outline-danger i,
#reviews-tab-pane .review-card .card-actions .delete-review i,
#reviews-tab-pane .new-review-card .card-actions .delete-review i {
    color: #dc3545 !important;
    font-size: 14px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* When parent container is visible (hover), delete button must be visible */
#reviews-tab-pane .review-card:hover .card-actions .delete-review,
#reviews-tab-pane .new-review-card:hover .card-actions .delete-review,
#reviews-tab-pane .review-card:hover .card-actions .btn-outline-danger,
#reviews-tab-pane .new-review-card:hover .card-actions .btn-outline-danger {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
}

#reviews-tab-pane .review-card .card-actions .btn-outline-danger:hover,
#reviews-tab-pane .new-review-card .card-actions .btn-outline-danger:hover,
#reviews-tab-pane .review-card .card-actions .delete-review:hover,
#reviews-tab-pane .new-review-card .card-actions .delete-review:hover {
    background-color: #dc3545 !important;
    color: white !important;
    opacity: 1 !important;
    border-color: #dc3545 !important;
}

/* Ensure delete button icon is white on hover - matches edit button */
#reviews-tab-pane .review-card .card-actions .btn-outline-danger:hover i,
#reviews-tab-pane .new-review-card .card-actions .btn-outline-danger:hover i,
#reviews-tab-pane .review-card .card-actions .delete-review:hover i,
#reviews-tab-pane .new-review-card .card-actions .delete-review:hover i {
    color: white !important;
    opacity: 1 !important;
}

/* Grid handles responsive behavior automatically - no media queries needed */

/* Prevent review cards from appearing in other tabs */
.tab-pane:not(#reviews-tab-pane) .review-card,
.tab-pane:not(#reviews-tab-pane) .new-review-card {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Additional safeguard: Ensure review cards are strictly contained within reviews tab */
/* Note: More specific rules above handle column containment */
#reviews-tab-pane .review-card,
#reviews-tab-pane .new-review-card {
    /* Ensure proper stacking context */
    z-index: auto !important;
    /* Force visibility only within reviews tab */
    visibility: visible !important;
    opacity: 1 !important;
}