/**
 * Sortex Icon System
 * Consistent SVG icons across the application
 * Using Lucide-style line icons for professional look
 */

/* Base icon styles */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

.icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icon sizes */
.icon-xs { font-size: 0.75rem; }
.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.5rem; }
.icon-xl { font-size: 2rem; }
.icon-2xl { font-size: 2.5rem; }

/* Icon colors */
.icon-primary { color: var(--neon-primary, #00e5ff); }
.icon-secondary { color: var(--neon-secondary, #7c3aed); }
.icon-success { color: var(--neon-success, #10b981); }
.icon-warning { color: var(--neon-warning, #f59e0b); }
.icon-danger { color: #ef4444; }
.icon-muted { color: var(--text-muted, rgba(255, 255, 255, 0.6)); }

/* Filled variants for status indicators */
.icon-filled svg {
    fill: currentColor;
    stroke: none;
}

/* Badge-style icon containers */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
}

.icon-badge.icon-badge-primary {
    background: rgba(0, 229, 255, 0.1);
    color: var(--neon-primary);
}

.icon-badge.icon-badge-secondary {
    background: rgba(124, 58, 237, 0.1);
    color: var(--neon-secondary);
}

.icon-badge.icon-badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--neon-success);
}

.icon-badge.icon-badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--neon-warning);
}

.icon-badge.icon-badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Animation for loading/refresh icons */
.icon-spin svg {
    animation: icon-spin 1s linear infinite;
}

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

/* Pulse animation for alerts */
.icon-pulse {
    animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}