/* ===========================================================================
   Ornecy sign-in screens.

   Shared by every view under Views/ERPLogin plus the SysAdmin sign-in, so the
   whole authentication flow reads as one screen rather than eleven variations
   on a dark box. Modelled on the Ornecy Performa sign-in: a heading, labelled
   fields each carrying an icon, and full-width action buttons.

   The page background stays the handshake photo that PRoleStyle.css puts on
   body - this only styles the card that sits on top of it. The card is kept
   dark and translucent so that photo still reads through it.

   Icons are Font Awesome 4.7, which is what this application ships. Two names
   from the Performa markup do not exist in 4.7 and are mapped here:
       fa-right-to-bracket (FA6)  ->  fa-sign-in
       fa-user-shield      (FA5+) ->  fa-shield
   =========================================================================== */

.orn-auth-wrap {
    max-width: 420px;
    margin: 0 auto;
    padding: 40px 15px 60px;
}

.orn-auth-card {
    padding: 32px 30px 28px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .72);
    box-shadow: 0 0 10px #808080;
    text-align: left;
    color: #e8ecef;
}

/* ---------------- Heading ---------------- */

.orn-auth-title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.orn-auth-sub {
    margin: 0 0 22px;
    font-size: 13px;
    color: #aab4bb;
    text-align: center;
}

/* ---------------- Fields ---------------- */

.orn-auth-field {
    margin-bottom: 16px;
}

.orn-auth-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #b9c2c8;
}

/* Label row that also carries a link on the right, as the password field does. */
.orn-auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

    .orn-auth-label-row .orn-auth-label {
        margin-bottom: 6px;
    }

    .orn-auth-label-row a {
        font-size: 12px;
        color: #9fb6c4;
    }

        .orn-auth-label-row a:hover,
        .orn-auth-label-row a:focus {
            color: #fff;
        }

/* The icon sits inside the field rather than in a Bootstrap input-group addon,
   so there is no separate bordered box beside the input. */
