/* -----------------------------------------------------------------------------
   Login screen (v2) — 2026-10-06
   Layout: photo background + dark wash, logo above a white card, region picker
   at the bottom. Scoped under `body.login-page` / `.login-v2` so it cannot leak
   into the application shell, which uses its own .login-* rules in style.css.
   -------------------------------------------------------------------------- */

body.login-page.login-page-v2 {
    background: url(../images/TR-Office-1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* dark wash so the white card and the blue "TRACKERTEER" wordmark both read */
body.login-page.login-page-v2::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 30, 0.82);
    z-index: 0;
}

.login-v2 {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    box-sizing: border-box;
}

/* ---- brand block (above the card) ---- */

.login-v2 .lv2-brand {
    text-align: center;
    margin-bottom: 22px;
}

.login-v2 .lv2-logo {
    display: block;
    margin: 0 auto 4px;
    width: 300px;
    max-width: 74vw;
    height: auto;
}

.login-v2 .lv2-app-name {
    margin: 2px 0 0;
    color: #ffffff;
    font-family: 'Lato', 'Roboto Condensed', Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .2px;
}

.login-v2 .lv2-version {
    margin: 3px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9fb0d0;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 12px;
}

.login-v2 .lv2-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2ecc71;
    display: inline-block;
}

/* ---- the card ---- */

.login-v2 .lv2-card {
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    padding: 30px 28px 28px;
    box-sizing: border-box;
    text-align: left;
}

.login-v2 .lv2-flash {
    margin-bottom: 14px;
}

/* -----------------------------------------------------------------------------
   Flash message inside the card.
   login.php calls render_flash(true), whose markup is now self-contained:

       <div class="flash-container">
           <div class="alert alert-success|alert-error|alert-info alert-dismissible" role="alert">
               <a class="flash-close"><i class="fa fa-close"></i></a>
               <span class="flash-message">message</span>
           </div>
       </div>

   Before 2026-10-06 this route used the Bootstrap branch of render_flash(), which
   wraps the alert in `.container-fluid` - a page-level wrapper whose gutter fought
   the 380px card and made the message look bolted on. The Bootstrap branch is
   unchanged for the ~49 other callers.
   -------------------------------------------------------------------------- */

.login-v2 .lv2-flash .flash-container {
    position: static;
}

.login-v2 .lv2-flash .alert {
    position: relative;
    margin: 0;
    padding: 13px 40px 13px 16px;
    border: 0;
    border-radius: 8px;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
    box-shadow: none;
}

/* success — mint background / deep teal text (matches the reference) */
.login-v2 .lv2-flash .alert.alert-success {
    background-color: #a8ecdd;
    color: #06604d;
}

/* error — the $frontend branch emits `alert-error` (not Bootstrap's alert-danger) */
.login-v2 .lv2-flash .alert.alert-error {
    background-color: #fbdcd9;
    color: #8e2419;
}

/* informational / unknown type fallback */
.login-v2 .lv2-flash .alert.alert-info {
    background-color: #dbeafe;
    color: #1e3a5f;
}

.login-v2 .lv2-flash .alert.alert-warning {
    background-color: #fdf0d5;
    color: #7a5300;
}

/* the dismiss control, pinned inside the alert */
.login-v2 .lv2-flash .alert .flash-close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    opacity: .55;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-v2 .lv2-flash .alert .flash-close:hover,
.login-v2 .lv2-flash .alert .flash-close:focus {
    opacity: 1;
    background: rgba(0, 0, 0, .07);
    color: inherit;
    text-decoration: none;
    outline: none;
}

.login-v2 .lv2-label {
    display: block;
    margin: 0 0 7px;
    color: #1f2d3d;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
}

.login-v2 .lv2-req {
    color: #e74c3c;
    margin-left: 2px;
}

.login-v2 .lv2-field {
    margin-bottom: 18px;
}

.login-v2 .lv2-input {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    box-sizing: border-box;
    border: 1px solid #d5dbe3;
    border-radius: 7px;
    background: #fff;
    color: #1f2d3d;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 14px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.login-v2 .lv2-input::placeholder {
    color: #9aa6b6;
}

.login-v2 .lv2-input:focus {
    outline: none;
    border-color: #22b573;
    box-shadow: 0 0 0 3px rgba(34, 181, 115, .16);
}

/* password field with the reveal toggle inside the control */
.login-v2 .lv2-pw-wrap {
    position: relative;
}

.login-v2 .lv2-pw-wrap .lv2-input {
    padding-right: 44px;
}

.login-v2 .lv2-pw-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #8b97a8;
    cursor: pointer;
    line-height: 1;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-v2 .lv2-pw-toggle:hover,
.login-v2 .lv2-pw-toggle:focus {
    background: #eef1f5;
    color: #4a5a70;
    outline: none;
}

.login-v2 .lv2-pw-toggle.is-on {
    color: #22b573;
    background: #e9f8f1;
}

/* ---- button ---- */

.login-v2 .lv2-submit {
    width: 100%;
    height: 44px;
    /* was supplied by the removed .lv2-remember bottom margin, so the
       password field -> button gap is unchanged */
    margin-top: 22px;
    border: 0;
    border-radius: 7px;
    background: #1eae6a;
    color: #fff;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.login-v2 .lv2-submit:hover,
.login-v2 .lv2-submit:focus {
    background: #189a5c;
    outline: none;
}

.login-v2 .lv2-forgot {
    display: block;
    margin-top: 14px;
    text-align: center;
    color: #6b7a8f;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 12.5px;
    text-decoration: none;
}

.login-v2 .lv2-forgot:hover {
    color: #1eae6a;
    text-decoration: none;
}

/* ---- region / language switcher ---- */

.login-v2 .lv2-regions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 0;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .6px;
}

.login-v2 .lv2-region {
    color: #98a7bd;
    text-decoration: none;
    padding: 3px 2px;
    text-transform: uppercase;
}

.login-v2 .lv2-region:hover,
.login-v2 .lv2-region:focus {
    color: #ffffff;
    text-decoration: none;
}

.login-v2 .lv2-region.is-active {
    color: #ffffff;
    font-weight: 700;
}

.login-v2 .lv2-sep {
    color: #4a5a70;
    padding: 0 9px;
}

/* ---- maintenance advisory (kept from the previous design) ---- */

.login-v2 .lv2-advisory {
    width: 100%;
    max-width: 715px;
    margin-top: 20px;
    padding: 16px 18px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .55);
    border-radius: 8px;
    color: #fff;
}

.login-v2 .lv2-advisory p {
    font-family: 'Arial', sans-serif;
    font-size: 15px;
}

.login-v2 .lv2-advisory p:not(.head-title) {
    font-size: 15px;
}

@media (max-width: 480px) {
    .login-v2 .lv2-card {
        padding: 24px 20px 22px;
        border-radius: 12px;
    }

    .login-v2 .lv2-logo {
        width: 230px;
    }

    .login-v2 .lv2-app-name {
        font-size: 17px;
    }
}