/* ═══════════════════════════════════════════
   OCR BADGES - Color-coded confidence indicators
═══════════════════════════════════════════ */

/* Base badge styles are in ocr.css */

/* Danger badge - Red for low confidence (<40%) */
.badge-danger {
    background: rgba(255, 50, 50, 0.15);
    color: #ff5555;
    border-color: rgba(255, 50, 50, 0.3);
}

/* Warning badge - Yellow for medium confidence (40-60%) */
.badge-warning {
    background: rgba(255, 200, 0, 0.15);
    color: #ffc800;
    border-color: rgba(255, 200, 0, 0.3);
}

/* Success badge - Green for high confidence (>60%) */
.badge-success {
    background: rgba(0, 255, 100, 0.15);
    color: #00ff88;
    border-color: rgba(0, 255, 100, 0.3);
}

/* Info badge - Cyan for general info */
.badge-info {
    background: rgba(0, 255, 255, 0.1);
    color: var(--cyan);
    border-color: rgba(0, 255, 255, 0.2);
}

/* Primary badge - Blue for JSON format */
.badge-primary {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    border-color: rgba(139, 92, 246, 0.3);
}

/* Secondary badge - Gray for text format */
.badge-secondary {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    border-color: rgba(100, 116, 139, 0.3);
}

/* Active badge - Primary accent color */
.badge-active {
    background: rgba(0, 120, 200, 0.15);
    color: var(--accent-primary);
    border-color: rgba(0, 120, 200, 0.3);
}