/* Custom Styles for Sales Admin Dashboard */

/* Smooth transitions for all interactive elements */
* {
    transition: all 0.2s ease-in-out;
}

/* Enhanced button hover effects */
.fi-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Wizard step animations */
.fi-wizard-step {
    transition: all 0.3s ease-in-out;
}

.fi-wizard-step[data-state="active"] {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}

/* Form field focus animations */
.fi-input:focus,
.fi-select:focus,
.fi-textarea:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Card hover effects */
.fi-section {
    transition: all 0.3s ease-in-out;
}

.fi-section:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Badge animations */
.fi-badge {
    transition: all 0.2s ease-in-out;
}

.fi-badge:hover {
    transform: scale(1.05);
}

/* Table row hover effects */
.fi-ta-row:hover {
    background-color: rgba(59, 130, 246, 0.05);
    transform: translateX(2px);
}

/* Loading spinner animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

/* Pulse animation for notifications */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.fi-notification {
    animation: pulse 2s ease-in-out infinite;
}

/* Slide in animation for wizard steps */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fi-wizard-step-content {
    animation: slideIn 0.4s ease-out;
}

/* Enhanced focus states */
.fi-input:focus-within,
.fi-select:focus-within {
    ring-width: 2px;
    ring-color: rgb(59 130 246);
    ring-opacity: 0.5;
}

/* Success animation */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

.success-bounce {
    animation: bounce 1s ease-in-out;
}

/* Floating animation for action buttons */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

.fi-ac-btn-group .fi-btn {
    animation: float 3s ease-in-out infinite;
}

.fi-ac-btn-group .fi-btn:nth-child(2) {
    animation-delay: 0.5s;
}

.fi-ac-btn-group .fi-btn:nth-child(3) {
    animation-delay: 1s;
}

/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
    .fi-section:hover {
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
    }
    
    .fi-wizard-step[data-state="active"] {
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    }
}

/* Mobile responsive enhancements */
@media (max-width: 768px) {
    .fi-wizard-step {
        margin-bottom: 1rem;
    }
    
    .fi-btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .fi-ta-row:hover {
        transform: none;
    }
}

/* Print styles */
@media print {
    .fi-btn,
    .fi-navigation,
    .fi-header-actions {
        display: none !important;
    }
    
    .fi-section {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}