/* ============================================================
   BASE BADGE STYLE
============================================================ */
.badge-pill {
    display: inline-block;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50px;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
}

/* ============================================================
   CALL STATUS COLORS
============================================================ */

/* Green */
.badge-pill.tag-will-deposit,
.badge-pill.tag-interested,
.badge-pill.tag-deposit-done,
.badge-pill.tag-deposit,
.badge-pill.tag-vip,
.badge-pill.tag-registered {
    background-color: #28a745; /* green */
}

/* Red */
.badge-pill.tag-technical-error,
.badge-pill.tag-call-terminated,
.badge-pill.tag-switch-off,
.badge-pill.tag-not-picked-1,
.badge-pill.tag-not-picked-2,
.badge-pill.tag-not-picked-3,
.badge-pill.tag-invalid-number,
.badge-pill.tag-not-interested-to-bonus,
.badge-pill.tag-not-interested-to-website {
    background-color: #dc3545; /* red */
}

/* Yellow */
.badge-pill.tag-havent-call,
.badge-pill.tag-call-later {
    background-color: #ffc107; /* yellow */
    color: #212529; /* dark text for contrast */
}

/* ============================================================
   TAG COLORS
============================================================ */

/* Green */
.badge-pill.tag-vip {
    background-color: #28a745; /* green  */
}

/* Red */
.badge-pill.tag-remove,
.badge-pill.tag-hot {
    background-color: #dc3545; /* red */
}

/* Orange */
.badge-pill.tag-bonus-hunter {
    background-color: #fd7e14; /* orange */
}

/* Yellow */
.badge-pill.tag-30percent-retention-bonus,
.badge-pill.tag-50percent-retention-bonus,
.badge-pill.tag-30percent-50percent-retention-bonus {
    background-color: #ffc107;
    color: #212529; /* dark text for contrast */
}

/* Blue */
.badge-pill.tag-short-listed {
    background-color: #007bff; /* blue */
}

/* Purple */
.badge-pill.tag-outsource,
.badge-pill.tag-50k-batch-1 {
    background-color: #6f42c1; /* purple */
}

/* ============================================================
   DEFAULT / FALLBACK
============================================================ */
.badge-pill.badge-secondary {
    background-color: #999; /* fallback gray */
    color: inherit;
}

/* ============================================================
   Hover Effect
============================================================ */
.badge-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

/* ============================================================
   Responsive Adjustments
============================================================ */
@media (max-width: 768px) {
    .badge-pill {
        font-size: 11px;
        padding: 3px 8px;
    }
}