/**
 * watchProgress.css - Watch Progress Bar Component Styles
 * A thin progress bar showing how far into a watchlist item the user has gotten
 */

/* Progress bar container - positioned ABOVE the release strip */
.watch-progress-bar {
    position: absolute;
    bottom: 24px; /* Above the release strip (which is ~22px tall) */
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3; /* Below release strip so it doesn't interfere */
    pointer-events: none; /* Don't block clicks on underlying elements */
}

/* The filled portion of the progress bar */
.watch-progress-bar-fill {
    height: 100%;
    background: #ffc107; /* Bootstrap warning yellow - visible and recognizable */
    transition: width 0.3s ease;
}

/* Slightly larger version for when more visibility is needed */
.watch-progress-bar.watch-progress-bar-lg {
    height: 6px;
}

/* Progress selector in modals - segmented button style */
.watch-progress-selector {
    display: flex;
    gap: 0;
    width: 100%;
}

.watch-progress-selector .watch-progress-option {
    flex: 1;
    padding: 8px 4px;
    border: 1px solid var(--mv-border-color);
    background: #fff;
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.watch-progress-selector .watch-progress-option:first-child {
    border-radius: 4px 0 0 4px;
}

.watch-progress-selector .watch-progress-option:last-child {
    border-radius: 0 4px 4px 0;
}

.watch-progress-selector .watch-progress-option:not(:first-child) {
    border-left: none;
}

.watch-progress-selector .watch-progress-option:hover {
    background: #f8f9fa;
    color: #495057;
}

.watch-progress-selector .watch-progress-option.active {
    background: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

/* Not Started option has different styling */
.watch-progress-selector .watch-progress-option[data-value="0"] {
    color: #6c757d;
}

.watch-progress-selector .watch-progress-option[data-value="0"].active {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

/* Small text label below progress bar (optional) */
.watch-progress-label {
    position: absolute;
    bottom: 6px;
    right: 4px;
    font-size: 0.65rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 6;
}

/* Status indicator badge style (for list views) */
.watch-progress-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 3px;
    background: #ffc107;
    color: #212529;
    font-size: 0.7rem;
    font-weight: 500;
}

.watch-progress-badge i {
    font-size: 0.65rem;
}

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

[data-bs-theme="dark"] .watch-progress-selector .watch-progress-option {
    border-color: var(--mv-border-color);
    background: var(--mv-bg-card);
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .watch-progress-selector .watch-progress-option:hover {
    background: var(--mv-bg-surface);
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .watch-progress-selector .watch-progress-option.active {
    background: #ffc107;
    border-color: #ffc107;
    color: #212529;
}
[data-bs-theme="dark"] .watch-progress-selector .watch-progress-option[data-value="0"].active {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}