.input-icon {
    position: relative;
}

    .input-icon > i {
        position: absolute;
        top: 50%;
        left: 14px;
        margin-top: -7px;
        width: 14px;
        font-size: 14px;
        line-height: 1;
        text-align: center;
        color: #8c979e;
        pointer-events: none;
    }

    .input-icon > .form-control {
        height: 44px;
        padding-left: 40px;
        font-size: 14px;
        color: #fff;
        background-color: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 4px;
        box-shadow: none;
    }

        .input-icon > .form-control::-webkit-input-placeholder { color: #7f8a91; }
        .input-icon > .form-control::-moz-placeholder { color: #7f8a91; opacity: 1; }
        .input-icon > .form-control:-ms-input-placeholder { color: #7f8a91; }

        .input-icon > .form-control:focus {
            border-color: #1ab394;
            background-color: rgba(255, 255, 255, .13);
            box-shadow: none;
            color: #fff;
        }

            .input-icon > .form-control:focus + i,
            .input-icon > .form-control:focus ~ i {
                color: #1ab394;
            }

/* Chrome paints its own colour over autofilled inputs, which turns the field
   white and the text unreadable against this card. */
    .input-icon > .form-control:-webkit-autofill,
    .input-icon > .form-control:-webkit-autofill:hover,
    .input-icon > .form-control:-webkit-autofill:focus {
        -webkit-text-fill-color: #fff;
        -webkit-box-shadow: 0 0 0 1000px #2b3236 inset;
        transition: background-color 9999s ease-in-out 0s;
    }

/* Two-factor passcode: fixed prefix, then the part the user types. */
.orn-auth-code {
    display: flex;
    align-items: stretch;
}

    .orn-auth-code .orn-auth-code-prefix {
        display: flex;
        align-items: center;
        padding: 0 14px;
        font-weight: 700;
        letter-spacing: .06em;
        color: #1ab394;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .18);
        border-right: 0;
        border-radius: 4px 0 0 4px;
    }

    .orn-auth-code .form-control {
        height: 44px;
        padding-left: 14px;
        font-size: 14px;
        color: #fff;
        background-color: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 0 4px 4px 0;
        box-shadow: none;
    }

        .orn-auth-code .form-control:focus {
            border-color: #1ab394;
            background-color: rgba(255, 255, 255, .13);
            box-shadow: none;
        }

/* ---------------- Buttons ---------------- */

.orn-auth-btn {
    display: block;
    width: 100%;
    height: 44px;
    margin-bottom: 12px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 42px;
    border-radius: 4px;
    border: 1px solid transparent;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .12s ease, border-color .12s ease;
}

    .orn-auth-btn i,
    .orn-auth-btn .sso-ms-icon {
        margin-right: 7px;
    }

.orn-auth-btn-primary {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #fff;
}

    .orn-auth-btn-primary:hover,
    .orn-auth-btn-primary:focus {
        background-color: #18a689;
        border-color: #18a689;
        color: #fff;
    }

/* The two single sign-on routes and any secondary action: outlined rather than
   filled, so the primary action on each screen stays the obvious one. */
.orn-auth-btn-outline {
    background-color: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .28);
    color: #e8ecef;
}

    .orn-auth-btn-outline:hover,
    .orn-auth-btn-outline:focus {
        background-color: rgba(255, 255, 255, .14);
        border-color: rgba(255, 255, 255, .45);
        color: #fff;
    }

.orn-auth-btn-quiet {
    background: transparent;
    border-color: transparent;
    color: #9fb6c4;
    font-weight: 500;
}

    .orn-auth-btn-quiet:hover,
    .orn-auth-btn-quiet:focus {
        color: #fff;
        background: rgba(255, 255, 255, .06);
    }

/* ---------------- Busy state ----------------
   Applied by ornecy-auth.js when an action is under way. Note there is no
   disabled attribute: a disabled submit button is left out of the form post,
   so blocking is done with pointer-events and a flag in the script instead. */

.orn-auth-btn.is-busy {
    pointer-events: none;
    cursor: default;
    opacity: .85;
}

    .orn-auth-btn.is-busy .fa-spinner {
        margin-right: 7px;
    }

/* The other actions in the form while one is running - still readable, but
   plainly not available. */
.orn-auth-btn.is-disabled {
    pointer-events: none;
    cursor: default;
    opacity: .45;
}

/* Font Awesome 4.7 ships fa-spin, but only applies it to the icon itself; this
   keeps the spin smooth when the button text changes width around it. */
.orn-auth-btn .fa-spinner {
    display: inline-block;
    width: 14px;
    text-align: center;
}

/* Microsoft's four-square mark, inline so it needs no image request. */
.sso-ms-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -2px;
}

/* ---------------- Supporting text ---------------- */

.orn-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8c979e;
}

    .orn-auth-divider:before,
    .orn-auth-divider:after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, .16);
    }

.orn-auth-note {
    margin: 14px 0 0;
    font-size: 12px;
    color: #aab4bb;
    text-align: center;
}

    .orn-auth-note a {
        color: #1ab394;
    }

        .orn-auth-note a:hover,
        .orn-auth-note a:focus {
            color: #26d3af;
        }

.orn-auth-alert {
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid transparent;
}

.orn-auth-alert-success {
    background: rgba(26, 179, 148, .14);
    border-color: rgba(26, 179, 148, .5);
    color: #6fe0c4;
}

.orn-auth-alert-danger {
    background: rgba(237, 85, 101, .14);
    border-color: rgba(237, 85, 101, .5);
    color: #f7a2ac;
}

