/* Styles améliorés pour les icônes - Interface chaleureuse et douce */

/* Base pour toutes les icônes SVG */
.icon img,
.icon svg {
    opacity: 0.7;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1.1) saturate(0.8);
}

/* Icônes dans les cartes KPI - Couleurs douces et contextuelles */
.kpi-icon .icon img,
.kpi-icon .icon svg {
    opacity: 0.75;
    filter: brightness(1.2) saturate(0.7);
}

.kpi-card .kpi-icon {
    opacity: 0.9;
}

.kpi-card.urgent .kpi-icon .icon img {
    filter: brightness(1.1) saturate(0.6) hue-rotate(-10deg);
    opacity: 0.8;
}

.kpi-card.success .kpi-icon .icon img {
    filter: brightness(1.15) saturate(0.7) hue-rotate(15deg);
    opacity: 0.8;
}

/* Icônes dans les actions rapides */
.action-icon .icon img,
.action-icon .icon svg {
    opacity: 0.7;
    filter: brightness(1.15) saturate(0.75);
}

.quick-action-card:hover .action-icon .icon img {
    opacity: 0.9;
    transform: scale(1.05);
    filter: brightness(1.2) saturate(0.85);
}

/* Icônes dans les modules */
.module-icon .icon img,
.module-icon .icon svg {
    opacity: 0.75;
    filter: brightness(1.1) saturate(0.7);
}

.module-card:hover .module-icon .icon img {
    opacity: 0.9;
    transform: scale(1.08);
    filter: brightness(1.2) saturate(0.8);
}

/* Icônes dans les titres de section */
.section-title .icon img,
.section-title .icon svg {
    opacity: 0.65;
    filter: brightness(1.1) saturate(0.6);
}

/* Icônes dans les cartes de documents */
.document-icon .icon img,
.document-icon .icon svg {
    opacity: 0.7;
    filter: brightness(1.1) saturate(0.7);
}

.document-card:hover .document-icon .icon img {
    opacity: 0.85;
    transform: scale(1.05);
}

/* Icônes dans les tâches */
.task-item .icon img,
.task-item .icon svg {
    opacity: 0.7;
    filter: brightness(1.1) saturate(0.7);
}

.task-item:hover .icon img {
    opacity: 0.85;
}

/* Icônes dans la navigation */
.nav-link .icon img,
.nav-link .icon svg {
    opacity: 0.7;
    filter: brightness(1.1) saturate(0.6);
}

.nav-link:hover .icon img {
    opacity: 0.9;
    filter: brightness(1.2) saturate(0.75);
}

/* Icônes dans les badges */
.module-badge .icon img,
.module-badge .icon svg {
    opacity: 0.8;
    filter: brightness(1.15) saturate(0.8);
}

/* Icônes dans les boutons */
.btn .icon img,
.btn .icon svg {
    opacity: 0.85;
    filter: brightness(1.1) saturate(0.75);
}

.btn:hover .icon img {
    opacity: 1;
    filter: brightness(1.2) saturate(0.9);
}

/* Icônes dans les métadonnées */
.meta-item .icon img,
.meta-item .icon svg {
    opacity: 0.6;
    filter: brightness(1.1) saturate(0.6);
}

/* Icônes dans les filtres */
.module-chip .icon img,
.client-chip .icon img {
    opacity: 0.75;
    filter: brightness(1.1) saturate(0.7);
}

.module-chip.active .icon img,
.client-chip.active .icon img {
    opacity: 0.95;
    filter: brightness(1.3) saturate(0.9);
}

/* Icônes dans les menus dropdown */
.dropdown-action .icon img,
.user-menu-item .icon img,
.user-menu-item svg {
    opacity: 0.7;
    filter: brightness(1.1) saturate(0.7);
}

.dropdown-action:hover .icon img,
.user-menu-item:hover .icon img,
.user-menu-item:hover svg {
    opacity: 0.9;
    filter: brightness(1.2) saturate(0.85);
}

