html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: "Inter", sans-serif !important;
}

.auth-wrapper {
    margin: 0 !important;
}

.container {
    max-width: inherit;
    padding: 0 !important;
}

.login-page-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

    .login-page-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

.background-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

    .background-slideshow .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

        .background-slideshow .slide.active {
            opacity: 1;
        }

.login-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    padding: 0 5%;
    color: white;
}

.welcome-section {
    flex: 1;
    padding-right: 50px;
    text-align: left;
}

    .welcome-section .logo {
        width: 150px;
        margin-bottom: 20px;
    }

    /* Only for a configured logo, which is typically drawn for light backgrounds, often with its
       own opaque white background baked into the image — that reads as a hard white patch against
       the photo behind it, so the card gives it the background it expects and matches the
       treatment the sidebar and dashboard logos get. The packaged logo must never get this: it is
       near-white artwork on transparency, drawn for the photo, and would vanish against white. */
    .welcome-section .logo.logo-card {
        box-sizing: border-box;
        background-color: #ffffff;
        padding: 8px;
        border-radius: 8px;
    }

    .welcome-section h1 {
        font-size: 2.5rem;
        font-weight: 600;
    }

/* "Kensium POS" link inside the powered-by tagline: inherit the tagline color and only
   underline on hover, so the attribution looks unchanged until interacted with. */
.rms-powered-by-link {
    color: inherit;
    text-decoration: none;
}

.rms-powered-by-link:hover,
.rms-powered-by-link:focus-visible {
    text-decoration: underline;
}

.login-section {
    flex: 0 0 450px;
}

.login-form-wrapper {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    color: #333;
}

    .login-form-wrapper h4 {
        text-align: left;
        margin-bottom: 25px;
        font-size: 1.75rem;
        font-weight: 600;
        color: #333;
    }

    .login-form-wrapper .form-group {
        margin-bottom: 20px;
    }

    .login-form-wrapper label {
        font-size: 0.875rem;
        font-weight: 600;
        color: #555;
        margin-bottom: 8px;
        display: block;
    }

.auth-wrapper .form-control {
    height: 40px;
    border: 1px solid #CED4DA !important;
    border-radius: 5px !important;
    padding: 0 15px !important;
    width: 100% !important;
    box-shadow: none !important;
}

.login-form-wrapper .mb-3 {
    margin-bottom: 1.5rem !important;
}

.login-form-wrapper .form-label {
    margin-bottom: .5rem;
    display: block;
    font-size: 0.9rem;
    color: #212529;
}

.login-form-wrapper input[type="text"],
.login-form-wrapper input[type="password"],
.login-form-wrapper input[type="email"] {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.login-form-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.login-form-wrapper li.form-check {
    display: flex;
    align-items: center;
}

.login-form-wrapper .form-check-input {
    margin-right: 10px;
    box-shadow: none !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
}

    .login-form-wrapper .form-check-input:checked {
        background-color: #4a7a5e;
        border-color: #4a7a5e;
    }

.login-form-wrapper .form-check-label {
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 0;
}

.login-form-wrapper a {
    font-size: 0.875rem;
    color: #2D3439;
    text-decoration: none;
}

    .login-form-wrapper a:hover {
        text-decoration: underline;
    }

/* Button styles removed - use xms.css for btn-primary styling */

.login-form-wrapper .field-validation-error {
    color: #dc3545;
    font-size: .875em;
    padding-top: 4px;
}

.login-form-wrapper .field-validation-valid {
    display: none;
}

.required {
    color: red;
    margin-left: 2px;
}

.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

    .password-wrapper input {
        width: 100%;
        padding-right: 40px; /* Make space for the icon */
    }

    .password-wrapper i {
        position: absolute;
        right: 15px;
        cursor: pointer;
        color: #ccc;
    }

        .password-wrapper i:hover {
            color: #333;
        }

.text-danger {
    padding-top: 4px;
    display: block;
}

/* Styles for Orchard Core generated links */
.login-form-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.login-form-wrapper li.form-check {
    display: flex;
    align-items: center;
}

#togglePassword {
    position: absolute;
    top: 6px;
    right: 0;
    background: none;
    border: none;
    z-index: 9;
    box-shadow: none !important;
}

.auth-form li {
    list-style-type: none;
    font-weight: 600;
    text-align: center;
}

    .auth-form li a {
        font-size: 16px;
    }

.field-validation-error {
    color: red !important;
    font-size: 8px;
}

