/* Classi CSS personalizzate per colorare i tab attivi e hover usando variabili Bootstrap */
.nav-link.nav-primary.active {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.nav-link.nav-primary:not(.active):hover {
    color: var(--primary);
}

.nav-link.nav-secondary.active {
    background-color: var(--secondary);
    color: var(--white);
    border-color: var(--secondary);
}

.nav-link.nav-secondary:not(.active):hover {
    color: var(--secondary);
}

.nav-link.nav-success.active {
    background-color: var(--success);
    color: var(--white);
    border-color: var(--success);
}

.nav-link.nav-success:not(.active):hover {
    color: var(--success);
}

.nav-link.nav-danger.active {
    background-color: var(--danger);
    color: var(--white);
    border-color: var(--danger);
}

.nav-link.nav-danger:not(.active):hover {
    color: var(--danger);
}

.nav-link.nav-warning.active {
    background-color: var(--warning);
    color: var(--dark);
    border-color: var(--warning);
}

.nav-link.nav-warning:not(.active):hover {
    color: var(--warning);
}

.nav-link.nav-info.active {
    background-color: var(--info);
    color: var(--white);
    border-color: var(--info);
}

.nav-link.nav-info:not(.active):hover {
    color: var(--info);
}

.nav-link.nav-light.active {
    background-color: var(--light);
    color: var(--dark);
    border-color: var(--light);
}

.nav-link.nav-light:not(.active):hover {
    color: var(--light);
}

.nav-link.nav-dark.active {
    background-color: var(--dark);
    color: var(--white);
    border-color: var(--dark);
}

.nav-link.nav-dark:not(.active):hover {
    color: var(--dark);
}