/**
 * Entity Review Modal Styles
 * Reuses .review-attributes, .review-attribute-row, etc. from reviewModal.css
 * Only adds entity-review-specific overrides here.
 */

/* Review badge sizing inside any card-actions container.
   Every entity card uses a wrapper class ending in "card-actions"
   (.bkc-, .vgc-, .bgc-, .alc-, etc.). Sibling buttons use a tight
   per-card sizing class; the review badge ships with btn-sm by
   default and would render larger. This single rule keeps the
   badge consistent with its siblings across every grid. */
[class*="card-actions"] .entity-review-badge {
    padding: 2px 5px;
    font-size: 0.7rem;
    line-height: 1.5;
}

/* Header color per entity type */
#entityReviewModal .modal-header.er-book { background: #198754; color: white; }
#entityReviewModal .modal-header.er-book .btn-close { filter: brightness(0) invert(1); }
#entityReviewModal .modal-header.er-video_game { background: #6f42c1; color: white; }
#entityReviewModal .modal-header.er-video_game .btn-close { filter: brightness(0) invert(1); }
#entityReviewModal .modal-header.er-board_game { background: #fd7e14; color: white; }
#entityReviewModal .modal-header.er-board_game .btn-close { filter: brightness(0) invert(1); }
#entityReviewModal .modal-header.er-concert { background: #0dcaf0; color: #212529; }

/* Entity-specific field sections - seamless with shared attributes */
.entity-specific-fields .review-attribute-row:last-child {
    margin-bottom: 0;
}

/* Purple text utility (for controller icon) */
.text-purple { color: #6f42c1; }
.text-orange { color: #fd7e14; }

/* Private toggle states */
#entityReviewPrivateToggle .bi-person-lock { color: #6c757d; }
#entityReviewPrivateToggle .bi-globe { color: #198754; }
#entityReviewPrivateToggle .bi-people { color: #0d6efd; }

/* Prompts */
#entityReviewPrompts .btn {
    font-size: 0.8rem;
}

/* Align rating label with stars on the same line */
#entityReviewRatingRow {
    align-items: center !important;
}
#entityReviewRatingRow .title-rating {
    flex-direction: row;
    gap: 2px;
}

/* Force inline layout for Platform/Hours rows even on mobile */
.er-inline-row {
    flex-direction: row !important;
    align-items: center !important;
}

/* ================================================
   Responsive Design
   ================================================ */
@media (max-width: 576px) {
    #entityReviewModal .modal-dialog {
        margin: 0.5rem;
    }

    #entityReviewModal #entityReviewText {
        height: auto;
        min-height: calc(1.5em * 3 + 1rem);
        max-height: calc(1.5em * 3 + 1rem);
    }

    #entityReviewPrompts {
        display: none !important;
    }

    #entityReviewModal .modal-body {
        padding: 0.75rem;
    }
}

/* ================================================
   Start With Album Picker (Artist Reviews)
   ================================================ */
.er-start-with-picker {
    position: relative;
    width: 100%;
}

.er-album-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--mv-bg-card, #fff);
    border: 1px solid var(--mv-border-color, var(--mv-border-color));
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 250px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.er-album-dropdown-list {
    overflow-y: auto;
    max-height: 210px;
}

.er-album-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--mv-border-color, #f0f0f0);
}

.er-album-dropdown-item:hover {
    background: var(--mv-bg-hover, #f8f9fa);
}

.er-album-dropdown-item img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.er-album-dropdown-item .er-album-title {
    font-weight: 500;
}

.er-album-dropdown-item .er-album-year {
    color: var(--mv-text-muted, #6c757d);
    font-size: 0.78rem;
}

.er-album-dropdown-item .er-album-type {
    color: var(--mv-text-muted, #6c757d);
    font-size: 0.72rem;
    font-style: italic;
}

.er-album-dropdown-footer {
    padding: 4px 10px;
    border-top: 1px solid var(--mv-border-color, var(--mv-border-color));
    text-align: center;
    flex-shrink: 0;
}

.er-album-selected-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #0d6efd;
    color: #fff;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
    margin-top: 4px;
}

.er-album-selected-badge i {
    cursor: pointer;
}

/* ================================================
   Standout Track Checklist (Album Reviews)
   ================================================ */
.er-track-checklist {
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
}

.er-track-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 0.84rem;
}

.er-track-item .form-check-input {
    margin-top: 0;
    flex-shrink: 0;
}

.er-track-item .er-track-num {
    color: var(--mv-text-muted, #6c757d);
    font-size: 0.75rem;
    min-width: 20px;
    text-align: right;
    flex-shrink: 0;
}

.er-track-item .er-track-name {
    flex: 1;
    min-width: 0;
}

.er-track-item .er-track-name.checked {
    font-weight: 600;
    color: #0d6efd;
}

.er-track-note-input {
    width: 100%;
    font-size: 0.78rem;
    padding: 2px 6px;
    margin-top: 2px;
    margin-left: 26px;
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

[data-bs-theme="dark"] .text-purple {
    color: #a78bfa;
}
[data-bs-theme="dark"] .text-orange {
    color: #fb923c;
}

/* X/Twitter share button */
[data-bs-theme="dark"] #erTwitterBtn {
    color: var(--mv-text-primary);
    border-color: var(--mv-border-color);
}

[data-bs-theme="dark"] #erTwitterBtn:hover {
    color: var(--mv-text-primary);
    background: var(--mv-bg-hover);
    border-color: var(--mv-border-color);
}