/* 
 * NeoSchool Custom Icons Stylesheet
 * Styles pour les icônes SVG personnalisées
 */

/* Classes de base pour les icônes */
.neoschool-icon {
    display: inline-block;
    vertical-align: middle;
    transition: all 0.3s ease;
}

/* Tailles des icônes */
.icon-xs {
    width: 16px;
    height: 16px;
}

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

.icon-md {
    width: 24px;
    height: 24px;
}

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

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

.icon-2xl {
    width: 64px;
    height: 64px;
}

.icon-3xl {
    width: 96px;
    height: 96px;
}

/* Effets hover */
.icon-hover:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.icon-hover-rotate:hover {
    transform: rotate(10deg) scale(1.1);
}

.icon-hover-bounce:hover {
    animation: iconBounce 0.5s ease;
}

/* Animations */
@keyframes iconBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.icon-pulse {
    animation: iconPulse 2s infinite;
}

.icon-spin {
    animation: iconSpin 2s linear infinite;
}

@keyframes iconSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Filtres de couleur pour les icônes SVG */
.icon-primary {
    filter: invert(32%) sepia(98%) saturate(2283%) hue-rotate(226deg) brightness(92%) contrast(92%);
}

.icon-secondary {
    filter: invert(51%) sepia(14%) saturate(429%) hue-rotate(180deg) brightness(94%) contrast(88%);
}

.icon-success {
    filter: invert(56%) sepia(89%) saturate(432%) hue-rotate(82deg) brightness(95%) contrast(93%);
}

.icon-danger {
    filter: invert(31%) sepia(93%) saturate(3470%) hue-rotate(347deg) brightness(93%) contrast(93%);
}

.icon-warning {
    filter: invert(71%) sepia(91%) saturate(1262%) hue-rotate(359deg) brightness(101%) contrast(103%);
}

.icon-info {
    filter: invert(61%) sepia(96%) saturate(1944%) hue-rotate(178deg) brightness(98%) contrast(101%);
}

/* Icône avec fond blanc - garde les couleurs originales du SVG */
.icon-white {
    filter: none;
    background: white;
    padding: 8px;
    border-radius: 8px;
}

.icon-gray {
    filter: grayscale(100%);
}

/* Variante avec fond blanc et ombre */
.icon-bg-white {
    background: white;
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Styles pour les cartes avec icônes */
.icon-card {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.icon-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.icon-card .neoschool-icon {
    margin-right: 1rem;
}

/* Icônes dans les boutons */
.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-with-icon .neoschool-icon {
    width: 20px;
    height: 20px;
}

/* Icônes dans les badges */
.badge-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.badge-with-icon .neoschool-icon {
    width: 16px;
    height: 16px;
}

/* Icônes dans le menu */
.menu-item-icon {
    width: 24px;
    height: 24px;
    margin-right: 0.75rem;
    transition: all 0.3s ease;
}

.menu-item:hover .menu-item-icon {
    transform: scale(1.1);
}

/* Icônes dans les statistiques */
.stat-icon {
    width: 48px;
    height: 48px;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon img {
    filter: brightness(0) invert(1);
}

/* Responsive */
@media (max-width: 768px) {
    .icon-lg {
        width: 28px;
        height: 28px;
    }

    .icon-xl {
        width: 40px;
        height: 40px;
    }

    .icon-2xl {
        width: 56px;
        height: 56px;
    }
}

/* Accessibilité */
.neoschool-icon[alt]:not([alt=""]) {
    cursor: help;
}

/* Print styles */
@media print {
    .neoschool-icon {
        filter: grayscale(100%);
    }
}