/* Admin Login Styles */

.login-container {
    max-width: 400px;
    margin: 100px auto;
    transition: all 0.3s ease;
}

.login-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Dark mode specific styles */
.dark .login-container:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.dark input[type="text"], .dark input[type="password"] {
    background-color: #1f2937;
    color: #e5e7eb;
    border-color: #4b5563;
}

.dark input[type="text"]:focus, .dark input[type="password"]:focus {
    border-color: #818cf8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2);
}

.hidden-link {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    background: transparent;
    border: none;
    cursor: default;
    z-index: 1000;
}

/* Animation for error message */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.6s ease-in-out;
}

/* Forgot password modal styles */
#forgot-password-modal {
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

#forgot-password-modal > div {
    max-width: 450px;
    transition: all 0.3s ease;
}

#forgot-password-modal > div:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.dark #forgot-password-modal > div:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

#security-question {
    font-style: italic;
}