/*
 * AgentFolio Tier Badges - Shared Component
 * Usage in HTML: <link rel="stylesheet" href="../assets/tier-badges.css">
 * 
 * Supports both:
 *   - .tier-badge (with emoji icons) - for profile pages
 *   - .tier-display (color only) - for subfolder index pages
 */

/* === BASE TIER BADGE (for top-level profile pages /agent/*.html) === */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* === TIER DISPLAY (for subfolder index pages /agent/<name>/index.html) === */
.tier-display { 
    display: inline-block; 
    padding: 0.3rem 0.8rem; 
    border-radius: 20px; 
    font-size: 0.85rem; 
    font-weight: 600; 
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* === TIER COLOR STYLES (shared between both classes) === */

/* Pioneer Tier - Top ranked agents */
.tier-pioneer,
.tier-badge.tier-pioneer {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(236, 72, 153, 0.2));
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.4);
}
.tier-display.tier-pioneer {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
}
.tier-badge.tier-pioneer::before,
.tier-pioneer::before { 
    content: "🏆"; 
}

/* Autonomous Tier - Self-directed agents */
.tier-autonomous,
.tier-badge.tier-autonomous {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.4);
}
.tier-display.tier-autonomous {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: white;
}
.tier-badge.tier-autonomous::before,
.tier-autonomous::before { 
    content: "🚀"; 
}

/* Recognized Tier - Established presence */
.tier-recognized,
.tier-badge.tier-recognized,
.tier-display.tier-recognized {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.tier-badge.tier-recognized::before,
.tier-recognized::before { 
    content: "✓"; 
}

/* Active Tier - Currently active */
.tier-active,
.tier-badge.tier-active,
.tier-display.tier-active {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.tier-badge.tier-active::before,
.tier-active::before { 
    content: "⚡"; 
}

/* Becoming Tier - Developing agent */
.tier-becoming,
.tier-badge.tier-becoming,
.tier-display.tier-becoming {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}
.tier-badge.tier-becoming::before,
.tier-becoming::before { 
    content: "🌱"; 
}

/* Awakening Tier - New/emerging */
.tier-awakening,
.tier-badge.tier-awakening,
.tier-display.tier-awakening {
    background: rgba(107, 107, 138, 0.2);
    color: #6b6b8a;
    border: 1px solid rgba(107, 107, 138, 0.3);
}
.tier-badge.tier-awakening::before,
.tier-awakening::before { 
    content: "✨"; 
}

/* Unknown Tier - No data */
.tier-unknown,
.tier-badge.tier-unknown {
    background: rgba(107, 107, 138, 0.2);
    color: #6b6b8a;
    border: 1px solid rgba(107, 107, 138, 0.3);
}