/* PayrollLogin.css */
/* Ensure body and html occupy full viewport without scroll */
/* Ensure body and html occupy full viewport without scroll */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* prevents scroll */
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* Full-page center container */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #dbeafe, #eef2ff);
}

/* Login Card */
.login-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 1.2rem 2rem; /* compact padding */
    width: 100%;
    max-width: 340px;
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .login-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    /* Header */
    .login-card h1 {
        text-align: center;
        color: #1e40af;
        font-size: 1.4rem;
        font-weight: 700;
        margin-bottom: 0.8rem;
    }

    /* Labels */
    .login-card label {
        font-size: 0.85rem;
        color: #374151;
        font-weight: 600;
        display: block;
        margin-bottom: 0.1rem;
    }

    /* Input fields */
    .login-card input[type="text"],
    .login-card input[type="password"] {
        width: 80%;
        padding: 0.45rem 0.75rem;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        outline: none;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        font-size: 0.9rem;
    }

    .login-card input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

    /* Field spacing */
    .login-card .mb-5,
    .login-card .mb-6 {
        margin-bottom: 0.2rem;
    }

    /* Button area */
    .login-card .button-area {
        text-align: center;
        margin-top: 0.6rem;
    }

        /* Syncfusion button same width as input fields */
        .login-card .button-area .e-control.e-btn {
            width: 80% !important;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.95rem;
        }

    /* Footer text */
    .login-card p {
        text-align: center;
        color: #6b7280;
        font-size: 0.8rem;
        margin-top: 0.8rem;
    }

    .login-card label {
        display: block; /* stack label above input */
        margin-bottom: 0.1rem; /* reduce space below label */
    }

    .login-card input {
        margin: 0; /* remove browser default margin */
        padding: 0.1rem; /* just enough padding inside the input box */
    }

    /* Common style for both fields */
    .login-card .field {
        margin-bottom: 0.3rem; /* very small space by default */
    }

    /* Fine-tune: slightly more below password field */
    .login-card .password-field {
        margin-bottom: 0.8rem; /* creates nice gap before button */
    }

    /* Tighten label/input spacing */
    .login-card label {
        display: block;
        margin-bottom: 0.2rem; /* reduce gap between label and input */
    }

    .login-card input {
        margin: 0;
        padding: 0.4rem;
    }