/**
 * Viewing Tags Editor Component Styles
 */

/* Modal z-index - must stack above addViewingModal */
#viewingTagsEditorModal {
    z-index: 1070 !important;
}

/* Section styling */
#viewingTagsEditorModal .tags-section {
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid #e9ecef;
}

#viewingTagsEditorModal .tags-section-header {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

#viewingTagsEditorModal .tags-section-header i {
    font-size: 1rem;
}

/* Tags container */
#viewingTagsEditorModal .tags-container {
    min-height: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

/* Tag badges - Title tags (gray) */
#viewingTagsEditorModal .tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: #6c757d;
    color: white;
    border-radius: 0.25rem;
    font-size: 0.8rem;
}

/* Viewing tags (primary blue) */
#viewingTagsEditorModal .tag-badge.viewing-tag {
    background-color: #0d6efd;
}

#viewingTagsEditorModal .tag-badge .tag-remove-btn {
    cursor: pointer;
    margin-left: 0.35rem;
    opacity: 0.7;
    font-weight: bold;
}

#viewingTagsEditorModal .tag-badge .tag-remove-btn:hover {
    opacity: 1;
}

/* Move button styling */
#viewingTagsEditorModal .tag-badge .tag-move-btn {
    cursor: pointer;
    margin-left: 0.35rem;
    opacity: 0.7;
    font-weight: bold;
    font-size: 0.85rem;
}

#viewingTagsEditorModal .tag-badge .tag-move-btn:hover {
    opacity: 1;
}


/* Preset/suggestion buttons */
#viewingTagsEditorModal .preset-tag-btn,
#viewingTagsEditorModal .viewing-suggestion-btn {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--mv-border-color);
    background: white;
    border-radius: 0.25rem;
    cursor: pointer;
}

#viewingTagsEditorModal .preset-tag-btn:hover:not(.used),
#viewingTagsEditorModal .viewing-suggestion-btn:hover:not(.used) {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

#viewingTagsEditorModal .preset-tag-btn.used,
#viewingTagsEditorModal .viewing-suggestion-btn.used {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    text-decoration: line-through;
}

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

[data-bs-theme="dark"] #viewingTagsEditorModal .tags-section {
    background-color: var(--mv-bg-surface);
    border-color: var(--mv-border-color);
}
[data-bs-theme="dark"] #viewingTagsEditorModal .preset-tag-btn,
[data-bs-theme="dark"] #viewingTagsEditorModal .viewing-suggestion-btn {
    border-color: var(--mv-border-color);
    background: var(--mv-bg-card);
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] #viewingTagsEditorModal .preset-tag-btn:hover:not(.used),
[data-bs-theme="dark"] #viewingTagsEditorModal .viewing-suggestion-btn:hover:not(.used) {
    background-color: var(--mv-bg-surface);
}
[data-bs-theme="dark"] #viewingTagsEditorModal .preset-tag-btn.used,
[data-bs-theme="dark"] #viewingTagsEditorModal .viewing-suggestion-btn.used {
    background-color: var(--mv-bg-hover);
    color: var(--mv-text-muted);
}