/* Feather Icons Implementation */

/* Base Feather Icon Styles */
.feather {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Icon Sizes */
.feather-sm {
    width: 16px;
    height: 16px;
}

.feather-lg {
    width: 32px;
    height: 32px;
}

.feather-xl {
    width: 48px;
    height: 48px;
}

/* Icon Colors */
.feather-primary {
    color: #667eea;
}

.feather-success {
    color: #10b981;
}

.feather-danger {
    color: #ef4444;
}

.feather-warning {
    color: #f59e0b;
}

.feather-muted {
    color: #6b7280;
}

/* Icon Animations */
.feather-hover:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.feather-spin {
    animation: feather-spin 1s linear infinite;
}

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

/* Button Icons */
.btn .feather {
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
}

.btn-sm .feather {
    width: 14px;
    height: 14px;
    margin-right: 0.25rem;
}

.btn-lg .feather {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
}

/* Navigation Icons */
.navbar .feather {
    width: 20px;
    height: 20px;
}

/* Card Icons */
.card .feather {
    width: 24px;
    height: 24px;
}

/* Form Icons */
.form-control-icon {
    position: relative;
}

.form-control-icon .feather {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #6b7280;
}

/* List Icons */
.list-group-item .feather {
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
}

/* Modal Icons */
.modal .feather {
    width: 20px;
    height: 20px;
}

/* Responsive Icons */
@media (max-width: 768px) {
    .feather {
        width: 20px;
        height: 20px;
    }
    
    .feather-sm {
        width: 14px;
        height: 14px;
    }
    
    .feather-lg {
        width: 28px;
        height: 28px;
    }
}

/* Icon Loading States */
.feather-loading {
    opacity: 0.5;
    animation: feather-pulse 1.5s ease-in-out infinite;
}

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