/* ================================================ */
/* MATERIAL ICONS / NOTIFICATION STYLES                      */
/* ================================================ */

/* ────────────────────────────────────────────────────────────────── */
/* Tab Icons */
/* ────────────────────────────────────────────────────────────────── */

.nav-link .material-icons {
    font-size: 16px;
    vertical-align: middle;
}

/* ────────────────────────────────────────────────────────────────── */
/* Empty State Icons */
/* ────────────────────────────────────────────────────────────────── */

.empty-state-icon {
    font-size: 48px;
    opacity: 0.3;
}

/* ────────────────────────────────────────────────────────────────── */
/* Badge Styling */
/* ────────────────────────────────────────────────────────────────── */

.nav-link .badge {
    margin-left: 0.25rem;  /* ms-1 = margin-left: 0.25rem */
}

#navbar-score-badge {
    margin-left: 10px;
    font-size: 0.85rem;
    background-color: #51cbce;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: bold;
}

/* ────────────────────────────────────────────────────────────────── */
/* Icon styling */
/* ────────────────────────────────────────────────────────────────── */
.material-symbols-outlined {
    vertical-align: middle;
    font-size: 18px;
}