/* assets/css/frontend.css - Version 1.2.0 */

.intelvox-agent-dashboard {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

.intelvox-dashboard {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    max-width: 800px;
    margin: 0 auto;
}

/* Design responsive pour agent */
@media (max-width: 768px) {
    .intelvox-agent-dashboard {
        padding: 10px 0 80px 0 !important;
    }
    
    .agent-section {
        margin: 5px !important;
        padding: 15px !important;
    }
    
    .products-grid-agent {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .product-card-agent {
        margin: 0 !important;
    }
    
    .agent-mobile-nav {
        display: flex !important;
    }
    
    .intelvox-dashboard {
        padding: 10px !important;
    }
    
    .add-prospect-form div {
        flex-direction: column;
    }
    
    .add-prospect-form input,
    .add-prospect-form button {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Animation de la barre de progression */
.goal-progress .progress-bar {
    transition: width 0.5s ease-in-out;
}

/* États des boutons */
button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Styles pour les modals */
.agent-modal {
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Styles pour les produits */
.product-card-agent {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card-agent:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 179, 179, 0.3);
}

/* Navigation mobile améliorée */
.agent-mobile-nav .nav-item {
    transition: all 0.3s ease;
}

.agent-mobile-nav .nav-item.active {
    background: rgba(0, 179, 179, 0.2) !important;
    color: #00b3b3 !important;
}

/* Messages */
.success-message {
    background: #00b3b3 !important;
    color: white !important;
}

.error-message {
    background: #e63757 !important;
    color: white !important;
}

/* Animations */
#form-message {
    transition: all 0.3s ease;
}