.auth-wrapper .form-horizontal {
    max-width: 500px;
    margin: 5rem auto;
    border: 1px solid #D1D5DB;
    padding: 30px;
    border-radius: 8px;
}

    .auth-wrapper .form-horizontal div,
    .auth-wrapper .form-horizontal .form-label {
        width: 100%;
    }

/* ---------------------------------------------------------------------------
   Responsive login
   ---------------------------------------------------------------------------
   Styles/xms.css repeats most of the rules above and loads after this file, so every rule here
   is prefixed with .login-page-wrapper (the layout's wrapper, Layout__Login.cshtml) to outrank
   its copies.

   - Height uses dvh where supported (a mobile browser's toolbars no longer cover the form), with
     the vh value as the fallback.
   - The content scrolls when it doesn't fit (short windows, a tablet with its keyboard open)
     instead of being clipped by the page's overflow:hidden. The children centre themselves with
     auto margins, so where everything fits the page looks exactly as before.
   - Below 1024px (tablet portrait, phone) the welcome text stacks above the form.
   - On a touch screen (pointer: coarse) inputs, buttons and links are at least 44px tall.
   --------------------------------------------------------------------------- */
.login-page-wrapper .login-page-container {
    height: 100vh;
    height: 100dvh;
}

.login-page-wrapper .login-content {
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    .login-page-wrapper .login-content > .welcome-section,
    .login-page-wrapper .login-content > .login-section {
        margin-top: auto;
        margin-bottom: auto;
    }

/* Tablet landscape and small laptops: a narrower form leaves the welcome text room. */
@media (max-width: 1199.98px) {
    .login-page-wrapper .login-section {
        flex: 0 1 420px;
        min-width: 0;
    }

    .login-page-wrapper .welcome-section {
        padding-right: 32px;
    }

        .login-page-wrapper .welcome-section h1 {
            font-size: 2rem;
        }

    .login-page-wrapper .login-form-wrapper {
        padding: 32px;
    }
}

/* Tablet portrait and phone: welcome text above the form, both centred. */
@media (max-width: 1023.98px) {
    .login-page-wrapper .login-content {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 24px;
        padding: 32px 5%;
    }

        .login-page-wrapper .login-content > .welcome-section {
            margin-top: auto;
            margin-bottom: 0;
        }

        .login-page-wrapper .login-content > .login-section {
            margin-top: 0;
            margin-bottom: auto;
        }

    .login-page-wrapper .welcome-section {
        flex: 0 0 auto;
        padding-right: 0;
        text-align: center;
    }

        .login-page-wrapper .welcome-section .logo {
            width: 120px;
            margin-bottom: 12px;
        }

        .login-page-wrapper .welcome-section h1 {
            font-size: 1.75rem;
            margin-bottom: 0;
        }

    .login-page-wrapper .login-section {
        flex: 0 0 auto;
        width: 100%;
        max-width: 450px;
    }
}

@media (max-width: 767.98px) {
    .login-page-wrapper .login-content {
        gap: 16px;
        padding: 24px 16px;
    }

    .login-page-wrapper .welcome-section .logo {
        width: 96px;
    }

    .login-page-wrapper .welcome-section h1 {
        font-size: 1.375rem;
    }

    .login-page-wrapper .login-form-wrapper {
        padding: 24px 20px;
    }

        .login-page-wrapper .login-form-wrapper h4 {
            font-size: 1.375rem;
            margin-bottom: 16px;
        }

    /* "Remember me" and the account links stack rather than squeeze onto one line. */
    .login-page-wrapper .login-form-wrapper ul {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Touch screens: 44px targets, whatever the width. */
@media (pointer: coarse) {
    .login-page-wrapper .auth-wrapper .form-control,
    .login-page-wrapper .login-form-wrapper input[type="text"],
    .login-page-wrapper .login-form-wrapper input[type="password"],
    .login-page-wrapper .login-form-wrapper input[type="email"] {
        height: 44px;
        min-height: 44px;
    }

    .login-page-wrapper .btn {
        min-height: 44px;
    }

    .login-page-wrapper .login-form-wrapper a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .login-page-wrapper .login-form-wrapper li.form-check {
        min-height: 44px;
    }

    .login-page-wrapper .login-form-wrapper .form-check-input {
        width: 22px;
        height: 22px;
    }

    .login-page-wrapper #togglePassword {
        top: 0;
        min-width: 44px;
        min-height: 44px;
    }
}