.orn-auth-greeting {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

/* The ValidationSummary the views emit above the card. */
.orn-auth-wrap .validation-summary-errors {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 4px;
    background: rgba(237, 85, 101, .14);
    border: 1px solid rgba(237, 85, 101, .5);
    color: #f7a2ac;
    text-align: left;
}

    .orn-auth-wrap .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

@media (max-width: 480px) {
    .orn-auth-card {
        padding: 26px 20px 22px;
    }
}


/* ===========================================================================
   Sign-in screens, second pass.

   Everything above styles a plain dark box. What follows is the design the
   sign-in page was given afterwards - a pane of dark glass over the
   background photograph, larger fields, and a gradient primary action - and
   it is shared by every screen in the flow rather than living on one page.

   It is appended rather than merged so it keeps the position in the cascade
   it had as an inline block: after the rules above, which it overrides.
   A screen opts in by putting login-card on .orn-auth-wrap.
   =========================================================================== */

/* ==================================================================
   Sign in

   The background picture is OrnecyAuth.css's and is left alone. This
   centres one card over it and refines the form inside. The inner
   form keeps its orn-auth-* classes so OrnecyAuth.css and
   ornecy-auth.js keep working; what follows overrides the pieces that
   need to. Sizes are px.
   ================================================================== */

html {
    height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    font-size: 15px;
    color: #16202b;
    -webkit-font-smoothing: antialiased;
}

/* Centred in the window, with a little more air below than above so
   the card sits just high of true centre - which is where the eye
   expects it. */
.login-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 3rem 1.25rem 4rem;
}

.orn-auth-wrap.login-card {
    width: 100%;
    max-width: 460px;
    margin: 0;
    animation-duration: .45s;
}

/* The card. A pane of dark glass rather than a white block: the
   picture stays visible through it, blurred enough that no detail of
   it ever competes with the letters, and the navy tint gives white
   type its contrast whatever the photograph is doing. */
.login-card .orn-auth-card {
    position: relative;
    overflow: hidden;
    padding: 2.25rem 2.25rem 1.5rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(15,28,51,.78) 0%, rgba(20,38,70,.7) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    backdrop-filter: blur(20px) saturate(130%);
    box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 30px 70px rgba(0,0,0,.45);
    color: #fff;
}

/* Without backdrop-filter the picture would show through sharp, so the
   glass goes nearly solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .login-card .orn-auth-card {
        background: linear-gradient(160deg, rgba(15,28,51,.96) 0%, rgba(20,38,70,.94) 100%);
    }
}

/* A brand band along the top edge. */
.login-card .orn-auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, #f6861f 0%, #2f6fed 50%, #23b5a4 100%);
}

/* The mark and name at the top of the card, so the page says whose it
   is without a separate header. */
.login-brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.6rem;
}

    .login-brand .mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 13px;
        background: linear-gradient(135deg, #f6861f, #ffb347);
        color: #fff;
        font-size: 22px;
        font-weight: 900;
        box-shadow: 0 10px 22px rgba(246,134,31,.35);
    }

    .login-brand strong {
        display: block;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -.02em;
        color: #fff;
        line-height: 1.1;
    }

    .login-brand small {
        display: block;
        margin-top: .15rem;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .14em;
        color: rgba(255,255,255,.6);
    }

.login-card .orn-auth-title {
    margin: 0 0 .3rem;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.login-card .orn-auth-sub {
    margin: 0 0 1.6rem;
    font-size: 15px;
    color: rgba(255,255,255,.72);
}

/* -------------------------------- fields ------------------------ */

.orn-auth-field {
    margin-bottom: 1.05rem;
}

/* OrnecyAuth.css sets the labels in capitals with tracking. Sentence
   case reads faster, and on a short form there is nothing for capitals
   to separate. */
.orn-auth-label {
    display: block;
    margin-bottom: .4rem;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255,255,255,.9);
}

.orn-auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .4rem;
}

    .orn-auth-label-row .orn-auth-label {
        margin: 0;
    }

    .orn-auth-label-row a {
        font-size: 13px;
        font-weight: 600;
        color: #7fe0d2;
        text-decoration: none;
    }

        .orn-auth-label-row a:hover {
            text-decoration: underline;
        }

