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

    body.theme-loaded {
        visibility: visible;
    }

/* This page is always light, regardless of the user's Claro/Escuro/Sistema choice — the colorful
   gradient is its own identity and the card is a fixed white frosted-glass surface. Login.cshtml
   deliberately does NOT load darkMode.js (same as the AccessOnlineMonitor layout), so <body> never
   gets data-bs-theme="dark". Loading it and resetting colors back to light only inside .login-bg
   wasn't enough: body's color-scheme:dark (site.css) still inherited down, and Chrome painted its
   autofilled username/password with the dark-scheme autofill style (gray-blue fill, white text) —
   and SweetAlert popups, appended to <body> outside .login-bg, went dark too. */

/* Gradient Background — was a 400%-size gradient perpetually panning back and forth every 15s;
   a constantly-moving background is more distracting than polished for a screen people land on
   every day, not just once. Frozen to a static sweep instead: same colors, same diagonal, no
   motion. */
.login-bg {
    background: linear-gradient( -45deg, var(--mainColor) 0%, var(--mainColorLighter) 35%, var(--mainColorLightest) 50%, var(--mainColorLighter) 65%, var(--mainColor) 100% );
    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;
    }

/* Glass-morphism Login Card */
.login-card {
    max-width: 28rem;
    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;
}