/* style.css
  Custom styles for the BreachGuard application.
  These styles complement the Tailwind CSS framework.
*/

/* A simple animation for the loading spinner */
@keyframes spin {
    to { 
        transform: rotate(360deg); 
    }
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #059669; /* Corresponds to Tailwind's emerald-600 */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

/* Custom transition for the results container to slide in smoothly */
#results-container {
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}

/* Base styles for navigation links. 
  These are applied via @apply in the <style> tag in the original HTML,
  but would live here in a real-world setup. For this demo, we'll
  define them here for clarity, though Tailwind handles them in the HTML.
*/
.nav-link {
    /* Tailwind classes: px-3 py-2 rounded-md text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-emerald-600 dark:hover:text-emerald-500 transition-colors duration-300 */
}
.nav-link.active {
    /* Tailwind classes: bg-emerald-50 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400 font-semibold */
}

/* Password strength meter styles */
#password-strength-meter {
    height: 10px;
    width: 100%;
    background-color: #e5e7eb; /* Corresponds to Tailwind's gray-200 */
    border-radius: 5px;
    margin-top: 10px;
    overflow: hidden; /* Ensures the inner bar has rounded corners */
}

#password-strength-bar {
    height: 100%;
    width: 0;
    border-radius: 5px;
    transition: width 0.3s, background-color 0.3s;
}

/* Classes to control the color of the password strength bar */
.strength-0 { background-color: transparent; }
.strength-1 { background-color: #ef4444; } /* red-500 */
.strength-2 { background-color: #f97316; } /* orange-500 */
.strength-3 { background-color: #22c55e; } /* green-500 */
.strength-4 { background-color: #059669; } /* emerald-600 */

/* A simple fade-in animation for when content sections appear */
.content-section {
    animation: fadeIn 0.5s ease-in-out;
}

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