.input-icon {
    position: relative;
}

    .input-icon > i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255,255,255,.55);
        font-size: 14px;
        pointer-events: none;
        transition: color .15s ease;
    }

    .input-icon > .form-control {
        height: 48px;
        padding: 0 46px 0 44px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 12px;
        background: rgba(255,255,255,.08);
        box-shadow: none;
        font-size: 15px;
        color: #fff;
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }

        .input-icon > .form-control::placeholder {
            color: rgba(255,255,255,.4);
        }

        .input-icon > .form-control:focus {
            border-color: #7fe0d2;
            background: rgba(255,255,255,.14);
            outline: none;
            box-shadow: 0 0 0 4px rgba(127,224,210,.18);
        }

        /* Chrome's autofill paints its own yellow or white box; this keeps
           the glass look and readable text when it does. */
        .input-icon > .form-control:-webkit-autofill,
        .input-icon > .form-control:-webkit-autofill:hover,
        .input-icon > .form-control:-webkit-autofill:focus,
        .input-icon > .form-control:-webkit-autofill:active {
            -webkit-text-fill-color: #fff;
            -webkit-box-shadow: 0 0 0 1000px #22385f inset;
            border-color: rgba(255,255,255,.28);
            caret-color: #fff;
            transition: background-color 9999s ease-out 0s;
        }

        .input-icon > .form-control:autofill {
            background: #22385f;
            color: #fff;
        }

    .input-icon:focus-within > i {
        color: #7fe0d2;
    }

    /* Show and hide the password. */
    .input-icon > .login-eye {
        position: absolute;
        right: 7px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: rgba(255,255,255,.55);
        cursor: pointer;
    }

        .input-icon > .login-eye:hover {
            background: rgba(255,255,255,.12);
            color: #fff;
        }

/* ------------------------------- buttons ------------------------ */

.orn-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    min-height: 48px;
    margin-top: .6rem;
    padding: .7rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .orn-auth-btn:hover, .orn-auth-btn:focus {
        text-decoration: none;
    }

/* The one thing on the card that is bright. */
.orn-auth-btn-primary {
    margin-top: .4rem;
    border-color: transparent;
    background: linear-gradient(115deg, #2f6fed 0%, #23b5a4 100%);
    color: #fff;
    box-shadow: 0 10px 26px rgba(35,181,164,.35);
}

    .orn-auth-btn-primary:hover, .orn-auth-btn-primary:focus {
        color: #fff;
        transform: translateY(-1px);
        filter: brightness(1.06);
        box-shadow: 0 14px 32px rgba(35,181,164,.45);
    }

.orn-auth-btn-outline {
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.08);
    color: #fff;
}

    .orn-auth-btn-outline:hover, .orn-auth-btn-outline:focus {
        border-color: rgba(255,255,255,.5);
        background: rgba(255,255,255,.16);
        color: #fff;
    }

.orn-auth-btn-quiet {
    min-height: 40px;
    margin-top: .4rem;
    background: transparent;
    color: rgba(255,255,255,.62);
    font-weight: 600;
}

    .orn-auth-btn-quiet:hover {
        color: #fff;
        background: rgba(255,255,255,.08);
    }

.orn-auth-btn[disabled], .orn-auth-btn.is-busy {
    opacity: .7;
    cursor: progress;
    transform: none;
}

.sso-ms-icon {
    width: 18px;
    height: 18px;
}

.orn-auth-divider {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 1.4rem 0 .5rem;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}

    .orn-auth-divider::before, .orn-auth-divider::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background: rgba(255,255,255,.16);
    }

/* A validation message on dark glass: a tinted band, not red text. */
.login-card .text-danger {
    margin-bottom: 1rem;
    padding: .7rem .9rem;
    border: 1px solid rgba(255,120,120,.4);
    border-radius: 10px;
    background: rgba(194,52,29,.22);
    color: #ffd2cc !important;
    font-size: 14px;
}

    .login-card .text-danger ul {
        margin: 0;
        padding-left: 1.1rem;
    }

/* Under the card, on the picture: light text with a shadow so it reads
   on whatever is behind it. */
.login-foot {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,.85);
    text-shadow: 0 1px 8px rgba(0,0,0,.55);
}

/* ---------------------------- responsive ------------------------ */

@media (max-width: 575px) {
    .login-stage {
        padding: 1.5rem 1rem 2.5rem;
        align-items: flex-start;
    }

    .login-card .orn-auth-card {
        padding: 1.75rem 1.4rem 1.25rem;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-card.animated {
        animation: none;
    }

    .orn-auth-btn {
        transition: none;
    }

    .orn-auth-btn-primary:hover {
        transform: none;
    }
}