/*
 * OptionsPlay Shared Badge Components
 * Source: Design System Spec Section 4.4
 *
 * Unified badge system with three sizes:
 *   .op-badge-sm  — grid cells, compact inline tags
 *   (default/md)  — card headers, standalone labels
 *   .op-badge-lg  — hero/headline badges (pill shape)
 *
 * Color is always light-bg + dark-text, same across all sizes.
 */

/* ===== BASE BADGE ===== */
/* All badge class names share this base so styling is consistent everywhere. */
.op-badge,
.strategy-badge,
.sentiment-badge,
.type-badge,
.region-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--op-radius-sm);
    font-size: var(--op-text-sm);
    font-weight: var(--op-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1.2;
}

/* ===== SIZE: EXTRA SMALL ===== */
/* Card headers, compact badge rows — does not overwhelm adjacent text */
.op-badge-xs {
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 3px;
}

/* ===== SIZE: SMALL ===== */
/* Grid cells, inline tags within data rows */
.op-badge-sm {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    border-radius: 3px;
}

/* ===== SIZE: LARGE ===== */
/* Hero / headline badges (e.g. TechnicalAnalysis sentiment pill) */
.op-badge-lg {
    padding: 0.375rem 0.75rem;
    font-size: var(--op-text-sm);
    border-radius: var(--op-radius-full);
}

/* ===== SENTIMENT / STRATEGY COLORS (Bullish/Bearish) ===== */
/* Same light-bg + dark-text at every size */
.op-badge-bullish,
.strategy-badge.bullish,
.strategy-bullish,
.sentiment-bullish {
    background: var(--op-success-100);
    color: var(--op-success-800);
}

.op-badge-bearish,
.strategy-badge.bearish,
.strategy-bearish,
.sentiment-bearish {
    background: var(--op-error-100);
    color: var(--op-error-800);
}

.op-badge-neutral,
.sentiment-neutral {
    background: var(--op-neutral-100);
    color: var(--op-neutral-700);
}

/* ===== OPTION TYPE COLORS (Call/Put) ===== */
/* Per spec Section 3.2: Call = #dbeafe/#1e40af, Put = #fed7aa/#9a3412 */
.op-badge-call,
.type-badge.call {
    background: var(--op-call-bg);
    color: var(--op-call-text);
}

.op-badge-put,
.type-badge.put {
    background: var(--op-put-bg);
    color: var(--op-put-text);
}

/* ===== MARKET TIMING BADGES (Before/After Market) ===== */
.op-badge-before {
    background: var(--op-info-100);
    color: var(--op-info-700);
}

.op-badge-after {
    background: var(--op-warning-100);
    color: var(--op-warning-700);
}

/* ===== REGION BADGE ===== */
/* Neutral info tag (e.g. "US" next to symbol) */
.region-badge {
    background: var(--op-neutral-200);
    color: var(--op-neutral-600);
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    border-radius: 2px;
}

/* ===== PERFORMANCE COLOR CLASSES ===== */
/* Used in grid cells with background coloring (CreditSpreadWidget, CoveredCallWidget, ShortPutWidget).
 * Radzen Fluent theme overrides text color on selected/hovered rows via:
 *   .rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data { color: ... }
 * The .op-badge.pw-* compound selector wins that specificity battle. */
.pw-excellent, .op-badge.pw-excellent {
    background: var(--op-perf-excellent);
    color: var(--op-neutral-0);
}

.pw-very-good, .op-badge.pw-very-good {
    background: var(--op-perf-very-good);
    color: var(--op-success-800);
}

.pw-good, .op-badge.pw-good {
    background: var(--op-perf-good);
    color: var(--op-success-900);
}

.pw-average, .op-badge.pw-average {
    background: var(--op-perf-average);
    color: var(--op-warning-900);
}

.pw-below-avg, .op-badge.pw-below-avg {
    background: var(--op-perf-below-avg);
    color: var(--op-warning-800);
}

.pw-poor, .op-badge.pw-poor {
    background: var(--op-perf-poor);
    color: var(--op-error-900);
}

.pw-very-poor, .op-badge.pw-very-poor {
    background: var(--op-perf-very-poor);
    color: var(--op-neutral-0);
}

/* ===== IV RANK COLOR CLASSES ===== */
/* Used in grid cells with background coloring */
.iv-best, .op-badge.iv-best {
    background: var(--op-perf-excellent);
    color: var(--op-neutral-0);
}

.iv-excellent, .op-badge.iv-excellent {
    background: var(--op-perf-very-good);
    color: var(--op-success-800);
}

.iv-good, .op-badge.iv-good {
    background: var(--op-perf-good);
    color: var(--op-success-900);
}

.iv-average, .op-badge.iv-average {
    background: var(--op-perf-average);
    color: var(--op-warning-900);
}

.iv-below-avg, .op-badge.iv-below-avg {
    background: var(--op-perf-below-avg);
    color: var(--op-warning-800);
}

.iv-poor, .op-badge.iv-poor {
    background: var(--op-perf-poor);
    color: var(--op-error-900);
}

.iv-worst, .op-badge.iv-worst {
    background: var(--op-perf-very-poor);
    color: var(--op-neutral-0);
}

/* ===== PERFORMANCE TEXT-ONLY VARIANTS ===== */
/* Used in card views where only text color changes (distance-to-strike, premium percentage) */
.pw-text-excellent { color: var(--op-perf-excellent); }
.pw-text-very-good { color: var(--op-perf-very-good); }
.pw-text-good { color: var(--op-perf-good); }
.pw-text-average { color: var(--op-perf-average); }
.pw-text-below-avg { color: var(--op-perf-below-avg); }
.pw-text-poor { color: var(--op-perf-poor); }
.pw-text-very-poor { color: var(--op-perf-very-poor); }

/* ===== IV RANK TEXT-ONLY VARIANTS ===== */
.iv-text-best { color: var(--op-perf-excellent); }
.iv-text-excellent { color: var(--op-perf-very-good); }
.iv-text-good { color: var(--op-perf-good); }
.iv-text-average { color: var(--op-perf-average); }
.iv-text-below-avg { color: var(--op-perf-below-avg); }
.iv-text-poor { color: var(--op-perf-poor); }
.iv-text-worst { color: var(--op-perf-very-poor); }