/* ==========================================================================
   Login.css
   Attendance Management System
   Login Page Styles
   ========================================================================== */

/* ==========================================================================
   Authentication Background
   ========================================================================== */

.auth-wrapper {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--primary) 0%,
        #0EA5E9 45%,
        #93C5FD 100%
    );
}

/* Animated Background Blobs */

.auth-wrapper::before,
.auth-wrapper::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    opacity: .35;
    z-index:0;
}

.auth-wrapper::before {
    width: 430px;
    height: 430px;
    top: -130px;
    left: -130px;
    background: rgba(255,255,255,.45);
    animation: blobMove1 14s ease-in-out infinite;
}

.auth-wrapper::after {
    width: 360px;
    height: 360px;
    bottom: -100px;
    right: -100px;
    background: rgba(255,255,255,.25);
    animation: blobMove2 16s ease-in-out infinite;
}

@keyframes blobMove1 {

    0%,100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(35px,25px);
    }

}

@keyframes blobMove2 {

    0%,100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-30px,-25px);
    }

}

/* ==========================================================================
   Layout
   ========================================================================== */

.login-container {
    min-height: 100vh;
    position: relative;
    z-index: 2;
}

.login-left-content {
    width: 100%;
    max-width: 760px;
    padding: 3rem;
}

.login-card-wrapper {
    width: 100%;
    max-width: 460px;
    padding: 1.5rem;
}

/* ==========================================================================
   Illustration
   ========================================================================== */

.login-illustration {
    width: 100%;
    max-width: 420px;
    max-height: 320px;
    object-fit: contain;
}

/* ==========================================================================
   Login Card
   ========================================================================== */

.login-card {
    position: relative;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 24px;
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: loginFadeUp .7s ease;
    z-index: 3;

}

@keyframes loginFadeUp {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.login-card .card-body {
    padding: 3rem;
}

/* ==========================================================================
   Logo
   ========================================================================== */

.login-card img {

    transition: transform .25s ease;

}

.login-card img:hover {

    transform: scale(1.05);

}

/* ==========================================================================
   Typography
   ========================================================================== */

.login-card h1,
.login-card h2 {
    color: var(--text-dark);
    font-weight: 700;
}

.login-card p {
    color: var(--text-light);
}

/* ==========================================================================
   Login Form
   ========================================================================== */

.login-form {
    width: 100%;
}

/* ==========================================================================
   Floating Labels
   ========================================================================== */

.form-floating {
    margin-bottom: 1.5rem;
}

.form-floating > label {
    color: var(--text-light);
}

.form-control {

    min-height: 58px;

    border-radius: 14px;

}

.form-control:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 .25rem rgba(37,99,235,.15);

}

/* ==========================================================================
   Checkbox
   ========================================================================== */

.form-check-input {
    cursor: pointer;
    appearance:auto;
    -webkit-appearance:auto;
}

.form-check-input:checked {

    background: var(--primary);

    border-color: var(--primary);

}

.form-check-label {

    cursor: pointer;

}

/* ==========================================================================
   Links
   ========================================================================== */

.login-card a {

    transition: color .25s;

}

.login-card a:hover {

    color: var(--primary);

}

/* ==========================================================================
   Login Button
   ========================================================================== */

#loginBtn{
    width:100%;
    min-height:48px;
    background:#2563eb !important;
    border:1px solid #2563eb !important;
    color:#ffffff !important;
    opacity:1 !important;
    visibility:visible !important;
}

#loginBtn.btn-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--primary),#0EA5E9);
    border:none;
}

#loginBtn:hover {

    color: #fff;

    background: linear-gradient(
        135deg,
        #1D4ED8,
        #0284C7
    ) !important;

    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(37,99,235,.35);

}

#loginBtn:focus {

    color: #fff;

}

#loginBtn:disabled {

    color: #fff;

    opacity: .85;

}

/* ==========================================================================
   Feature Cards
   ========================================================================== */

.login-feature-card {

    border-radius: 18px;

    transition:
        transform .25s,
        box-shadow .25s;

}

.login-feature-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-md);

}

.login-feature-card i {

    transition: transform .25s;

}

.login-feature-card:hover i {

    transform: scale(1.12);

}

/* ==========================================================================
   Bottom Security Icons
   ========================================================================== */

.login-card .row i {

    transition: transform .25s;

}

.login-card .row i:hover {

    transform: scale(1.12);

}

/* ==========================================================================
   Validation
   ========================================================================== */

.invalid-feedback {

    font-size: .82rem;

}

/* ==========================================================================
   Divider
   ========================================================================== */

.login-card hr {

    opacity: .12;

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199px) {

    .login-left-content {

        padding: 2rem;

    }

}

@media (max-width: 991px) {

    .login-card-wrapper {

        max-width: 500px;

    }

    .login-card .card-body {

        padding: 2.25rem;

    }

}

@media (max-width: 767px) {

    .login-card-wrapper {

        padding: 1rem;

    }

    .login-card {

        border-radius: 20px;

    }

    .login-card .card-body {

        padding: 2rem;

    }

    .login-card h2 {

        font-size: 1.75rem;

    }

}

@media (max-width: 575px) {

    .login-card .card-body {

        padding: 1.5rem;

    }

    .form-control {

        min-height: 54px;

    }

    #loginBtn {

        padding: .9rem;

    }

}