/* Prevent FOUC */
body {
    visibility: hidden;
}

    body.theme-loaded {
        visibility: visible;
    }

/* Animated Gradient Background */
.login-bg {
    background: linear-gradient( -45deg, var(--mainColor) 0%, var(--mainColorLighter) 25%, var(--mainColorLightest) 50%, var(--mainColorLighter) 75%, var(--mainColor) 100% );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    min-height: 100vh;
    position: relative;
}

    /* Subtle overlay for better contrast */
    .login-bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient( ellipse at top, transparent 0%, rgba(0, 0, 0, 0.1) 100% );
        pointer-events: none;
    }

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Glass-morphism Login Card */
.login-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .login-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.5) !important;
    }

/* Form Control Focus Effects */
.input-group-text {
    transition: all 0.3s ease;
}

.form-control {
    transition: all 0.3s ease;
}

    .form-control:focus {
        border-color: var(--mainColor);
        box-shadow: 0 0 0 0.25rem rgba(var(--mainColorRGB, 13, 110, 253), 0.25);
    }

.input-group:focus-within .input-group-text {
    border-color: var(--mainColor);
    background-color: rgba(var(--mainColorRGB, 13, 110, 253), 0.1);
}

/* Password Toggle Button */
.btn-toggle-password {
    transition: all 0.3s ease;
}

    .btn-toggle-password:hover {
        background-color: var(--mainColorLightest, #e7f1ff);
    }

/* Dropdown Styling */
.dropdown-toggle {
    transition: all 0.3s ease;
}

    .dropdown-toggle:hover {
        opacity: 0.8;
    }

.dropdown-menu {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-item {
    transition: all 0.2s ease;
}

    .dropdown-item:hover {
        background-color: var(--mainColorLightest, #e7f1ff);
        color: var(--mainColor);
    }

/* Footer Link Effects */
footer a {
    transition: all 0.3s ease;
    position: relative;
}

    footer a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: white;
        transition: width 0.3s ease;
    }

    footer a:hover::after {
        width: 100%;
    }

    footer a:hover {
        opacity: 1 !important;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

/* Loading State */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.login-card.loading {
    pointer-events: none;
    opacity: 0.7;
}

    .login-card.loading::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.3);
        animation: pulse 1.5s ease infinite;
        border-radius: inherit;
        z-index: 1000;
    }

/* Alert Animations */
#alertContainer .alert {
    animation: slideInDown 0.3s ease;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Logo Animation */
#appLogo {
    transition: transform 0.3s ease;
}

    #appLogo:hover {
        transform: scale(1.05);
    }

/* Responsive Adjustments */
@media (max-width: 576px) {
    #appLogo {
        max-height: 50px !important;
    }

    .login-card {
        margin: 1rem;
    }

    .login-bg::before {
        background: radial-gradient( ellipse at top, transparent 0%, rgba(0, 0, 0, 0.15) 100% );
    }
}

/* Smooth scroll for all transitions */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selection color matching theme */
::selection {
    background-color: var(--mainColorLighter);
    color: white;
}

::-moz-selection {
    background-color: var(--mainColorLighter);
    color: white;
}