/* Login Page Styles - Modern Professional Design */

/* Base font family for dashboard pages */
.login-page {
    font-family: 'B Nazanin', sans-serif;
}

/* Glass morphism effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Modern gradient background */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Floating animation for background elements */
.floating-animation {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0px); 
    }
    50% { 
        transform: translateY(-20px); 
    }
}

/* Pulsing animation for gradient orbs */
.pulse-animation {
    animation: pulse 2s infinite;
}

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

/* Slide-in animation for main container */
.slide-in {
    animation: slideIn 0.8s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced form input styles */
.login-input {
    transition: all 0.2s ease-in-out;
}

.login-input:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Button hover effects */
.login-button {
    transition: all 0.2s ease-in-out;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.login-button:active {
    transform: translateY(0);
}

/* Feature card hover effects */
.feature-card {
    transition: all 0.3s ease-in-out;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Icon hover effects */
.feature-icon {
    transition: transform 0.3s ease-in-out;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Logo hover effects */
.logo-container {
    transition: all 0.3s ease-in-out;
}

.logo-container:hover {
    transform: scale(1.05);
}

/* Background pattern styles */
.bg-pattern-grain {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white"/><circle cx="75" cy="75" r="1" fill="white"/><circle cx="50" cy="10" r="0.5" fill="white"/><circle cx="10" cy="60" r="0.5" fill="white"/><circle cx="90" cy="40" r="0.5" fill="white"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
}

.bg-pattern-dots {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%23667eea"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
}

/* Loading state styles */
.loading-spinner {
    animation: spin 1s linear infinite;
}

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

/* Focus ring styles */
.focus-ring {
    transition: all 0.2s ease-in-out;
}

.focus-ring:focus-within {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .floating-animation {
        animation-duration: 8s;
    }
    
    .pulse-animation {
        animation-duration: 3s;
    }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
    .glass-effect {
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Print styles */
@media print {
    .floating-animation,
    .pulse-animation,
    .slide-in {
        animation: none;
    }
    
    .glass-effect {
        background: white;
        border: 1px solid #ccc;
    }
}