/* =====================================================================
   RMC met Reizi — account / login pages
   Navy-led branded sign-in (design system V1.0), Open Sans.
   Loaded after the base account styles to override the (dark stock photo)
   defaults. Uses !important where the metronic login-1 skin loads later.
   ===================================================================== */

html, body, .btn, .form-control {
    font-family: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---- Page background: navy brand panel with cyan horizon glow ----
   Bottom-right carries a light cyan wash behind the hero so the image's
   dark "Jouw wereld groter" headline reads (the PNG is transparent) and
   that corner is less blue. Layer order = painted front-to-back. */
body.reizi-login {
    background-color: #00577d !important;
    background-image:
        url('/Common/Images/reizi-hero.png'),
        radial-gradient(80% 90% at 100% 100%, rgba(234, 246, 251, 0.92) 0%, rgba(191, 232, 243, 0.45) 34%, rgba(0, 87, 125, 0) 62%),
        radial-gradient(120% 120% at 100% 0%, rgba(0, 169, 206, 0.28) 0%, rgba(0, 87, 125, 0) 55%),
        linear-gradient(135deg, #003f5a 0%, #00577d 55%, #0a6a93 100%) !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-position: right 30px bottom 20px, bottom right, top right, center !important;
    background-size: 620px auto, cover, auto, cover !important;
    background-attachment: fixed, fixed, fixed, fixed !important;
}

/* ---- Logo: RMC met Reizi lockup (witte wordmark + groene badge),
   transparant -> direct op de navy achtergrond, geen witte plaat ---- */
.m-login__logo {
    margin-top: 50px !important;
    text-align: left;
}
.m-login__logo a {
    display: inline-block;
    background: transparent;
    padding: 0;
    box-shadow: none;
}
.m-login__logo img {
    height: 64px;
    width: auto;
}

/* ---- Title ---- */
.kt-login__title h3 {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 2rem;
    letter-spacing: -0.01em;
}

/* ---- Form inputs (light on navy) ---- */
.kt-login__form .form-control {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    color: #00577d !important;
    height: 46px;
    border-radius: 6px;
}
.kt-login__form .form-control::placeholder {
    color: #6e7572;
}
.kt-login__form .form-control:focus {
    background-color: #ffffff !important;
    border-color: #bfe8f3 !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
}

/* ---- Wachtwoord-eisen (validatie) leesbaar op navy ---- */
.kt-login__form label.error,
.kt-login__form .help-block.error,
.kt-login__form .field-validation-error,
.kt-login__form .error ul,
.kt-login__form .error li {
    color: #ffd7cf !important;
    font-weight: 600;
}

/* ---- Wachtwoordsterkte-meter (eigen component, RMC-kleuren) ---- */
.password-strength {
    margin-top: 8px;
}
.password-strength__bar {
    height: 8px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    overflow: hidden;
}
.password-strength__bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 6px;
    transition: width 0.25s ease, background-color 0.25s ease;
}
.password-strength__label {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
}
/* niveaus: zwak -> redelijk -> goed -> sterk */
.password-strength.is-weak   .password-strength__bar > span { width: 25%;  background-color: #b5321f; }
.password-strength.is-fair   .password-strength__bar > span { width: 50%;  background-color: #e08a2b; }
.password-strength.is-good   .password-strength__bar > span { width: 75%;  background-color: #00a9ce; }
.password-strength.is-strong .password-strength__bar > span { width: 100%; background-color: #028137; }
.password-strength.is-weak   .password-strength__label { color: #ffd7cf; }
.password-strength.is-fair   .password-strength__label { color: #f8e8d4; }
.password-strength.is-good   .password-strength__label { color: #bfe8f3; }
.password-strength.is-strong .password-strength__label { color: #d8ecdf; }

/* ---- Primary CTA: Reizi green (action) — pops on navy ---- */
.kt-login__btn-primary.btn.btn-primary {
    background-color: #028137 !important;
    border-color: #028137 !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(2, 129, 55, 0.35) !important;
}
.kt-login__btn-primary.btn.btn-primary:hover,
.kt-login__btn-primary.btn.btn-primary:focus,
.kt-login__btn-primary.btn.btn-primary:active {
    background-color: #016a2d !important;
    border-color: #016a2d !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* ---- Secondary (forgot password): white outline ---- */
.kt-login__btn-secondary.btn.btn-outline-primary {
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    font-weight: 600;
}
.kt-login__btn-secondary.btn.btn-outline-primary:hover,
.kt-login__btn-secondary.btn.btn-outline-primary:focus,
.kt-login__btn-secondary.btn.btn-outline-primary:active {
    background: #ffffff !important;
    color: #00577d !important;
    border-color: #ffffff !important;
}

/* ---- Remember-me + helper text ---- */
.kt-checkbox,
.kt-checkbox span,
.kt-login__form label {
    color: #eaf3f8 !important;
}
.kt-login__form .hint {
    color: #cfe6ee !important;
}

/* ---- Bottom account links (register / activation) ---- */
.kt-login__account a {
    color: #cfe6ee !important;
    font-weight: 600;
}
.kt-login__account a:hover {
    color: #ffffff !important;
}
.kt-login__account .pipe-divider {
    color: rgba(255, 255, 255, 0.4);
}

/* ---- Tenant change box / language switch ---- */
.tenant-change-box,
.tenant-change-box * {
    color: #eaf3f8;
}

/* ---- Validation / alerts ---- */
.kt-login__form .alert {
    margin-bottom: 12px;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
    body.reizi-login {
        background-image: linear-gradient(135deg, #003f5a 0%, #0a6a93 100%) !important;
        background-size: cover !important;
    }
    .m-login__logo {
        text-align: center;
        margin-top: 24px !important;
    }
}