/*BADGE STATUS - TURNOVER*/

.badge-table {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    white-space: nowrap;
    padding: 0.45rem 0.75rem;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: normal;
}

.badge-not-assigned {
    background-color: var(--badge-not-assigned-bg);
    color: var(--badge-not-assigned-color);
}

.badge-pending {
    background-color: var(--badge-pending-bg);
    color: var(--badge-pending-color);
}

.badge-assigned {
    background-color: var(--badge-assigned-bg);
    color: var(--badge-assigned-color);
}

.badge-in-progress {
    background-color: var(--badge-in-progress-bg);
    color: var(--badge-in-progress-color);
}

.badge-completed {
    background-color: var(--badge-completed-bg);
    color: var(--badge-completed-color);
    font-weight: 600;
}


/* Badge  */
.badge.badge-not-assigned {
    background-color: var(--badge-not-assigned-bg);
    color: var(--badge-not-assigned-color);
}

.badge.badge-pending {
    background-color: var(--badge-pending-bg);
    color: var(--badge-pending-color);
}

.badge.badge-assigned {
    background-color: var(--badge-assigned-bg);
    color: var(--badge-assigned-color);
}

.badge.badge-in-progress {
    background-color: var(--badge-in-progress-bg);
    color: var(--badge-in-progress-color);
}

.badge.badge-completed {
    background-color: var(--badge-completed-bg);
    color: var(--badge-completed-color);
}


/*--------------------------ATTIVO / DISATTIVO-----------------------------*/

.status-badge {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border-subtle);
}

/* DOT */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* ACTIVE */
.status-badge.active {
    color: var(--badge-completed-color);
}

    .status-badge.active .status-dot {
        background-color: var(--badge-completed-color);
    }

/* INACTIVE (opzionale se vuoi uniformarlo) */
.status-badge.inactive {
    color: var(--badge-not-assigned-color);
}

    .status-badge.inactive .status-dot {
        background-color: var(--badge-not-assigned-color);
    }


/*--------------------------BADGE COLORS-----------------------------*/
/*Ottimo da usare con: badge-table oppure bage (bootstrap)*/
/*E' possibile usare le classi custom css sia facendo: (badge badge-yellow, bootstrap) e (badge-table badge-yellow*/


/*Yellow*/
.badge-yellow {
    background-color: var(--badge-yellow-bg);
    color: var(--badge-yellow-color);
}

.badge.badge-yellow {
    --bs-badge-color: var(--badge-yellow-color);
}


/*Blue*/
.badge-blue {
    background-color: var(--badge-blue-bg);
    color: var(--badge-blue-color);
}
.badge.badge-blue {
    --bs-badge-color: var(--badge-blue-color);
}


/*Light grey*/
.badge-light-grey {
    background-color: var(--badge-light-grey-bg);
    color: var(--badge-light-grey-color);
}
.badge.badge-light-grey {
    --bs-badge-color: var(--badge-light-grey-color);
}

/*Cian*/
.badge-cyan {
    background-color: var(--badge-cyan-bg);
    color: var(--badge-cyan-color);
}
.badge.badge-cyan {
    --bs-badge-color: var(--badge-cyan-color);
}

/*Purple*/
.badge-purple {
    background-color: var(--badge-purple-bg);
    color: var(--badge-purple-color);
}
.badge.badge-purple {
    --bs-badge-color: var(--badge-purple-color);
}

/*Grigio*/
.badge-grey {
    background-color: var(--badge-grey-bg);
    color: var(--badge-grey-color);
}
.badge.badge-grey {
    --bs-badge-color: var(--badge-grey-color);
}

/*Verde*/
.badge-green {
    background-color: var(--badge-green-bg);
    color: var(--badge-green-color);
}

.badge.badge-green {
    --bs-badge-color: var(--badge-green-color);
}

/*Violet*/
.badge-violet {
    background-color: var(--badge-violet-bg);
    color: var(--badge-violet-color);
}

.badge.badge-violet {
    --bs-badge-color: var(--badge-violet-color);
}