/* =============================================
   BADGES.CSS — Tech Tags & Status Badges
   ============================================= */

/* --- TECH TAG --- */
.tech-tag {
    display: inline-block;
    font-size: 0.72rem;
    background: rgba(20, 48, 158, 0.06);
    border: 1px solid rgba(20, 48, 158, 0.14);
    color: #14309E;
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.tech-tag:hover {
    background: rgba(20, 48, 158, 0.12);
    border-color: rgba(20, 48, 158, 0.25);
}

/* --- STATUS BADGE --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 9999px;
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Completed */
.status-badge.completed {
    color: #047857;
    background: var(--success-bg);
}

.status-badge.completed::before {
    background-color: var(--success);
}

/* In Progress */
.status-badge.progress {
    color: #b45309;
    background: var(--warning-bg);
}

.status-badge.progress::before {
    background-color: var(--warning);
}

/* Planned */
.status-badge.planned {
    color: #1d4ed8;
    background: var(--info-bg);
}

.status-badge.planned::before {
    background-color: var(--info);
}