/**
 * Стандартные серые иконки
 * Используются вместо эмодзи для единообразного вида
 */

.icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    fill: #64748b;
    stroke: #64748b;
    color: #64748b;
    margin-right: 0.25em;
    flex-shrink: 0;
}

.icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
    color: currentColor;
}

.icon-sm {
    width: 14px;
    height: 14px;
}

.icon-lg {
    width: 20px;
    height: 20px;
}

.icon-white {
    fill: white;
    stroke: white;
    color: white;
}

.icon-primary {
    fill: #2563eb;
    stroke: #2563eb;
    color: #2563eb;
}

/* SVG иконки через data URI */
.icon-search svg,
.icon-search {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-sort svg,
.icon-sort {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-view svg,
.icon-view {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-add svg,
.icon-add {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-edit svg,
.icon-edit {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-delete svg,
.icon-delete {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-eye svg,
.icon-eye {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-save svg,
.icon-save {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-calendar svg,
.icon-calendar {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-github svg,
.icon-github {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-demo svg,
.icon-demo {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-preview svg,
.icon-preview {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-stats svg,
.icon-stats {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-warning svg,
.icon-warning {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-project svg,
.icon-project {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

/* Стили для иконок в разных контекстах */
.btn svg,
.btn .icon {
    flex-shrink: 0;
}

label svg,
label .icon {
    margin-right: 0.25em;
}

h3 svg,
h3 .icon,
h4 svg,
h4 .icon {
    margin-right: 0.5em;
}

/* Иконки в таблицах */
.table-actions svg {
    width: 14px;
    height: 14px;
}

/* Иконки в карточках */
.project-badge svg,
.project-badge .icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor !important;
    stroke: currentColor !important;
    color: currentColor !important;
}

.project-badge .icon {
    width: 16px;
    height: 16px;
    margin: 0;
    fill: currentColor !important;
    stroke: currentColor !important;
    color: currentColor !important;
}

/* Иконки в метаданных */
.project-date svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}