/* Icônes dans les formulaires */
.form-group .icon img,
.form-group .icon svg {
    opacity: 0.65;
    filter: brightness(1.1) saturate(0.6);
}

/* Icônes dans les statistiques */
.stat-card .icon img,
.stat-card .icon svg {
    opacity: 0.7;
    filter: brightness(1.1) saturate(0.7);
}

.stat-card:hover .icon img {
    opacity: 0.85;
    transform: scale(1.05);
}

/* Icônes dans les badges de statut */
.status-badge .icon img,
.priority-badge .icon img {
    opacity: 0.8;
    filter: brightness(1.15) saturate(0.8);
}

/* Icônes dans les actions */
.btn-icon .icon img,
.btn-icon .icon svg {
    opacity: 0.7;
    filter: brightness(1.1) saturate(0.7);
}

.btn-icon:hover .icon img {
    opacity: 0.9;
    filter: brightness(1.2) saturate(0.85);
}

/* Icônes dans les liens */
.btn-link .icon img,
.btn-link .icon svg {
    opacity: 0.7;
    filter: brightness(1.1) saturate(0.7);
}

.btn-link:hover .icon img {
    opacity: 0.9;
    transform: translateX(2px);
    filter: brightness(1.2) saturate(0.85);
}

/* Icônes dans les recherches */
.search-icon {
    opacity: 0.6;
    filter: brightness(1.1) saturate(0.6);
}

.search-input:focus ~ .search-icon,
.search-input:focus + .search-icon {
    opacity: 0.8;
    filter: brightness(1.2) saturate(0.75);
}

/* Animation douce pour les icônes au survol */
.icon img,
.icon svg {
    will-change: transform, opacity, filter;
}

/* Icônes avec couleurs contextuelles douces */
.icon-primary img,
.icon-primary svg {
    filter: brightness(1.2) saturate(0.7) hue-rotate(320deg);
    opacity: 0.75;
}

.icon-success img,
.icon-success svg {
    filter: brightness(1.15) saturate(0.7) hue-rotate(120deg);
    opacity: 0.75;
}

.icon-error img,
.icon-error svg {
    filter: brightness(1.1) saturate(0.6) hue-rotate(0deg);
    opacity: 0.75;
}

.icon-warning img,
.icon-warning svg {
    filter: brightness(1.15) saturate(0.7) hue-rotate(30deg);
    opacity: 0.75;
}

/* Icônes dans les backgrounds colorés - plus douces */
[style*="background-color"] .icon img,
[style*="background-color"] .icon svg {
    opacity: 0.7;
    filter: brightness(1.1) saturate(0.7);
}

/* Icônes dans les cartes avec hover */
.card:hover .icon img,
.card:hover .icon svg {
    opacity: 0.85;
    transform: scale(1.03);
}

/* Icônes dans les listes */
.list-item .icon img,
.list-item .icon svg {
    opacity: 0.7;
    filter: brightness(1.1) saturate(0.7);
}

.list-item:hover .icon img {
    opacity: 0.85;
}

/* Override pour les icônes qui doivent être plus visibles */
.icon-strong img,
.icon-strong svg {
    opacity: 0.85;
    filter: brightness(1.15) saturate(0.8);
}

/* Icônes dans les modals */
.modal .icon img,
.modal .icon svg {
    opacity: 0.75;
    filter: brightness(1.1) saturate(0.7);
}

/* Responsive - ajustements pour mobile */
@media (max-width: 768px) {
    .icon img,
    .icon svg {
        opacity: 0.75; /* Légèrement plus visibles sur mobile */
    }
}

/* Amélioration globale - rendre toutes les icônes plus douces */
img[src*="icons/"] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Effet de lumière douce sur les icônes importantes */
.kpi-icon,
.action-icon,
.module-icon {
    position: relative;
}

.kpi-icon::before,
.action-icon::before,
.module-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.kpi-card:hover .kpi-icon::before,
.quick-action-card:hover .action-icon::before,
.module-card:hover .module-icon::before {
    opacity: 1;
}