/*
 * Logistics UI Icons
 *
 * SVG는 currentColor를 사용하므로
 * 부모 요소의 color 값에 따라 Light/Dark Mode에 자동 대응한다.
 */

.ui-icon {
    display: inline-block;
    flex: 0 0 auto;

    vertical-align: middle;

    color: currentColor;

    pointer-events: none;
}

/* 사이드 메뉴 아이콘 */
.nav-item .ui-icon {
    width: 19px;
    height: 19px;

    color: var(--muted);

    transition:
        color 0.15s ease,
        transform 0.15s ease;
}

.nav-item:hover .ui-icon,
.nav-item.active .ui-icon {
    color: var(--primary);
}

.nav-item:hover .ui-icon {
    transform: translateX(1px);
}

/* 버튼 내부 아이콘 */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.btn-icon .ui-icon {
    width: 18px;
    height: 18px;
}

/* 아이콘 전용 버튼 */
.icon-button {
    width: 36px;
    height: 36px;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: var(--surface);
    color: var(--muted);

    display: inline-grid;
    place-items: center;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.icon-button:hover {
    background: var(--surface-sub);
    color: var(--text);
    border-color: var(--primary);
}

/* 상태별 아이콘 */
.icon-success {
    color: var(--success);
}

.icon-warning {
    color: var(--warning);
}

.icon-danger {
    color: var(--danger);
}

.icon-info {
    color: var(--info);
}

/* 타이틀 앞 아이콘 */
.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title .ui-icon {
    color: var(--primary);
}

/* 다크모드에서도 별도 이미지 파일 없이 색상 자동 대응 */
[data-theme="dark"] .ui-icon {
    filter: none;
}