/* Basic icon system using the sprite in icons.svg */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.icon svg {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
}

.icon-lg svg {
    width: 1.5em;
    height: 1.5em;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
}

.icon-btn:active {
    transform: scale(.94);
}

/* Utility colors (adjust to your design system) */
.icon-success {
    color: #2e7d32;
}

.icon-danger {
    color: #c62828;
}

.icon-warning {
    color: #ed6c02;
}

.icon-info {
    color: #0277bd;
}

/* Rotation helpers */
.icon-rotate-90 {
    transform: rotate(90deg);
}

.icon-rotate-180 {
    transform: rotate(180deg);
}

.icon-rotate-270 {
    transform: rotate(270deg);
}