/*
 * OptionsPlay Shared Progress Bar & Indicator Components
 * Source: Design System Spec Sections 4.8, 4.9
 * Replaces duplicated progress/ranking/liquidity styles
 */

/* ===== GENERIC PROGRESS BAR ===== */
.op-progress-bar {
    position: relative;
    height: 6px;
    background: var(--op-neutral-200);
    border-radius: 3px;
    overflow: hidden;
}

.op-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.op-progress-fill.iv-rank {
    background: linear-gradient(90deg, var(--op-brand-blue-700), var(--op-brand-blue-500));
}

.op-progress-fill.technical {
    background: linear-gradient(90deg, var(--op-warning-600), var(--op-warning-400));
}

/* ===== IV RANK BAR (Compact — used in card views) ===== */
/* Shared across CoveredCallCard, ShortPutCard, CreditSpreadCard */
.op-iv-rank-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.op-iv-bar {
    flex: 1;
    height: 4px;
    background: var(--op-border-default);
    border-radius: 2px;
    overflow: hidden;
    max-width: 60px;
}

.op-iv-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--op-error-500) 0%, var(--op-warning-500) 50%, var(--op-success-500) 100%);
    transition: width 0.3s;
}

/* ===== RANKING BAR (Used in TechnicalAnalysis) ===== */
.op-ranking-bar {
    flex: 1;
    height: 6px;
    background: var(--op-border-default);
    border-radius: 3px;
    overflow: hidden;
}

.op-ranking-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.op-ranking-fill.technical {
    background: linear-gradient(90deg, var(--op-brand-blue-400), var(--op-brand-blue-600));
}

.op-ranking-fill.iv-rank {
    background: linear-gradient(90deg, var(--op-info-500), var(--op-info-600));
}

.op-ranking-fill.blue {
    background: linear-gradient(90deg, var(--op-brand-blue-400) 0%, var(--op-brand-blue-600) 100%);
}

.op-ranking-fill.purple {
    background: linear-gradient(90deg, var(--op-info-400) 0%, var(--op-info-600) 100%);
}

/* ===== LIQUIDITY INDICATOR ===== */
/* Shared across TechnicalAnalysis, TradeIdeaCard, EarningsCalendar */
.op-liquidity-indicator {
    display: inline-flex;
    gap: 2px;
}

.op-liquidity-bar {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--op-neutral-200);
    transition: all 0.3s;
}

.op-liquidity-bar.filled {
    background: var(--op-error-500);
}

.op-liquidity-bar.filled.medium {
    background: var(--op-warning-400);
}

.op-liquidity-bar.filled.high {
    background: var(--op-success-500);
}

/* Color-specific fills for the 3-bar system */
.op-liquidity-bar.filled.red {
    background: linear-gradient(180deg, var(--op-error-500), var(--op-error-600));
}

.op-liquidity-bar.filled.yellow {
    background: linear-gradient(180deg, var(--op-warning-400), var(--op-warning-500));
}

.op-liquidity-bar.filled.green {
    background: linear-gradient(180deg, var(--op-success-500), var(--op-success-600));
}