.login-dark {
  height: 1000px;
  background: #475d62 url(../../assets/img/star-sky.jpg);
  background-size: cover;
  position: relative;
}

    .login-dark form {
        max-width: 420px;
        width: 90%;
        background-color: #1e2833;
        padding: 40px;
        border-radius: 4px;
        transform: translate(-50%, -50%);
        position: absolute;
        top: 50%;
        left: 50%;
        color: #fff;
        box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
    }

.login-dark .illustration {
  text-align: center;
  padding: 15px 0 20px;
  font-size: 100px;
  color: #2980ef;
}

.login-dark form .form-control {
  background: none;
  border: none;
  border-bottom: 1px solid #434a52;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  color: inherit;
}

.login-dark form .btn-primary {
  background: #214a80;
  border: none;
  border-radius: 4px;
  padding: 11px;
  box-shadow: none;
  margin-top: 26px;
  text-shadow: none;
  outline: none;
}

.login-dark form .btn-primary:hover, .login-dark form .btn-primary:active {
  background: #214a80;
  outline: none;
}

.login-dark form .forgot {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #6f7a85;
  opacity: 0.9;
  text-decoration: none;
}

.login-dark form .forgot:hover, .login-dark form .forgot:active {
  opacity: 1;
  text-decoration: none;
}

.login-dark form .btn-primary:active {
  transform: translateY(1px);
}

    /* Microsoft 365 login button (visible + "pops") */
    .login-dark form .btn-m365 {
        display: block;
        width: 100%;
        margin-top: 12px;
        padding: 14px 14px; /* slightly larger */
        border-radius: 10px; /* more "button" feel */
        background: linear-gradient(135deg, #2b88ff 0%, #005fb8 55%, #004578 100%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #fff;
        font-weight: 800; /* bolder */
        letter-spacing: 0.2px;
        box-shadow: 0 14px 30px rgba(0, 95, 184, 0.35); /* stronger */
        transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
    }

        .login-dark form .btn-m365:hover {
            filter: brightness(1.06);
            transform: translateY(-2px);
            box-shadow: 0 18px 38px rgba(0, 95, 184, 0.45);
        }

        .login-dark form .btn-m365:active {
            transform: translateY(0px);
            filter: brightness(0.98);
        }

        .login-dark form .btn-m365:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

    /* Inside the M365 button: logo + text + badge */
    .login-dark form .m365-btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        line-height: 1.1;
    }

    .login-dark form .ms-logo {
        width: 18px;
        height: 18px;
        border-radius: 3px;
        background: linear-gradient(#f25022, #f25022) 0 0 / 50% 50% no-repeat, linear-gradient(#7fba00, #7fba00) 100% 0 / 50% 50% no-repeat, linear-gradient(#00a4ef, #00a4ef) 0 100% / 50% 50% no-repeat, linear-gradient(#ffb900, #ffb900) 100% 100% / 50% 50% no-repeat;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
        flex: 0 0 auto;
    }

    .login-dark form .m365-badge {
        margin-left: 6px;
        font-size: 11px;
        font-weight: 800;
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: rgba(255, 255, 255, 0.95);
    }

    /* Divider between M365 and password login */
    .login-dark form .login-divider {
        position: relative;
        text-align: center;
        margin: 16px 0 10px;
        color: rgba(255,255,255,0.72);
        font-size: 12px;
        font-weight: 600;
    }

        .login-dark form .login-divider:before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 1px;
            background: rgba(255,255,255,0.14);
        }

        .login-dark form .login-divider span {
            position: relative;
            background: #1e2833; /* matches form background from Login-Form-Dark.css */
            padding: 0 10px;
        }