/* NG-454 BT-19018 login-page-redesign plan: Basware design-system look for the local login form
   (login.jsp) and SSO login page (accessLogin.jsp). Loaded ONLY by those 2 pages (own <link>, not
   shared with any of the 6 other pages that link bwcorecontrols.css/bwabout.css). Every rule is
   scoped under .bw-login so it can never collide with bwcorecontrols.css/bwabout.css's own
   selectors, which stay completely untouched.

   Visual tokens copied from uxsearch.css (the established /ui restyle) for consistency, but this
   file is deliberately independent, not an @import — these two pages are plain JSP/JSF, not
   Thymeleaf, and don't share uxsearch.css's .bw-uxsearch-scoped component set (bw-form-grid,
   bw-table, etc. — none of that applies to a single login form).

   Only the login FORM (inputs, submit button, message banners) is restyled here — the surrounding
   page chrome (.mainScreen/.stripe/.contentBG/.content/.logo/.header/.applicationName/.copyright/
   .image, all from bwabout.css) is genuinely styled today and deliberately left alone. */

.bw-login {
    --bw-primary: #005f83;
    --bw-primary-hover: #004e6d;
    --bw-primary-active: #003d57;
    --bw-error: #d12f33;
    --bw-success: #158133;
    --bw-font: 'Fira Sans', Roboto, Arial, sans-serif;
    font-family: var(--bw-font);
}

.bw-login * {
    box-sizing: border-box;
}

.bw-login .bw-login__field {
    display: block;
    margin-bottom: 14px;
}

.bw-login .bw-login__label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 5px;
}

.bw-login .bw-login__input {
    width: 100%;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background-color: #fff;
    outline: none;
    font-family: var(--bw-font);
    font-size: 14px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.87);
    transition: border-color 150ms ease;
}

.bw-login .bw-login__input:hover {
    border-color: rgba(0, 0, 0, 0.6);
}

.bw-login .bw-login__input:focus {
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 1px var(--bw-primary);
}

.bw-login .bw-login__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.bw-login .bw-login__btn {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 36px;
    min-width: 96px;
    padding: 0 16px;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: var(--bw-primary);
    background-image: none;
    box-shadow: none;
    color: #fff;
    font-family: var(--bw-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.bw-login .bw-login__btn:hover {
    background-color: var(--bw-primary-hover);
}

.bw-login .bw-login__btn:active {
    background-color: var(--bw-primary-active);
}

.bw-login .bw-login__links {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}

.bw-login .bw-login__links a {
    color: var(--bw-primary);
    text-decoration: none;
}

.bw-login .bw-login__links a:hover {
    text-decoration: underline;
}

.bw-login .bw-login__links .bw-login__links-sep {
    color: rgba(0, 0, 0, 0.3);
}

.bw-login .bw-login__message {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 18px;
}

.bw-login .bw-login__message--error {
    background-color: rgba(209, 47, 51, 0.08);
    color: var(--bw-error);
}

.bw-login .bw-login__message--success {
    background-color: rgba(21, 129, 51, 0.08);
    color: var(--bw-success);
}

/* NG-454: password-reveal toggle (js-reveal/uiPasswordToggle.js) on the reset-password page -
   same masked-field pattern as the login form, styled as a plain inline link/button so it doesn't
   compete visually with the primary action button. */
.bw-login .bw-login__field-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bw-login .bw-login__field-row .bw-login__input {
    flex: 1;
}

.bw-login .bw-login__reveal {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--bw-primary);
    font-family: var(--bw-font);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.bw-login .bw-login__reveal:hover {
    text-decoration: underline;
}