.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

.icon-sm { font-size: 0.875em; }
.icon-lg { font-size: 1.25em; }
.icon-2x { font-size: 2em; }

.btn .icon {
    margin-right: 0.5em;
}

.nav-item .icon {
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.5em;
}

.stat-icon .icon {
    width: 1.5em;
    height: 1.5em;
}

.action-btn .icon {
    width: 1em;
    height: 1em;
}

.login-icon .icon {
    width: 2em;
    height: 2em;
}

.sidebar-logo-icon .icon {
    width: 1.25em;
    height: 1.25em;
}

.user-avatar .icon {
    width: 1em;
    height: 1em;
}

.modal-close .icon {
    width: 1em;
    height: 1em;
}

.toast .icon {
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.5em;
}

.empty-state .icon {
    width: 3em;
    height: 3em;
    display: block;
    margin: 0 auto 1rem;
    opacity: 0.3;
}

.icon-spin {
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}