/* ============================================
   СИСТЕМА ИКОНОК - SVG SPRITE
   ============================================ */

/* Базовые стили для иконок */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    line-height: 1;
    fill: currentColor;
    stroke: currentColor;
    flex-shrink: 0;
}

.icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.icon-lg {
    width: 1.25em;
    height: 1.25em;
}

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

/* SVG спрайт с иконками */
.icon-sprite {
    display: none;
}

/* Иконки через data-атрибуты */
[data-icon] {
    position: relative;
}

[data-icon]::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-right: 0.5em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Иконки через классы (Font Awesome альтернатива) */
.icon-home::before,
.icon-user::before,
.icon-sword::before,
.icon-trophy::before,
.icon-phone::before,
.icon-lock::before,
.icon-edit::before,
.icon-chart::before,
.icon-medal::before,
.icon-calendar::before,
.icon-check::before,
.icon-warning::before,
.icon-error::before,
.icon-red::before {
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
}

.icon-home::before {
    content: '🏠';
    font-size: 1em;
}

.icon-user::before {
    content: '👤';
    font-size: 1em;
}

.icon-sword::before {
    content: '⚔️';
    font-size: 1em;
}

.icon-trophy::before {
    content: '🏆';
    font-size: 1em;
}

.icon-phone::before {
    content: '📱';
    font-size: 1em;
}

.icon-lock::before {
    content: '🔐';
    font-size: 1em;
}

.icon-edit::before {
    content: '📝';
    font-size: 1em;
}

.icon-chart::before {
    content: '📈';
    font-size: 1em;
}

.icon-medal::before {
    content: '🎖️';
    font-size: 1em;
}

.icon-calendar::before {
    content: '📅';
    font-size: 1em;
}

.icon-check::before {
    content: '✅';
    font-size: 1em;
}

.icon-warning::before {
    content: '⚠️';
    font-size: 1em;
}

.icon-error::before {
    content: '❌';
    font-size: 1em;
}

.icon-red::before {
    content: '🔴';
    font-size: 1em;
}

/* SVG иконки (будущее улучшение) */
.icon-svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}